modernweb-dev / example-projects

Example projects using Modern Web tools

Repository from Github https://github.commodernweb-dev/example-projectsRepository from Github https://github.commodernweb-dev/example-projects

react-jsx example no longer works when updating to React 18

mor10 opened this issue · comments

Update the dependencies to React v18 and the react-jsx example no longer works. When the process runs, the generated page is blank and console returns the following error:

Uncaught SyntaxError: The requested module './../node_modules/react/index.js' does not provide an export named 'default' (at App.jsx:1:8)

Not sure if this issue originates with esbuild or modernweb-dev but it is not documented and is reproducible with any project running React v18.

Ran into a similar problem with the react-tsx example as well.

Had a minimal test case using https://github.com/modernweb-dev/example-projects/tree/master/react-tsx

  1. Change the react and react dom dependencies in package.json to ^18.0.0.
  2. Run npm install
  3. Run npm run test
  4. Get the following error:

🚧 Browser logs:
SyntaxError: The requested module './../node_modules/react/index.js' does not provide an export named 'default'

I found a CDN that provides an ES Build of react 18.2.

https://esm.sh/

By replacing the imports in every file the tests and demo ran in the react-tsx example.

import React from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0/";

Useful as a demo, but maybe won't give Typescript support when importing via the cdn.

"Hi everyone, I noticed this issue and would like to help. Could someone guide me on where to start looking or which part of the codebase might be affected? Also, are there any known workarounds that might help narrow down the problem?"