create-single-spa icon indicating copy to clipboard operation
create-single-spa copied to clipboard

Build fails when using React+Typescript

Open aplachka opened this issue 8 months ago • 2 comments

D:\create-single-spa>pnpm build

@home/root-config@ build D:\create-single-spa concurrently pnpm:build:*

[build:*webpack] [build:*webpack] > @home/root-config@ build:webpack D:\create-single-spa [build:*webpack] > webpack --mode=production [build:*webpack] [build:*types] [build:*types] > @home/root-config@ build:types D:\create-single-spa [build:*types] > tsc [build:*types] [build:*webpack] [webpack-cli] Failed to load 'D:\create-single-spa\webpack.config.js' config [build:*webpack] [webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module D:\create-single-spa\node_modules.pnpm\[email protected]_html-webpack-plugi [email protected][email protected][email protected]\node_modules\standalone-single-spa-webpack-plugin\lib\standalone-single-spa.js from D:\create-single-spa\node_modules.pnpm\[email protected]_@[email protected][email protected]\node_modules\webpack-config-single-spa\lib\webpack-config-single-spa.js not supported. [build:*webpack] Instead change the require of standalone-single-spa.js in D:\create-single-spa\node_modules.pnpm\[email protected]_@[email protected][email protected]\node_modules\webpack-config-single-spa\lib\webpack-config-single-spa.js to a dynamic import() which is available in all CommonJS modules. [build:*webpack] at Object. (D:\create-single-spa\node_modules.pnpm\[email protected]_@[email protected][email protected]\node_modules\webpack-config-single-spa\lib\webpack-config-single-spa.js:6:3) [build:*webpack] at Object. (D:\create-single-spa\node_modules.pnpm\[email protected]_@[email protected][email protected][email protected]\node_modules\webpack-config-single-spa-ts\lib\webpack-config-single-spa-ts.js:1:32) [build:*webpack] at Object. (D:\create-single-spa\webpack.config.js:2:27) { [build:*webpack] code: 'ERR_REQUIRE_ESM' [build:*webpack] } [build:*webpack]  ELIFECYCLE  Command failed with exit code 2. [build:*webpack] pnpm run build:webpack exited with code 2 [build:*types] pnpm run build:types exited with code 0  ELIFECYCLE  Command failed with exit code 1.

aplachka avatar Apr 01 '25 10:04 aplachka

@aplachka Downgrading webpack-config-single-spa-react-ts to 6.0.3 works for me. Seems to be an issue here in 6.0.4:

https://github.com/single-spa/create-single-spa/blob/88236d8aaa8d2220aeedff862b981c7f3ecd2f6a/packages/webpack-config-single-spa/lib/webpack-config-single-spa.js#L5-L6

Innoxious avatar Apr 01 '25 21:04 Innoxious

Node 22 added support for loading ES modules within CJS. See https://nodejs.org/en/blog/announcements/v22-release-announce#support-requireing-synchronous-esm-graphs

The change to webpack-config-single-spa should've been released as a major, due to requiring Node 22

internettrans avatar Apr 02 '25 03:04 internettrans

I released patch versions of the webpack configs with downgraded versions of standalone-single-spa-webpack-plugin that still work in Node 18.

I also released 8.0.0 versions of all webpack configs with the upgraded plugin and the NodeJS >= 22 requirement.

internettrans avatar Apr 02 '25 03:04 internettrans