CORS/404 errors from `pg_graphiql` while following quickstart

[mtilda]

While following the QuickStart instructions, when I open the GraphiQL interface at http://localhost:4000/, I get several errors from unpkg.

To Reproduce

1. First, clone the repo:

   git clone https://github.com/supabase/pg_graphql.git
   cd pg_graphql
   

2. Next, launch the demo with docker-compose.

   docker compose up
   

3. Finally, access GraphiQL at http://localhost:4000/. <-- This gives the following errors

Access to script at 'https://unpkg.com/react-dom@19.1.0/umd/react-dom.production.min.js' (redirected from 'https://unpkg.com/react-dom/umd/react-dom.production.min.js') from origin 'http://localhost:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://unpkg.com/react-dom@19.1.0/umd/react-dom.production.min.js net::ERR_FAILED 404 (Not Found)

Access to script at 'https://unpkg.com/react@19.1.0/umd/react.production.min.js' (redirected from 'https://unpkg.com/react/umd/react.production.min.js') from origin 'http://localhost:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://unpkg.com/react@19.1.0/umd/react.production.min.js net::ERR_FAILED 404 (Not Found)

Uncaught TypeError: Cannot read properties of undefined (reading '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')
    at react-jsx-runtime.development.js:52:34
    at ../../../node_modules/react/cjs/react-jsx-runtime.development.js (react-jsx-runtime.development.js:1313:4)
    at __webpack_require__ (bootstrap:19:1)
    at ../../../node_modules/react/jsx-runtime.js (jsx-runtime.js:6:3)
    at __webpack_require__ (bootstrap:19:1)
    at ../../graphiql-react/dist/index.js (mode.ts:115:1)
    at __webpack_require__ (bootstrap:19:1)
    at cdn.ts:7:1
    at graphiql.min.js:96194:2
    at graphiql.min.js:96196:12

Uncaught ReferenceError: GraphiQL is not defined
    at (index):24:23

[mtilda]

Pinning react and react-dom to version 18 in the CDN links seems to fix the problem:

pg_graphql/dockerfiles/graphiql/index.html

Lines 11 to 18 in 4745880

	<script
	crossorigin
	src="https://unpkg.com/react/umd/react.production.min.js"
	></script>
	<script
	crossorigin
	src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
	></script>

     <script
       crossorigin
-      src="https://unpkg.com/react/umd/react.production.min.js"
+      src="https://unpkg.com/react@18/umd/react.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
+      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
     ></script>

Does unpkg support React 19?

[mtilda]

Does unpkg support React 19?

From the React 19 Upgrade Guide:

UMD builds removed

UMD was widely used in the past as a convenient way to load React without a build step. Now, there are modern alternatives for loading modules as scripts in HTML documents. Starting with React 19, React will no longer produce UMD builds to reduce the complexity of its testing and release process.

To load React 19 with a script tag, we recommend using an ESM-based CDN such as esm.sh.

<script type="module">
  import React from "https://esm.sh/react@19/?dev"
  import ReactDOMClient from "https://esm.sh/react-dom@19/client?dev"
  ...
</script>

[mtilda]

Looks like GraphiQL is still on React 18.

The official example index.html file GraphiQL provides pins to React 18:

https://github.com/graphql/graphiql/blob/b495159382465a2cab6d8592b8bce66fece066fe/examples/graphiql-cdn/index.html#L31-L38

So probably the best action here is to pin to 18, like in my first comment.