Error: Found an unhandled loader in the staging webpack config

[jetonk]

I just initialized create-react-app setup and installed ant.design which forced me to use craco and craco-less.

Now when I try to run npm start or craco start it throws me this error:

Versions are:

"@craco/craco": "^5.6.4",
"craco-less": "^1.17.0",
"react": "^16.13.1",

[tonyisblind]

upvote 🆙 🆙

[lorance19]

It has been almost a year and still having this error. How did you solve it? I am using antd too. Please help.

[flyingcrp]

Is there any solution? i got same error

npm info it worked if it ends with ok
[15:55:03] npm info using npm@6.14.7
[15:55:03] npm info using node@v14.8.0
[15:55:03] npm timing npm Completed in 30ms
[15:55:03] npm info ok 
[15:55:03] npm info it worked if it ends with ok
[15:55:03] npm info using npm@6.14.8
[15:55:03] npm info using node@v14.8.0
[15:55:04] npm info lifecycle wxapp@0.1.0~prebuild: wxapp@0.1.0
[15:55:04] npm info lifecycle wxapp@0.1.0~build: wxapp@0.1.0
[15:55:04] 
[15:55:04] > wxapp@0.1.0 build /root/workspace/the-new-retail_wxapp_XX1r
[15:55:04] > craco --max_old_space_size=4096 build
[15:55:04] 
[15:55:05] (node:1025) UnhandledPromiseRejectionWarning: Error: Found an unhandled loader in the production webpack config: /root/workspace/the-new-retail_wxapp_XX1r/node_modules/_mini-css-extract-plugin@0.11.3@mini-css-extract-plugin/dist/loader.js
[15:55:05] 
[15:55:05] This error probably occurred because you updated react-scripts or craco. Please try updating craco-less to the latest version:
[15:55:05] 
[15:55:05]    $ yarn upgrade craco-less
[15:55:05] 
[15:55:05] Or:
[15:55:05] 
[15:55:05]    $ npm update craco-less
[15:55:05] 
[15:55:05] If that doesn't work, craco-less needs to be fixed to support the latest version.
[15:55:05] Please check to see if there's already an issue in the DocSpring/craco-less repo:
[15:55:05] 
[15:55:05]    * https://github.com/DocSpring/craco-less/issues?q=is%3Aissue+webpack+unknown+rule
[15:55:05] 
[15:55:05] If not, please open an issue and we'll take a look. (Or you can send a PR!)
[15:55:05] 
[15:55:05] You might also want to look for related issues in the craco and create-react-app repos:
[15:55:05] 
[15:55:05]    * https://github.com/sharegate/craco/issues?q=is%3Aissue+webpack+unknown+rule
[15:55:05]    * https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack+unknown+rule
[15:55:05] 
[15:55:05]     at throwUnexpectedConfigError (/root/workspace/the-new-retail_wxapp_XX1r/node_modules/_@craco_craco@6.4.0@@craco/craco/lib/plugin-utils.js:29:11)
[15:55:05]     at throwError (/root/workspace/the-new-retail_wxapp_XX1r/node_modules/_craco-less@1.20.0@craco-less/lib/craco-less.js:14:5)
[15:55:05]     at /root/workspace/the-new-retail_wxapp_XX1r/node_modules/_craco-less@1.20.0@craco-less/lib/craco-less.js:100:9
[15:55:05]     at Array.forEach (<anonymous>)
[15:55:05]     at createLessRule (/root/workspace/the-new-retail_wxapp_XX1r/node_modules/_craco-less@1.20.0@craco-less/lib/craco-less.js:32:13)
[15:55:05]     at Object.overrideWebpackConfig (/root/workspace/the-new-retail_wxapp_XX1r/node_modules/_craco-less@1.20.0@craco-less/lib/craco-less.js:127:18)
[15:55:05]     at overrideWebpack (/root/workspace/the-new-retail_wxapp_XX1r/node_modules/_@craco_craco@6.4.0@@craco/craco/lib/features/plugins.js:42:40)
[15:55:05]     at /root/workspace/the-new-retail_wxapp_XX1r/node_modules/_@craco_craco@6.4.0@@craco/craco/lib/features/plugins.js:64:29
[15:55:05]     at Array.forEach (<anonymous>)
[15:55:05]     at applyWebpackConfigPlugins (/root/workspace/the-new-retail_wxapp_XX1r/node_modules/_@craco_craco@6.4.0@@craco/craco/lib/features/plugins.js:63:29)
[15:55:05] (Use `node --trace-warnings ...` to show where the warning was created)
[15:55:05] (node:1025) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
[15:55:05] (node:1025) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[15:55:05] npm info lifecycle wxapp@0.1.0~postbuild: wxapp@0.1.0
[15:55:05] npm timing npm Completed in 1459ms
[15:55:05] npm info ok 

[ezze]

I get this one when trying to run in production mode:

NODE_ENV=production npx craco start

My deps:

{
  "@craco/craco": "^7.1.0",
  "craco-less": "^3.0.1"
}

[Jinuss]

How to solve the error? I met the same.

[zulqarnain-empg]

How was this solved?

[ezze]

create-react-app is deprecated, guys, and as the result, craco related stuff too. I don't believe it will be fixed. So consider migrating to alternative bundler. I had a luck migrating to RSbuild, and it was quite easy because its configuration is close to webpack's one.

https://react.dev/blog/2025/02/14/sunsetting-create-react-app

[zulqarnain-empg]

create-react-app is deprecated, guys, and as the result, craco related stuff too. I don't believe it will be fixed. So consider migrating to alternative bundler. I had a luck migrating to RSbuild, and it was quite easy because its configuration is close to webpack's one.

https://react.dev/blog/2025/02/14/sunsetting-create-react-app

But Many are still working on CRA, why they are not getting this issue or how they managed to resolve it?

[maggie-fmq]

Finally solve the issue. In my case just set the environment variable "NODE_ENV" to "development" instead of "production".

The error message "Error: Found an unhandled loader in the production webpack config:" is from :
\node_modules\craco-less\lib\craco-less.js:line103
throwError(
Found an unhandled loader in the ${context.env} webpack config: ${rule.loader},
"webpack+unknown+rule"
);

So the ${context.env} is "production", which is the root cause in my case.