React4xp use css getting error while build jar

Enonic version: 7

I want to add CSS to jsx file in react4xp appication. I followed this to add CSS to the application.

As they told I added shared folder in src/main/resource/react4xp this directory and chunkDirs set in propertise file. Then updated webpack.config.react4xp.js file and installed npm libraries. After I build a jar file there is a build fails.

Error message is

Task :react4xp_components FAILED
/home/dell/Projects/documentui/node_modules/webpack-cli/bin/cli.js:281
throw err;
^
TypeError: Invalid value used in weak set
at WeakSet.add ()
at MiniCssExtractPlugin.apply (/home/dell/Projects/documentui/node_modules/mini-css-extract-plugin/dist/index.js:362:18)
at webpack (/home/dell/Projects/documentui/node_modules/webpack/lib/webpack.js:51:13)
at processOptions (/home/dell/Projects/documentui/node_modules/webpack-cli/bin/cli.js:272:16)
at yargs.parse (/home/dell/Projects/documentui/node_modules/webpack-cli/bin/cli.js:364:3)
at Object.parse (/home/dell/Projects/documentui/node_modules/yargs/yargs.js:576:18)
at /home/dell/Projects/documentui/node_modules/webpack-cli/bin/cli.js:49:8
at Object. (/home/dell/Projects/documentui/node_modules/webpack-cli/bin/cli.js:366:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/home/dell/Projects/documentui/node_modules/webpack/bin/webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

I think is this webpack-cli version problem(current version ^3.3.12) and I cannot find a compatible verion.
I can be wrong about the version problem and that is my thinking for now.

Are there any suggestions related to this?

Hi, cherysan19!

Let’s first verify the compatibility. The current combinations I recommend are one of these two (mixing versions between them is likely to cause problems):

Also, which node version are you using? During development, my experience has been best with node 12 (12.22.4 to be exact).

-Espen Norderud

1 Like