Use with create-react-app

[Kim-Andersen]

Hi. I'm having issues using this with a create-react-app. I'm using react-app-rewired and customize-cra to override the configs.

The config looks like this:

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /\.ccss$/,
    loader: 'lit-css-loader'
  })
);

But I get this error when trying to run the app:

Failed to compile.

./src/heimdall/components/text/styles.ccss
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: [path-to-my-app]/node_modules/lit-css-loader/lit-css-loader.js
require() of ES modules is not supported.
require() of [path-to-my-app]/node_modules/lit-css-loader/lit-css-loader.js from [path-to-my-app]/node_modules/loader-runner/lib/loadLoader.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename lit-css-loader.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from [path-to-my-app]/node_modules/lit-css-loader/package.json.

Maybe you can help?

Thanks a lot.

[Kim-Andersen]

Maybe this comment helps? https://github.com/timarney/react-app-rewired/issues/431#issuecomment-568327409

[Kim-Andersen]

An upgrade to the latest version of react-scripts (5.0.0) did it.

[evgenyboxer]

Getting the same error with Vue CLI 4.5