docspring / craco-less Goto Github PK
View Code? Open in Web Editor NEWA Less plugin for craco / react-scripts / create-react-app
License: MIT License
A Less plugin for craco / react-scripts / create-react-app
License: MIT License
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
For CSS and SASS in create-react-app
npm start
), the css is bundled with the js
files.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.
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.
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
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
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.
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?
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.
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!
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?
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
//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.
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?
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:
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.
let lessRule = createLessRule({
baseRule: sassRule,
overrideRule: {
test: lessRegex,
exclude: lessModuleRegex,
},
});
Sass options cannot be used by less (E.g prependData
). Please omit it.
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.
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?
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
?
react-scripts: 3.4.1
less-loader: 5.0.0
@craco/craco: 5.6.4
craco-less: 1.16.0
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'
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
?
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:
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:
I want to use less and less module at the same time. How can I configure it
As title?
The latest npm release of craco-less (1.15.0) is not compatible with the current version of CRA (3.4.0)
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.
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!
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
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.
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
Is this a bug of npm? This error appears only when I use npm install
, but ok when use yarn install
.
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
.
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;
}
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.
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").
// css modules
import styles from "./index.less";
// Non-css modules
import "./index.less"
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!
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
Line 119 in 586ca79
I wonder why have do this,is it any better to ignore irrelavant loaders?
(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:
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:
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
?
Line 64 in 2e6aea9
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)
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.
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
}
},
},
],
}
Faced with this issue on Semantic UI theming
If I'm not wrong need to fix less
dependencies regard to:
less/less.js#3414
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, 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
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
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?
Hi
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?
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
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 :(
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.