next start OK, but node start Error: SyntaxError: Named export 'jsx' not found

[yangboyd]

Version

v20.9.0

Platform

Linux dsw-280180-68d74df5b8-pnl6f 4.19.24-7.34.cbp.al7.x86_64 #1 SMP Tue Jun 20 06:15:49 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

Subsystem

next,node

What steps will reproduce the bug?

development:
next start works fine.

then build:
pnpm --filter=app run build

in production environment:
node server.js failed.

⨯ file:///projext/node_modules/.pnpm/registry.npmmirror.com+@chakra-ui+css-reset@2.3.0_@emotion[email protected][email protected]/node_modules/@chakra-ui/css-reset/dist/chunk-B4LBJQ3X.mjs:5
import { jsx } from "react/jsx-runtime";
^^^
SyntaxError: Named export 'jsx' not found. The requested module 'react/jsx-runtime' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react/jsx-runtime';
const { jsx } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:131:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:213:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)

⨯ file:///projext/node_modules/.pnpm/registry.npmmirror.com+@chakra-ui+css-reset@2.3.0_@emotion[email protected][email protected]/node_modules/@chakra-ui/css-reset/dist/chunk-B4LBJQ3X.mjs:5
import { jsx } from "react/jsx-runtime";
^^^
SyntaxError: Named export 'jsx' not found. The requested module 'react/jsx-runtime' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react/jsx-runtime';
const { jsx } = pkg;

How often does it reproduce? Is there a required condition?

always

What is the expected behavior? Why is that the expected behavior?

node works fine

What do you see instead?

node run fails

Additional information

No response

[ruiru-scrums]

Any luck with this ? Can't seem to figure out a solution for it.

[CodeEventHorizon]

I think Node.js runtime is having trouble with named exports { jsx } because the react/jsx-runtime module you're trying to import from is a CommonJS module.
steps to take:

• check for ESM compatibility, as not all packages are fully compatible with ESM.
• try changing import { jsx } from "react/jsx-runtime"; to:

import pkg from 'react/jsx-runtime';
const { jsx } = pkg;

or call for jsx like: pkg.jsx...

• make sure you are actually using ESM by typing "type": "module" in package.json or using by .mjs extension
• though note that Node.js does not handle jsx files, likewise it doesn’t handle mjsx or cjsx files either. You could configure a bundler or a transpilation process to make a jsx file into either cjs or mjs file for node to be able to read.
• if you are using Bun, it supports both ESM & CommonJS in the same file.
• check the build tools you are using like webpack, esbuild, react-scripts etc.
• if you are using node to run your react app, it is a mistake and you should use build tools like webpack for production, and react-scripts for development environment

[ruiru-scrums]

Let me try this thanks

[CodeEventHorizon]

please consider flagging above comment as an accepted answer if it was helpful