CRA 3.3.0 - webpack unknown rule #30

TENsaga · 2020-01-16T18:35:40Z

Upgrading CRA to 3.3.0 the build stops with exception:

/mnt/c/Users/Aspen/Code/web_server/node_modules/@craco/craco/lib/plugin-utils.js:29 
    throw new Error(
    ^

Error: Found an unhandled loader in the development webpack config: /mnt/c/Users/Aspen/Code/web_server/node_modules/resolve-url-loader/index.js
 
This error probably occurred because you updated react-scripts or craco. Please try updating craco-less to the latest version:

   $ yarn upgrade craco-less

Or:

   $ npm update craco-less

If that doesn't work, craco-less needs to be fixed to support the latest version. 
Please check to see if there's already an issue in the FormAPI/craco-less repo:

   * https://github.com/FormAPI/craco-less/issues?q=is%3Aissue+webpack+unknown+rule

If not, please open an issue and we'll take a look. (Or you can send a PR!)

You might also want to look for related issues in the craco and create-react-app repos:

   * https://github.com/sharegate/craco/issues?q=is%3Aissue+webpack+unknown+rule
   * https://github.com/facebook/create-react-app/issues?q=is%3Aissue+webpack+unknown+rule

(Tried updating)

Thanks!

The text was updated successfully, but these errors were encountered:

tux-tn · 2020-01-31T20:37:44Z

Hello @TENsaga,
Are you using the latest version of craco-less?

TENsaga · 2020-02-06T19:50:06Z

Hey @tux-tn sorry about the slow response, I got this sorted out! We had to update Craco as well, we were using a pretty old version and had the wrong semver on it.

Up and running now 👍

renleiabc · 2020-05-23T07:06:36Z

I use the latest version，"@craco/craco": "^5.6.4", "craco-less": "^1.16.0",Why do you make such a mistake？

zoulegeyang · 2020-06-12T07:50:53Z

i use the latest version of @craco/craco and craco-less, but still throw this error.

yantze · 2020-06-28T06:11:05Z

Same here when use npm:

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

yarn run build work for me.

foreverpinetree · 2020-08-08T10:29:09Z

I use the latest version of both, but still throw this error.
I used npm, then replaced with yarn, it works now!

jetonk · 2020-08-20T17:02:13Z

It happens to me as well!

`"@craco/craco": "^5.6.4",
"craco-less": "^1.17.0",

`

cosydney · 2020-10-18T10:17:52Z

Hey can't seem to find a workaround I'm using the latest versions and I've been deleting node modules and reinstalling with yarn but still throws the same error:

"@craco/craco": "^5.7.0", "craco-less": "^1.17.0",

ndbroadbent · 2020-10-18T10:53:23Z

Hey sorry everyone, it looks like there have been some changes and we will need to make some updates. Are there any talented developers in here who would have some free time to look this issue and submit a PR? We would be really grateful for any help!

ndbroadbent · 2020-10-18T10:54:17Z

Hacktoberfest is still running, so this could be a great opportunity to get a free T-shirt or plant a tree.

davidshare · 2021-01-17T20:21:59Z

So this error occurs when I run export NODE_ENV=production

iamrakhmatov · 2021-02-07T22:26:06Z

Hi, I got the same error after deployment to Heroku in dev mode everything works fine but in prod getting this error:

Starting process with command npm start
[email protected] start /app
craco start

(node:28) UnhandledPromiseRejectionWarning: Error: Found an unhandled loader in the production webpack config: /app/node_modules/style-loader/dist/cjs.js

This error probably occurred because you updated react-scripts or craco. Please try updating craco-less to the latest version:
$ yarn upgrade craco-less
Or:
$ npm update craco-less

If that doesn't work, craco-less needs to be fixed to support the latest version.

deleted package-lock.json and node_modules and installed everything with yarn

"@craco/craco": "^6.1.1",
"craco-less": "^1.17.1",
"react-scripts": "4.0.1",

Need some help pls!!

AsmaDhanePersonal · 2021-03-22T15:51:06Z

Any news about this issue? I've got the same problem when I set my ENV_NODE to production but works fine in development mode. Any ideas about the possible fixes?

lorance19 · 2021-04-22T09:48:01Z

Still having this error.

simibac · 2021-05-26T13:01:01Z

Also still have this error.

protogenesis · 2021-08-18T01:05:57Z

So that's how I solved the issue.

Set your NODE_ENV environment variable to development and restart the project, and the error will disappear.

To set an environment variable in Windows:

SET NODE_ENV=development

on OS X or Linux:

export NODE_ENV=development

You should be able to see this by typing node in the command prompt which will open the node shell and then type process.env.NODE_ENV.

Ref:

https://githubmemory.com/repo/DocSpring/craco-less/issues/51
https://stackoverflow.com/questions/11104028/why-is-process-env-node-env-undefined

Envov · 2021-11-07T13:08:34Z

this is my package.json

{
  "name": "ts-hooks",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "craco-alias": "^3.0.1",
    "@craco/craco": "^6.2.0",
    "@jiaminghi/data-view-react": "^1.2.5",
    "@tailwindcss/postcss7-compat": "^2.2.7",
    "@types/jquery": "^3.5.6",
    "@types/node": "^12.0.0",
    "@types/ramda": "^0.27.44",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.18",
    "@types/react-router-dom": "^5.1.8",
    "antd": "^4.16.10",
    "autoprefixer": "^9",
    "craco-less": "^1.20.0",
    "echarts": "^5.1.2",
    "js-export-excel": "^1.1.4",
    "moment": "^2.25.3",
    "postcss": "^7",
    "ramda": "^0.27.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "typescript": "^4.1.2",
    "use-screenfull": "^0.0.4",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "serve": "craco start",
    "start": "craco start",
    "build": "craco build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

this error was also throwed.

bulletbrand · 2021-11-12T11:44:42Z

Still actual problem, when I try run me application with concurently and with ENV I get this issue

OlyLis1005 · 2021-11-23T02:35:35Z

I try everything not work😢
1.downgrad my dependencies to [email protected] and @craco/[email protected]
2.set NODE_ENV=development through cross-env in scripts
3.upgrade craco-less and craco/craco to latest version
4.remove nodemodules and use yarn to reinstall my package

this is my packge.json

{
  "name": "react-template",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@craco/craco": "^6.4.0",
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.37",
    "@types/react": "^17.0.34",
    "@types/react-dom": "^17.0.11",
    "antd": "^4.16.13",
    "axios": "^0.24.0",
    "craco-less": "^1.20.0",
    "jsurl": "^0.1.5",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "react-scripts": "^4.0.3",
    "typescript": "^4.4.4",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "cross-env NODE_ENV=development craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "start-old": "react-scripts start",
    "build-old": "react-scripts build",
    "test-old": "react-scripts test",
    "start-by-rewired": "react-app-rewired start"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@types/jsurl": "^1.2.30",
    "cross-env": "^7.0.3",
    "less-loader": "^10.2.0"
  }
}

and my craco.config.js

const CracoLessPlugin = require('craco-less')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              '@primary-color': '#eb6700',
              '@link-color': '#eb6700',
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
}

gallen-1240 · 2021-12-03T05:34:01Z

Do you have a solution, brother

zdkhero · 2021-12-22T10:02:05Z

I also encountered the same problem and used the following methods. Fortunately, I solved this problem

delete node_modules
yarn upgrade craco-less
yarn

Good luck ~~~

kai-phan · 2021-12-23T07:43:56Z

Just downgrade react-scripts to 4.0.3 everything work fine

fourpastmidnight · 2022-06-02T17:22:18Z

I ran into this issue and reported as #98. I submitted PR #99 which fixes this error. To be clear, I'm using @craco/craco:6.4.3 (latest supported version, but it also would work with v6.1.2, the version I was using prior) and [email protected]. I suspect this would work for just about anything, as it seems to be the way craco-less is trying to search for loaders that is the issue.

Please let me know if #99 resolves this for you all, and if so, maybe we can get the maintainer to get it merged.

FathimaOB01 · 2022-06-05T07:01:32Z

You can try following these steps,

Remove nodemodules
Remove yarn.lock/package-lock file
Add this to package.json file

  "resolutions": {
    "//": "See https://github.com/facebook/create-react-app/issues/11773",
    "react-error-overlay": "6.0.9"
  }

yarn add
yarn add -D [email protected]
yarn start

Note: I am using "react": "^17.0.1"

This worked for me!

228432 · 2023-06-20T03:15:11Z

请把 @craco/caraco 和 craco-less 都使用最新版本
升级完还不可以就删除 node_modules
再使用yarn来重新下载依赖
不要使用npm 或 cnpm 会出现问题

228432 · 2023-06-20T03:17:24Z

Please use the latest version of both @craco/caraco and craco-less
Delete node_modules if the upgrade is still not working
Then use yarn to re-download dependencies
Don't use npm or cnpm there will be problems

TENsaga closed this as completed Feb 6, 2020

pybuche mentioned this issue Apr 30, 2020

Support for react-scripts 3.4.0 (webpack 4.41.5) #33

Closed

ndbroadbent reopened this Oct 18, 2020

ndbroadbent added good first issue Good for newcomers help wanted Extra attention is needed labels Oct 18, 2020

cosydney mentioned this issue Oct 18, 2020

Found an unhandled loader in the developement webpack config: .../node_modules/style-loader/index.js #51

Closed

gosuri mentioned this issue Dec 4, 2020

deployment on heroku reports "unhandled loader in the production webpack config" project-serum/serum-dex-ui#54

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CRA 3.3.0 - webpack unknown rule #30

CRA 3.3.0 - webpack unknown rule #30

TENsaga commented Jan 16, 2020

tux-tn commented Jan 31, 2020

TENsaga commented Feb 6, 2020

renleiabc commented May 23, 2020

zoulegeyang commented Jun 12, 2020

yantze commented Jun 28, 2020

foreverpinetree commented Aug 8, 2020

jetonk commented Aug 20, 2020 •

edited

Loading

cosydney commented Oct 18, 2020

ndbroadbent commented Oct 18, 2020

ndbroadbent commented Oct 18, 2020 •

edited

Loading

davidshare commented Jan 17, 2021

iamrakhmatov commented Feb 7, 2021

AsmaDhanePersonal commented Mar 22, 2021

lorance19 commented Apr 22, 2021

simibac commented May 26, 2021

protogenesis commented Aug 18, 2021 •

edited

Loading

Envov commented Nov 7, 2021 •

edited

Loading

bulletbrand commented Nov 12, 2021

OlyLis1005 commented Nov 23, 2021 •

edited

Loading

gallen-1240 commented Dec 3, 2021

zdkhero commented Dec 22, 2021 •

edited

Loading

kai-phan commented Dec 23, 2021

fourpastmidnight commented Jun 2, 2022

FathimaOB01 commented Jun 5, 2022 •

edited

Loading

228432 commented Jun 20, 2023

228432 commented Jun 20, 2023

CRA 3.3.0 - webpack unknown rule #30

CRA 3.3.0 - webpack unknown rule #30

Comments

TENsaga commented Jan 16, 2020

tux-tn commented Jan 31, 2020

TENsaga commented Feb 6, 2020

renleiabc commented May 23, 2020

zoulegeyang commented Jun 12, 2020

yantze commented Jun 28, 2020

foreverpinetree commented Aug 8, 2020

jetonk commented Aug 20, 2020 • edited Loading

cosydney commented Oct 18, 2020

ndbroadbent commented Oct 18, 2020

ndbroadbent commented Oct 18, 2020 • edited Loading

davidshare commented Jan 17, 2021

iamrakhmatov commented Feb 7, 2021

AsmaDhanePersonal commented Mar 22, 2021

lorance19 commented Apr 22, 2021

simibac commented May 26, 2021

protogenesis commented Aug 18, 2021 • edited Loading

Envov commented Nov 7, 2021 • edited Loading

bulletbrand commented Nov 12, 2021

OlyLis1005 commented Nov 23, 2021 • edited Loading

gallen-1240 commented Dec 3, 2021

zdkhero commented Dec 22, 2021 • edited Loading

kai-phan commented Dec 23, 2021

fourpastmidnight commented Jun 2, 2022

FathimaOB01 commented Jun 5, 2022 • edited Loading

228432 commented Jun 20, 2023

228432 commented Jun 20, 2023

jetonk commented Aug 20, 2020 •

edited

Loading

ndbroadbent commented Oct 18, 2020 •

edited

Loading

protogenesis commented Aug 18, 2021 •

edited

Loading

Envov commented Nov 7, 2021 •

edited

Loading

OlyLis1005 commented Nov 23, 2021 •

edited

Loading

zdkhero commented Dec 22, 2021 •

edited

Loading

FathimaOB01 commented Jun 5, 2022 •

edited

Loading