Build fails on baseline code example using React 18

[mor10]

Related: modernweb-dev/example-projects#928.

In a project using React v18 when the build 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)

These issues cascade down the dependency tree. If React v16 is used, the same issue does not appear.

To reproduce, clone the react-jsx example, update the dependencies to React 18, and test.

Not sure if this issue originates with esbuild or modernweb-dev but it is not documented and is reproducible across all projects I've tested running React v18.

[mor10]

I note the functional example provided by the project is using the 3-year old (and seemingly defunct?) @pika release of React. When testing using React 16, the same error occurs.

If @web/dev-server doesn't work with React, that should be documented. If it does, the procedure for getting it to work should be documented.

[thepassle]

The react example is just loading an esm bundle of react instead of commonjs (which react ships as). If you want to use commonjs, you'll have to add a plugin for that.

[mor10]

Thanks. That confirms my observations. I recommend this is documented as right now the documentation and base example makes it look and sound as if React can be used out of the box. React is commonjs and will remain commonjs for the foreseeable future, and even if React itself magically changes to esm it will take a long time for the plugins universe to follow suit. Until such time, the documentation around how to use React is insufficient and will lead people to frustration.

[Westbrook]

React and commonJS are not "modern web" technologies, and we're not likely to add a reference to every non-modern usage of JS in the web ecosystem. Feel free to submit a PR if you have a path that you like here, but beyond outlining that usage can leverage Rollup plugins to add support for Common JS in their projects as if done here, I'm not sure there's a quality path to staying inline with our project goals here and helping users in this context.

[dburles]

Just wasted 15 minutes setting up a new project only to run into this exact issue. I agree there should be some documentation around it or simply update or remove the outdated examples to avoid confusion.