Comments (13)
craco-less
version 1.18.0 now depends on "less": "^4.1.1"
instead of 3.x
. According to lesscss some math options changed by default, e.g., "in order to cause fewer conflicts with CSS, which now liberally uses the / symbol between values, there is now a math mode that only requires parentheses for division. (This is now the default in Less 4.)".
To keep semantic-ui-less
running again, the math option has to be changed back to always
, e.g., for webpack:
"loader": "less-loader",
"options": {
"lessOptions": {
"math": "always"
}
}
or using @semantic-ui-react/craco-less
:
plugin: require("@semantic-ui-react/craco-less"),
options: {
lessLoaderOptions: {
lessOptions: {
math: "always"
}
}
}
from semantic-ui-less.
@joshua-phillips I have the craco-less
in the dependencies and yes, the latest version seems to cause the error. I will post the error there as well.
Here's how we managed to pin the craco-less
in package.json, thanks to @mvidalgarcia for the fix.
...
"resolutions": {
"@semantic-ui-react/craco-less/craco-less": "1.17.1"
}
...
Hope it helps you as well. :)
from semantic-ui-less.
I confirm what @kenomo mentioned. My craco.config.js
looks like this:
module.exports = {
plugins: [
{
plugin: require("@semantic-ui-react/craco-less"),
options: { lessLoaderOptions: { lessOptions: { math: "always" } } },
}
],
};
This solves the problem as a workaround, however, I guess this should be changed at @semantic-ui-react/craco-less
plugin level, namely here? Otherwise all the less files among the different themes coming from Semantic-UI-LESS will face the same kind of issues?
I think something like this in semantic-ui-tools should work:
diff --git a/packages/craco-less/src/index.js b/packages/craco-less/src/index.js
index ebafeb0..dfbffb8 100644
--- a/packages/craco-less/src/index.js
+++ b/packages/craco-less/src/index.js
@@ -8,7 +8,7 @@ const CracoLessPlugin = require("craco-less");
const path = require("path");
const overrideWebpackConfig = ({ context, pluginOptions, webpackConfig }) => {
- pluginOptions = pluginOptions || {};
+ pluginOptions = {lessLoaderOptions: { lessOptions: { math: 'always' } }, ...pluginOptions};
// add alias to theme.config
webpackConfig.resolve.alias["../../theme.config$"] = path.join(
@layershifter I can create a PR if needed, let me know.
from semantic-ui-less.
@Alexa-Green we found that same thing unfortunately that the npm-force-resolutions module was not working and we ended up switching to using yarn. Although I'm curious why with that module it's not working with npm so I'll probably play around with it some more later. If I figure anything out, I'll post back here
from semantic-ui-less.
Fixed by layershifter/semantic-ui-tools#16. Thanks to @mvidalgarcia
from semantic-ui-less.
Started getting the exact same error today. Was working yesterday. Running the same CI/CD pipeline job on the exact same commit went from working to failing.
Using module version 2.4.1
from semantic-ui-less.
@ParthS007 do you have the craco-less
module in your dependencies? I noticed that there was a new version (1.18.0) released today and that seems to coincide with the start of this error for us. Since this is a dependency of module @semantic-ui-react/craco-less
I don't have direct control over the version of craco-less
being installed, and I'm not having any luck with npm honoring my package-lock.json change to force craco-less
to version 1.17.1 that being used before this error started.
from semantic-ui-less.
Thanks, @ParthS007 ! I was able to verify that resolved my build failure as well. It looks like npm does not support the resolutions
object in package.json, but there is a node module that adds support when using npm. I haven't tested it yet though, but just thought I'd mention it here in case anyone else comes across this issue and they're using npm instead of yarn.
https://www.npmjs.com/package/npm-force-resolutions
from semantic-ui-less.
Thanks for the resolution
fix @ParthS007 and @joshua-phillips ! Still getting the same error when using npm and the npm-force-resolutions with that resolutions path. Have tried deleting node_modules and running a fresh install, as well as changing the preinstall script to npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions
-- any ideas?
from semantic-ui-less.
@joshua-phillips Switched to yarn as well after some digging into npm-force-resolutions with no results-- yarn (/resolutions support) helped with some other issues that were going on too so it all works in the meantime! Curious to hear if you discover anything
from semantic-ui-less.
@layershifter I can create a PR if needed, let me know.
Yes, please 🙏
from semantic-ui-less.
Confirmed that updating to @semantic-ui-react/[email protected] has gotten rid of this error with no need to update craco.config.js
or add a resolution to package.json
-- thank you @mvidalgarcia !
from semantic-ui-less.
Awesome! Thanks, everyone :)
from semantic-ui-less.
Related Issues (20)
- Does this include icons?
- Recursive variable definition with less 3.x HOT 7
- Request: please add 'css' Less 'Import Option' to font imports HOT 5
- Failed to compile
- Use @brandFontName for brand icon's font-family CSS rule
- Way to suppress colors completly ? HOT 1
- Certain calc fields not generated correctly HOT 2
- Incorrect fontPath in default theme HOT 1
- site.variables not available after importing semantic.less
- Provide Readme
- Can't resolve '../../theme.config' HOT 2
- Provide easy way to generate your own colors HOT 1
- No way to have multiple themes when working with Webpack. HOT 5
- Cannot create property '_index' on string '!important': after upgrading [email protected] to @3.10.x HOT 3
- ModuleNotFoundError HOT 1
- Bug? The list item of nested list are invisibility. HOT 1
- How to remove unused components HOT 2
- Can't resolve theme.less when configuring sematic-react-ui HOT 1
- Confused UI Labeled input HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from semantic-ui-less.