React Sample App - URL not found for given property

[threetriplets]

When I run the basic React app the error I get is:

Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db
I run that successfully, but the error persists.

For localhost:3000 I changed the default Identity Provider to https://broker.pod.inrupt.com since that’s where I created my pod.

Clicking login takes me there, I authorize thing and am redirected back to localhost:3000. The page loads, then reloads and errors all over. Seems like I’m missing a key url, but which one and what file to edit to fix this?

# Unhandled Runtime Error

Error: URL not found for given property

##### Call Stack

###### L

node_modules/@inrupt/solid-ui-react/dist/index.js (1:7062)

###### renderWithHooks

node_modules/react-dom/cjs/react-dom.development.js (14803:0)

###### mountIndeterminateComponent

node_modules/react-dom/cjs/react-dom.development.js (17482:0)

###### beginWork

node_modules/react-dom/cjs/react-dom.development.js (18596:0)

###### HTMLUnknownElement.callCallback

node_modules/react-dom/cjs/react-dom.development.js (188:0)

###### Object.invokeGuardedCallbackDev

node_modules/react-dom/cjs/react-dom.development.js (237:0)

###### invokeGuardedCallback

node_modules/react-dom/cjs/react-dom.development.js (292:0)

###### beginWork$1

node_modules/react-dom/cjs/react-dom.development.js (23203:0)

###### performUnitOfWork

node_modules/react-dom/cjs/react-dom.development.js (22154:0)

###### workLoopSync

node_modules/react-dom/cjs/react-dom.development.js (22130:0)

###### performSyncWorkOnRoot

node_modules/react-dom/cjs/react-dom.development.js (21756:0)

###### eval

node_modules/react-dom/cjs/react-dom.development.js (11089:0)

###### unstable_runWithPriority

node_modules/scheduler/cjs/scheduler.development.js (653:0)

###### runWithPriority$1

node_modules/react-dom/cjs/react-dom.development.js (11039:0)

###### flushSyncCallbackQueueImpl

node_modules/react-dom/cjs/react-dom.development.js (11084:0)

###### flushSyncCallbackQueue

node_modules/react-dom/cjs/react-dom.development.js (11072:0)

###### flushPassiveEffectsImpl

node_modules/react-dom/cjs/react-dom.development.js (22883:0)

###### unstable_runWithPriority

node_modules/scheduler/cjs/scheduler.development.js (653:0)

###### runWithPriority$1

node_modules/react-dom/cjs/react-dom.development.js (11039:0)

###### flushPassiveEffects

node_modules/react-dom/cjs/react-dom.development.js (22820:0)

###### eval

node_modules/react-dom/cjs/react-dom.development.js (22699:0)

###### workLoop

node_modules/scheduler/cjs/scheduler.development.js (597:0)

###### flushWork

node_modules/scheduler/cjs/scheduler.development.js (552:0)

###### MessagePort.performWorkUntilDeadline

node_modules/scheduler/cjs/scheduler.development.js (164:0)

[Vincent]

Hi Dave, it looks like there’s a bug in the demo app. I’ve reported it here. Meanwhile, you can work around it by opening components/profile/index.tsx and removing the line that says

<Image property={VCARD.hasPhoto.iri.value} width={480} />

(The issue here is that it’s trying to display a profile image, which a new Pod on pod.inrupt.com does not have. So the error “URL not found for given property” refers to no image URL being found for the property VCARD.hasPhoto.iri.value.)

[threetriplets]

I appreciate the answer and the bug report. It’s nice to be able to run the basic demo and start to see the possibilities without spending too many hours on setup and dev environment. Off to figure out how to debug better.