Local Graphiql CORS Error on Hydrogen Demo Store

Retired Boards Appdev Custom Storefronts

Topic summary

A developer encountered a CORS (Cross-Origin Resource Sharing) error when accessing the GraphiQL interface at localhost:3000/graphiql in the Hydrogen Demo Store.

Error Details:

  • Empty screen displayed at the GraphiQL endpoint
  • Console showed CORS policy blocking access to external React scripts from unpkg.com
  • Multiple JavaScript errors including “ReactDOM is not defined” and reference errors
  • The main storefront at localhost:3000 functioned normally without issues

Resolution:
The issue resolved itself spontaneously, though the cause of both the problem and its automatic resolution remains unclear. No specific troubleshooting steps or configuration changes were documented.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

I was going through the Hydrogen docs and installed the Hydrogen Demo Store. When I hit http://localhost:3000/graphiql I am getting an empty screen (plus the console errors below). When I visit http://localhost:3000 I get the Demo Store and have no issues.

Anyone with similar issues?

Access to script at 'https://unpkg.com/react@17/umd/react.development.js' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://unpkg.com/react@17/umd/react.development.js net::ERR_FAILED 520

index.es.js:826 Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')
at Object.r (index.es.js:826:15)
at 6856 (index.es.js:26809:4)
at i (bootstrap:19:32)
at 7139 (forEachState.es.js:14:38)
at i (bootstrap:19:32)
at 6676 (query.ts:103:2)
at i (bootstrap:19:32)
at startup:4:27
at startup:4:47

Uncaught ReferenceError: ReactDOM is not defined
at (index):39:7 
2

This issue suddenly fixed itself. Not sure why.