docspring / craco-less Goto Github PK

View Code? Open in Web Editor NEW

123.0 123.0 48.0 3.18 MB

A Less plugin for craco / react-scripts / create-react-app

License: MIT License

JavaScript 100.00%

craco-less's People

Contributors

Stargazers

Watchers

Forkers

libertrip zhuzhuaicoding olessavluk mansarip yifanwangsh diogobeda tux-tn alexandrtovmach gaoxiaoliangz chrisinajar theres harunurhan pharmagin nogashimoni wol2 janjakes luisabellan dearifaldi dr2009 lemmmy thesixer mdluo aaj 30emeciel sgtsquiggs xianzhengquan fanck0605 tengxiaoyang yesk6991 xyy94813 smoovsky lihaogit adriennickson aworkingapp hervey424 diercohen snoweastcn istothymoon fourpastmidnight maciasello hansjoachim granpc bryceblankinship arnaudgathy codersjj daifazhan lingyue-dot coh-it-software-engineering

craco-less's Issues

Error: Found an unhandled loader in the staging webpack config

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",

Should support `rule.loader`

It throws:

node_modules/craco-less/lib/craco-less.js:51
  loaders.forEach(ruleOrLoader => {
          ^

TypeError: Cannot read property 'forEach' of undefined

Because sassRule is:

{ 
  test: /\.(scss|sass)$/,
  exclude: /\.module\.(scss|sass)$/,
  loader:
   [ { loader:
        '/my-project/node_modules/mini-css-extract-plugin/dist/loader.js',
       options: {} },
     { loader:
        '/my-project/node_modules/css-loader/index.js',
       options: {...} },
     { loader:
        '/my-project/node_modules/postcss-loader/src/index.js',
       options: {...} },
     { loader:
        '/my-project/node_modules/sass-loader/lib/loader.js',
       options: {...} }
  ],
  sideEffects: true
}

which is valid, as loader is a shortcut for some form of
user https://webpack.js.org/configuration/module/#ruleloader

LESS output is always bundled into JS

For CSS and SASS in create-react-app

development build (npm start), the css is bundled with the js files.
production build (npm build) , the css is chunked out into css files.

While using this plugin, the css is always bundled with the js files. Ideally this less plugin functions the same way the sass loader in CRA does, which would include extracting CSS from the js bundle and including it in css files.

Can't use craco-less with craco v7.0.0-alpha.3

Hey i am facing a problem while i am trying to use craco-less with react-scripts v5 and craco v7.0.0-alpha.3
here is my logs:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"^7.0.0-alpha.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @craco/craco@"^6.0.0" from [email protected]
npm ERR! node_modules/craco-less
npm ERR!   craco-less@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

MiniCssExtractPlugin config not work

plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        miniCssExtractPluginOptions: {
          filename: 'hahaha/[name].[hash].css',
          chunkFilename: 'hahaha/[id].[hash].css'
        },
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true,
            sourceMap: false
          }
        },
        modifyLessRule: function (lessRule) {
          return {
            ...lessRule,
            // craco-less中，配置为 /\.module\.(less)$/，导致.module.less文件无法编译，此处覆盖相关配置
            exclude: /\.nothing\.(less)$/
          }
        },
        cssLoaderOptions: {
          modules: {
            localIdentName: '[local]__[hash:base64:5]',
            // 回调必须返回 `local`，`global`  默认global
            mode: (resourcePath) => {
              if (/(module|modules|local)\.(less|css)$/i.test(resourcePath)) {
                return 'local'
              }

              return 'global'
            }
          }
        },
        babelPluginImportOptions: {
          libraryName: 'antd',
          libraryDirectory: 'es',
          style: true
        }
      }
    },
    {
      plugin: CracoAliasPlugin,
      options: { alias: configPaths('./tsconfig.paths.json') }
    }
  ]

I wanted to change the CSS output file directory, but the miniCssExtractPluginOptions configuration did not work

craco 7 with official react-scripts v5 support has been released

see https://github.com/dilanx/craco/releases/tag/v7.0.0

I think it's now possible to roll out a new version of craco-less with craco 7 as peerDependency

Update webpack dependency

create-react-app@2.1.3 was the last version to use webpack@4.19.1. Since v2.1.4, create-react-app uses webpack@4.28.3.

When using v2.1.4 or above, the following error occurs:


> [email protected] start /home/bernardo/Documents/project
> craco start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.28.3"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /home/bernardo/Documents/project/node_modules/webpack (version: 4.19.1) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /home/bernardo/Documents/project/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `craco start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bernardo/.npm/_logs/2019-03-01T15_23_12_995Z-debug.log

By pinning [email protected] the error is solved, but this should only be a temporary solution while webpack in craco-less is not updated.

Missing dependency

npm i craco-less gives the following errors:

npm ERR! Found: @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR! @craco/craco@"^6.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @craco/craco@"^5.5.0" from [email protected]
npm ERR! node_modules/craco-less
npm ERR! craco-less@"*" from the root project

Does anyone have a fix for this?

Getting error that craco-less needs to be updated

When I run my application I get the following error. I have tried updating my version of craco-less and making sure my REACT_APP_ENV variable is set correctly. Does the current version need to be updated?

yarn run v1.22.5
$ craco start
(node:27606) UnhandledPromiseRejectionWarning: Error: Found an unhandled loader in the local webpack config: /home/conrardy/src/jest-games/client/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.
Please check to see if there's already an issue in the DocSpring/craco-less repo:

   * https://github.com/DocSpring/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

    at throwUnexpectedConfigError (/home/conrardy/src/jest-games/client/node_modules/@craco/craco/lib/plugin-utils.js:29:11)
    at throwError (/home/conrardy/src/jest-games/client/node_modules/craco-less/lib/craco-less.js:14:5)
    at loaders.forEach.ruleOrLoader (/home/conrardy/src/jest-games/client/node_modules/craco-less/lib/craco-less.js:119:7)
    at Array.forEach (<anonymous>)
    at Object.overrideWebpackConfig (/home/conrardy/src/jest-games/client/node_modules/craco-less/lib/craco-less.js:51:11)
    at overrideWebpack (/home/conrardy/src/jest-games/client/node_modules/@craco/craco/lib/features/plugins.js:42:40)
    at cracoConfig.plugins.forEach.x (/home/conrardy/src/jest-games/client/node_modules/@craco/craco/lib/features/plugins.js:64:29)
    at Array.forEach (<anonymous>)
    at applyWebpackConfigPlugins (/home/conrardy/src/jest-games/client/node_modules/@craco/craco/lib/features/plugins.js:63:29)
    at mergeWebpackConfig (/home/conrardy/src/jest-games/client/node_modules/@craco/craco/lib/features/webpack/merge-webpack-config.js:110:30)
(node:27606) 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(). (rejection id: 1)
(node:27606) [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.
Done in 5.02s.

Enable CSS Module report an error

Hi, I tried to enable CSS module support for less, but when the project started, I encountered an error and couldn't continue:

./src/App.module.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-4!./src/App.module.less)
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }

Here is my config:

// Don't open the browser during development
process.env.BROWSER = "none";

module.exports = {
  plugins: [
    {
      plugin: require('craco-less'),
      options: {
        modifyLessRule: function (lessRule, _context) {
          lessRule.test = /\.(module)\.(less)$/;
          lessRule.exclude = /node_modules/;
          return lessRule;
        },
        cssLoaderOptions: {
          modules: true,
          localIdentName: "[local]_[hash:base64:8]"
        }
      }
    }
  ]
};

How can I solve this problem? Thank you!

Cannot upgrade react-scripts due to webpack dependency conflict

craco-less is fixed to a specific version of webpack. I've always had issues in the past when updating react-scripts to a newer version. The current one requires webpack 4.20.0 or higher.

Would it not make sense to let the developer decide on the webpack version?

Semantic UI support

Hello 👋

I am trying to build Semantic UI LESS distribution, but get the following error:

./src/semantic/semantic.less (./node_modules/css-loader??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-3!./src/semantic/semantic.less)

module.exports = __webpack_public_path__ + "static/media/theme.9cb07199.config";
             ^
Unrecognised input
      in /Users/olessavluk/work/semantic-ui-cra/src/semantic/theme.config (line 1, column 15)

However when I try to use "clean webpack", just with default less-loader configuration it works fine. Any idea why this might happen and how to fix it?

Repo to reproduce this issue - https://github.com/olessavluk/semantic-ui-cra

failed to add autoprefixer using postcss Loader Options

//craco.config.js
const CracoLessPlugin = require("craco-less");
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
        postcssLoaderOptions: {
          ident: "postcss",
          plugins: () => [require("autoprefixer")],
        },
      },
    },
  ],
}

//package.json
"autoprefixer": "8.6.5",
"react": "^16.13.1",
"craco-less": "^1.17.0",
"@craco/craco": "^5.6.4",

I want to add the compatibility prefix to my less file, but I wrote it like this, autopreFixer is not effective, I would like to ask, how can I change to make autopreFixer effective.Oh, and autopreFixer will compile incorrectly if the downloaded version is higher than 8.

Duplicated packages webpack, css-loader, style-loader

If I install craco-less (either with yarn or npm, then a duplicated version of webpack, css-loader, and style-loader is installed, since the craco-less depends on them but with a different version range than react-scripts.
(I am aware that this is somehow related to #3.)
While apparently it did not cause any bug, I wonder if this could not be a source of obscure bugs in the future.
Are those dependencies only needed to "silence" the warnings reported on StackOverflow? If this is the case, can you consider to drop them?

CRA 3.1.0 - webpack unknown rule

After upgrading CRA to 3.1.0, build stop with next exception:

g:\source\simpleui\src\node_modules@craco\craco\lib\plugin-utils.js:29
throw new Error(
^

Error: Found an unhandled loader in the development webpack config: g:\source\simpleui\src\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:

at throwUnexpectedConfigError (g:\source\simpleui\src\node_modules\@craco\craco\lib\plugin-utils.js:29:11)
at throwError (g:\source\simpleui\src\node_modules\craco-less\lib\craco-less.js:14:5)
at loaders.forEach.ruleOrLoader (g:\source\simpleui\src\node_modules\craco-less\lib\craco-less.js:112:7)
at Array.forEach (<anonymous>)
at Object.overrideWebpackConfig (g:\source\simpleui\src\node_modules\craco-less\lib\craco-less.js:52:11)
at overrideWebpack (g:\source\simpleui\src\node_modules\@craco\craco\lib\features\plugins.js:40:40)
at cracoConfig.plugins.forEach.x (g:\source\simpleui\src\node_modules\@craco\craco\lib\features\plugins.js:60:29)
at Array.forEach (<anonymous>)
at applyWebpackConfigPlugins (g:\source\simpleui\src\node_modules\@craco\craco\lib\features\plugins.js:59:29)
at overrideWebpack (g:\source\simpleui\src\node_modules\@craco\craco\lib\features\webpack.js:65:21)
at Object.<anonymous> (g:\source\simpleui\src\node_modules\@craco\craco\scripts\start.js:21:1)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787: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)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "start" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Omit error option

  let lessRule = createLessRule({
    baseRule: sassRule,
    overrideRule: {
      test: lessRegex,
      exclude: lessModuleRegex,
    },
  });

Sass options cannot be used by less (E.g prependData). Please omit it.

Update Less-Loader

Hey 👋

Could you please update less-loader to the latest version/ or less-loader@next?

It is needed to use this package with the latest version of Ant Design.
~~Also the maintainer of less-loader just changed, and it is on version 6.x now.~~

Recommendation for this vs. craco recipe for less-loader

Hi, which is the recommended way of adding less support to create-react-app? This repo looks like it serves the same purpose as this recipe/example in the main craco project: https://github.com/sharegate/craco/tree/00ae1a4364bfbe5b1ef7d5f5d89affc030c46c1f/recipes/use-less-loader .

Are there any trade-offs or different plans for these two approaches?

Relative URLs in imported less files vs resolve-url-loader

resolve-url-loader attempts to re-resolve urls in the output of less-loader according to the original .less file the url was in, even though less has already done that job. At least that's what I believe.

I think this must be a problem for other users of the life-saving craco-less?

Versions

react-scripts: 3.4.1
less-loader: 5.0.0
@craco/craco: 5.6.4
craco-less: 1.16.0

Example

This is what our files looks like (a little bit):

css/main.less:

@import "components/button";

css/components/button.less

.button {
    background-image: url("../img/button.svg");
}

And then there's img/button.svg containing an SVG.

Then when build with npx craco build we get this error:

ModuleNotFoundError: Module not found: Error: Can't resolve './img/button.svg' in '/blah/blah/css'

Resolution

I have been able to fix this by disabling the resolve-url-loader using this in my craco.config.js:

	plugins: [{
		plugin: CracoLessPlugin,
		options: {
			lessLoaderOptions: {
				strictMath: true,
				noIeCompat: true,
				relativeUrls: false,
			},
			resolveUrlLoaderOptions: {
				// eslint-disable-next-line @typescript-eslint/no-unused-vars
				join: (filename, options) => (uri, base) => {
					return path.normalize(path.resolve(path.dirname(filename), uri))
				},
			},
		},
	}],

Maybe this will work for other people!

Is this a broader issue with craco-less that should be incorporated into craco-less?

CRA 3.2.0 - webpack unknown rule

After upgrading CRA to 3.2.0, build stop with next exception:

***/node_modules/@craco/craco/lib/plugin-utils.js:29
throw new Error(
^

Error: Found an unhandled loader in the development webpack config: /Users/petrheralecky/projects/cmg/ecm_client_web/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:

Support for react-scripts ^3.0.0 (webpack 4.29.6)

I want to use less and less module at the same time. How can I configure it

How can I change `.module.less` to `.m.less`?

As title?

Support for react-scripts 3.4.0 (webpack 4.41.5)

The latest npm release of craco-less (1.15.0) is not compatible with the current version of CRA (3.4.0)

react-script now requires webpack 4.41.5

Find loaders path-separator agnostically

NOTE

I've significantly edited the original issue description since it did not accurately describe the actual issue I ran into.

Craco-less attempts to find Webpack CSS loaders using OS-platform dependent path separator logic. This was not working when I attempted to use craco-less.

Why use platform-dependent path separator logic to identify CSS loaders when we're only interested in finding the CSS loader? If the CSS loader searching logic could be made using platform-independent path separator logic, then it should work seamlessly across platforms.

The existing logic is not working:

if (
  (context.env === 'development' || context.env === 'test') &&
  rule.loader.includes(`${pathSep}style-loader${pathSep}`)
) {
  // Do stuff
}

Replacing the existing logic with platform-independent logic such as the below, resulted in craco-less finding the Webpack CSS loaders:

if (
  (context.env === 'development' || context.env === 'test') &&
  RegExp(/[\\/]style-loader[\\/]/).test(rule.loader)
) {
  // Do some stuff
}

Using the logic above, the CSS loaders are always found.

I'll try to submit a pull request for this. Also, could I ask that my PR be back-ported to v1.20? I am unable to update to react-scripts@^5.0.0 and webpack@^5.0.0 right now due to CRACO v6.x not officially supporting those versions of the packages.

CRA 3.3.0 - webpack unknown rule

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!

why can't I use style loader in production env?

    if ( 
      (context.env === "development" || context.env === "test") &&
      rule.loader.includes(`${pathSep}style-loader${pathSep}`)
    ) {
      lessRule.use.push({
        loader: rule.loader,
        options: {
          ...rule.options,
          ...(pluginOptions.styleLoaderOptions || {})
        }
      });

if context.env equals production, and i have a style loader in list, then an error occurs, it's not expected

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

Hey,

I get a upgrade craco-less error but even though I updgrade it doesn't change anything. It is weird because it was working yesterday and I have not made any major changes since yesterday it just started throwing this error.

I'm using latest version of craco and craco-less:

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

Thanks

(node:11523) UnhandledPromiseRejectionWarning: Error: Found an unhandled loader in the developement webpack config: node_modules/style-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

    at throwUnexpectedConfigError (.../node_modules/@craco/craco/lib/plugin-utils.js:29:11)
    at throwError (.../node_modules/craco-less/lib/craco-less.js:14:5)
    at .../node_modules/craco-less/lib/craco-less.js:119:7
    at Array.forEach (<anonymous>)
    at Object.overrideWebpackConfig (.../node_modules/craco-less/lib/craco-less.js:51:11)
    at overrideWebpack (.../node_modules/@craco/craco/lib/features/plugins.js:42:40)
    at .../node_modules/@craco/craco/lib/features/plugins.js:64:29
    at Array.forEach (<anonymous>)
    at applyWebpackConfigPlugins (.../node_modules/@craco/craco/lib/features/plugins.js:63:29)
    at mergeWebpackConfig (.../node_modules/@craco/craco/lib/features/webpack/merge-webpack-config.js:67:30)
(node:11523) 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)
(node:11523) [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.

craco-less install different version of webpack when "npm install"

When create a new app by steps:

1.  create-react-app demo
2.  npm install @craco/craco craco-less
3.  npm start

It goes fine, the app runs.
Then I push this to git or delete node_modules and package-lock.json, then run:

1. npm install
2. npm start

Then this error occurs:

Is this a bug of npm? This error appears only when I use npm install, but ok when use yarn install.

Support for react-scripts 3.3.0 (webpack 4.41.2)

Hello!

react-scripts released 3.3.0 version. It now depends on webpack: 4.41.2. Please, update your dependencies to be able to update react-scripts.

module.less not work

I want to use module.less in my app, but it doesn't work, the style was not applied. please help, this is my craco.config.js file:
craco-less version: 1.17.1

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#004DE5' },
            javascriptEnabled: true,
          },
        },
        modifyLessRule: function(lessRule, _context) {
          lessRule.test = /\.(module)\.(less)$/;
          lessRule.exclude = /node_modules/;

          return lessRule;
        },
        cssLoaderOptions: {
          modules: { localIdentName: "[local]_[hash:base64:5]" }
        }
      }
    },
  ],
};

and this is my tsx and style file, they were in the same dir.
AppHeader.tsx
import './AppHeader.module.less'; // import style file

AppHeader.module.less

.site_layout_header {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 8px;
  justify-content: space-between;
  background-color: @primary-color;
}

.site_logo {
  height: 58px;
  margin-left: 0;
  cursor: pointer;
  object-fit: contain;
}

.site_info {
  display: flex;
  align-items: center;
}

.site_user {
  margin-left: 8px;
  color: white;
}

.logout_button {
  margin-left: 8px;
  color: #FFF;
  padding: 0 20px;
  border: 1px solid #16D0FF;
  border-radius: 15px;
  font-size: 12px;
}

Error evaluating function `unit`: the first argument to unit must be a number

Hi 👋 , we use semantic-ui-react in our application and one of the dependency is @semantic-ui-react/craco-less and I am getting this error after the latest 1.18.0 release.

./node_modules/semantic-ui-less/semantic.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-9-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-9-3!./node_modules/semantic-ui-less/semantic.less)

@relativeLarge   : unit( round(@largeSize * @emSize) / @emSize, em);
@relativeBig     : unit( round(@bigSize * @emSize) / @emSize, em);
                 ^
Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis?
      Error in .. /node_modules/semantic-ui-less/themes/default/globals/site.variables (line 408, column 19)

This error got solved by pinning the version 1.17.1 like this, thanks to @mvidalgarcia

...
"resolutions": {
    "@semantic-ui-react/craco-less/craco-less": "1.17.1"
   }
...

I am not sure what's the root cause of the error, maybe something wrong on semantic side(I posted similar Semantic-Org/Semantic-UI-LESS#74 there). Just posting here in case if it's a bug or new requirement of unit function.

react-scripts upgraded, craco-less got an error

Cannot upgrade react-scripts to 3.1.2 due to webpack dependency

Upgrade react-scripts to 3.1.2 cause the following tree:

├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] 
└─┬ [email protected]
  └── [email protected]

As the result, the ./node_modules/webpack is 4.39.1. This cause react-scripts to report an error ("prefligh check").

Is it possible to realize automatic recognition of css modules

// css modules
import styles from "./index.less";

// Non-css modules
import "./index.less"

Can't find 'file-loader' issue with react-scripts 5.0.0

react-scripts version 5.0.0
@craco/craco version 6.4.3
craco-less version 1.20.0

/foobar/my-app/node_modules/@craco/craco/lib/plugin-utils.js:29
    throw new Error(
          ^

Error: Can't find file-loader in the development webpack config!

Error: Found an unhandled loader

Hi，
I am using craco-antd to customize antd theme, while I have modified sass-loader options with sass-resouces-loader.

Then I got Error: Found an unhandled loader in the development webpack config: sass-resources-loader
I checked the source code, you throw an error when loader not match at

craco-less/lib/craco-less.js

Line 119 in 586ca79

throwError(

I wonder why have do this，is it any better to ignore irrelavant loaders?

when i use craco-less and craco-sass-resources-loader together, it reported wrong

(node:12308) UnhandledPromiseRejectionWarning: Error: Found an unhandled loader in the development webpack config: sass-resources-loader

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 DocSpring/craco-less repo:

https://github.com/DocSpring/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:

Does it not work with custom value for NODE_ENV?

My NODE_ENV is set to custom. I'm trying to set up ant design in a CRA project. I'm following the guide here, https://ant.design/docs/react/use-with-create-react-app. I created a craco.config.js file like the following,

const CracoLessPlugin = require('craco-less');

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

But upon npm start (craco start), I am greeted with the following error,

(node:16620) UnhandledPromiseRejectionWarning: Error: Found an unhandled loader in the custom webpack config: E:\project\node_modules\style-loader\dist\cjs.js

I looked at the source and it seems to be checking the environment variable,

if (
      (context.env === "development" || context.env === "test") &&
      rule.loader.includes(`${pathSep}style-loader${pathSep}`)
    ) {
      lessRule.use.push({
        loader: rule.loader,
        options: {
          ...rule.options,
          ...(pluginOptions.styleLoaderOptions || {}),
        },
      });
    }

After I set my NODE_ENV to development this error is gone.

I am not exactly sure what caused the issue. So my question is does craco-less not support setting a custom value to NODE_ENV?

Style-loader fails when context.env === test

craco-less/lib/craco-less.js

Line 64 in 2e6aea9

context.env === "development" &&

I am trying to boot up my create-react-app with craco in a testing environment (puppeteer). It fails because the context environment is test instead of development, and style-loader cannot be used.

node_modules\@craco\craco\lib\plugin-utils.js:29
    throw new Error(
    ^

Error: Found an unhandled loader in the test webpack config: node_modules\style-loader\index.js

at throwUnexpectedConfigError (node_modules\@craco\craco\lib\plugin-utils.js:29:11)
    at throwError (node_modules\craco-less\lib\craco-less.js:14:5)
    at loaders.forEach.ruleOrLoader (node_modules\craco-less\lib\craco-less.js:113:7)
    at Array.forEach (<anonymous>)
    at Object.overrideWebpackConfig (node_modules\craco-less\lib\craco-less.js:53:11)
    at Object.overrideWebpackConfig (node_modules\craco-antd\lib\craco-antd.js:63:26)

Can't install with craco@6

Hi. I'm trying to install craco-less with craco@6 and react-scripts@4, but have an error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"^6.1.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @craco/craco@"^5.5.0" from [email protected]
npm ERR! node_modules/craco-less
npm ERR!   craco-less@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

style-resources-loader

yarn add style-resources-loader -D

// craco.config.js
const path = require('path')
const CracoLessPlugin = require('craco-less')
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        modifyLessRule: (lessRule, context) => {
          if (Array.isArray(lessRule.use) && lessRule.use.every(({ loader }) => loader !== 'style-resources-loader')) {
            lessRule.use.push({
              loader: 'style-resources-loader',
              options: {
                patterns: [
                  path.resolve(__dirname, 'src/assets/less/vars.less'),
                  path.resolve(__dirname, 'src/assets/less/mixins.less'),
                  path.resolve(__dirname, 'src/assets/less/common.less'),
                ],
                injector: 'append'
              }
            })
          }
          return lessRule
        }
      },
    },
  ],
}

Class constructor FileManager cannot be invoked without 'new'

Faced with this issue on Semantic UI theming

If I'm not wrong need to fix less dependencies regard to:
less/less.js#3414

Enable CSS Modules

Is it hard to enable CSS Modules? if you point out where to do it.. i can build a PR for you.

I don't need CSS modules When in the node_modules

I don't need CSS modules When in the node_modules, so I need two lessRules.

{
      test: /\.less$/,
      exclude: /node_modules/,
      use: [{
        loader: "style-loader"
	options: {......}
      }, {
        loader: "css-loader",
        options: {
          modules: true,
	  ......
        }
      }, {
        loader: "less-loader",
	options: {......}
      }]
    },
----------------------------------------------
    {
      test: /\.less$/,
      include: /node_modules/,
      use: [{
        loader: "style-loader"
	options: {......}
      }, {
        loader: "css-loader",
	options: {......}
      }, {
        loader: "less-loader",
        options: {......}
        }
      }]
    },

but I don't know what to do it with craco-less

postcss invalid

          plugins: [
            {
                 plugin: CracoLessPlugin,
                  options: {
                        cssLoaderOptions: {
                        modules: true,
                        url: true,
                    }     ,

            postcssLoaderOptions: {
                ident:'postcss',
                plugins: () => [
                    require("postcss-import")(),
                    require("postcss-cssnext")({
                        browsers: [
                            'last 2 Chrome versions',
                            'last 2 Edge versions',
                            'last 2 Safari versions',
                            'last 2 Firefox versions',
                        ],
                    }),
                ]
            },

            lessLoaderOptions: {
                modifyVars: {"@primary-color": "#1DA57A"},
                javascriptEnabled: true
            },
        }
    }
],

error:

./src/pages/Home/Contents/Content.less (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/react-scripts/node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-8-3!./node_modules/craco-less/node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-4!./src/pages/Home/Contents/Content.less)

    color: #fff;
    border-bottom: 2px solid color(#00d995 blackness(40%));
                           ^

Error evaluating function color: keyword.toLowerCase is not a function

craco-less 2.0.0 requires react-scripts 5 but that's incompatible with craco 6.4.3

I can't seem to find versions of react-scripts and craco that are compatible with both craco-less 2.0.0 and each other.

craco 6.4.3 requires react-scripts 4 but then I get this error saying craco-less needs react-scripts 5:

npm ERR! Found: [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"4.0.3" from the root project
npm ERR!   peer react-scripts@"^4.0.0" from @craco/[email protected]
npm ERR!   node_modules/@craco/craco
npm ERR!     @craco/craco@"6.4.0" from the root project
npm ERR!     peer @craco/craco@"^6.0.0" from [email protected]
npm ERR!     node_modules/craco-less
npm ERR!       craco-less@"2.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^5.0.0" from [email protected]
npm ERR! node_modules/craco-less
npm ERR!   craco-less@"2.0.0" from the root project

If instead I install the craco 7 alpha and react-scripts 5, craco-less doesn't like the craco version:

npm ERR! Found: @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"^7.0.0-alpha.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @craco/craco@"^6.0.0" from [email protected]
npm ERR! node_modules/craco-less
npm ERR!   craco-less@"2.0.0" from the root project

What's the right answer here?

Modify Less module rule for all files in a directory

I am using antd as a UI toolkit. I want to implement style modules in my project. I tried like this

   `modifyLessRule(lessRule, context) {
      // You have to exclude these file suffixes first,
      // if you want to modify the less module's suffix
      // const relativePath = path.relative(context, resourcePath);
      console.log(context)
      lessRule.exclude = /\.less$/;
      return lessRule;

      
    },
    modifyLessModuleRule(lessModuleRule, context) {
      // Configure the file suffix
      lessModuleRule.test = /\.less$/;

      // Configure the generated local ident name.
      const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));
      cssLoader.options.modules = {
        localIdentName: "[local]_[hash:base64:5]",
      };

      return lessModuleRule;
    },`

But it applied to all less files including antd library. I want to apply only for styles inside the src folder. I know we can do by renaming all style files inside the src folder with some suffix (index.m.less) and change the regex.

I want to keep my style file as formatted now (index.less). Is there any option to apply modify rule only for my src folder?

craco: * Cannot find ESLint loader (eslint-loader). *

npm start

[email protected] start G:\blog-react\blog-app
craco start

craco: *** Cannot find ESLint loader (eslint-loader). ***
(node:1212) UnhandledPromiseRejectionWarning: Error: Found an unhandled loader in the development webpack config: G:\blog-react\blog-app\node_modules_style-loader@1.3.0@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

Deploy on Heroku crashing

Hi @ndbroadbent, i'm just facing an issue deploying on Heroku that crash the application.
I'm using this configuaration:

"@craco/craco": "^3.6.0",
"antd": "^3.15.1",
"craco-antd": "^1.10.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"engines": {
    "node": "11.12.0"
  }

and I'm getting this error in heroku logs:

 > craco start
/app/node_modules/@craco/craco/lib/plugin-utils.js:29
throw new Error(
     ^
Error: Found an unhandled loader in the production webpack config: /app/node_modules/style-loader/index.js

I tried to update craco-less but didn't work :(

docspring / craco-less Goto Github PK

craco-less's People

Contributors

Stargazers

Watchers

Forkers

craco-less's Issues

Versions

Example

Resolution

Recommend Projects

Recommend Topics

Recommend Org