search

DocSpring / craco-less

A Less plugin for craco / react-scripts / create-react-app
MIT License
123 stars 48 forks source link

CRA 3.3.0 - webpack unknown rule #30

Open TENsaga opened 4 years ago

TENsaga commented 4 years ago

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!

tux-tn commented 4 years ago

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

TENsaga commented 4 years ago

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 commented 4 years ago

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

zoulegeyang commented 4 years ago

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

yantze commented 4 years ago

Same here when use npm:

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

yarn run build work for me.

foreverpinetree commented 4 years ago

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

jetonk commented 4 years ago

It happens to me as well!

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

`

cosydney commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

davidshare commented 3 years ago

So this error occurs when I run export NODE_ENV=production

iamrakhmatov commented 3 years ago

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 tantal@0.1.0 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 commented 3 years ago

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 commented 3 years ago

Still having this error.

simibac commented 3 years ago

Also still have this error.

protogenesis commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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

OlyLis1005 commented 2 years ago

I try everything not work😢 1.downgrad my dependencies to craco-less@1.16.0 and @craco/craco@5.6.4 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 commented 2 years ago

Do you have a solution, brother

zdkhero commented 2 years ago

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

  1. delete node_modules
  2. yarn upgrade craco-less
  3. yarn

Good luck ~~~

kai-phan commented 2 years ago

Just downgrade react-scripts to 4.0.3 everything work fine

fourpastmidnight commented 2 years ago

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 react-scripts@4.0.3. 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 commented 2 years ago

You can try following these steps,

  1. Remove nodemodules
  2. Remove yarn.lock/package-lock file
  3. Add this to package.json file
  "resolutions": {
    "//": "See https://github.com/facebook/create-react-app/issues/11773",
    "react-error-overlay": "6.0.9"
  }
  1. yarn add
  2. yarn add -D react-error-overlay@6.0.9
  3. yarn start

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

This worked for me!

228432 commented 1 year ago

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

228432 commented 1 year ago

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