Support for craco 6.x in @semantic-ui-react/craco-less

[natanlao]

Not sure if this is the right place to open this (or if this is actually a bug and not a feature request), but issues are closed on layershifter/semantic-ui-tools so I'm going to open it here.

Feature Request

Update craco dependencies in craco-less to 6.x. Currently pinned to 5.x in craco-less 1.2.3

Problem description

When I try to use craco 6.x in my project with craco-less, I see the following error on npm install:

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!   dev @craco/craco@"^6.3.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @craco/craco@"^5.3.0" from @semantic-ui-react/[email protected]
npm ERR! node_modules/@semantic-ui-react/craco-less
npm ERR!   dev @semantic-ui-react/craco-less@"^1.2.3" 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.

Proposed solution

Upgrade craco dependencies in https://github.com/layershifter/semantic-ui-tools/blob/master/packages/craco-less/package.json

[layershifter]

Well, it would be awesome :)

[vinihvc]

Waiting for it

[layershifter]

@semantic-ui-react/craco-less@2 with support of Craco 6 is published.
I tested in on a small project and it works.

Please be aware that #4227 is still an issue, you need to fix node_modules/semantic-ui-less/themes/default/elements/step.overrides and remove there double ;;:

-url(data:application/x-font-ttf;charset=utf-8;;base64
+url(data:application/x-font-ttf;charset=utf-8;base64

[natanlao]

Thank you!

[gdelacruzfdez]

Hello! The package that is published in npm for @semantic-ui-react/craco-less@2 does not work for me. I get the following error:

Error: Cannot find module '@semantic-ui-react/craco-less'

Previous version worked fine. I've seen that version 2.0.0 includes the whole repo, while previous 1.2.3 only included the compiled files.

Version 2.0.0:

Version 1.2.3:

[layershifter]

@natanlao see #4320 (comment)

I just released @semantic-ui-react/[email protected], it works as expected.
Sorry for a broken release 🙃

Didn't release packages there for ages, they have a bit different publish.

[natanlao]

Thanks! Did you mean to tag @gdelacruzfdez?

[gdelacruzfdez]

Yes, I had received the notification. Thank you very much for the fix!

[layershifter]

Thanks! Did you mean to tag @gdelacruzfdez?

I need more coffee ☕️ Sorry 😊

[layershifter]

Please be aware that #4227 is still an issue, you need to fix node_modules/semantic-ui-less/themes/default/elements/step.overrides and remove there double ;;:

#4287 (comment)

[adenbley]

Sorry if this is in ignorance (i'm not a package dependency pro) but it appears that there is a dependency issue when I try to install craco-less 2.0.2.

craco-less 2.0.2 requires react-scripts 5 and craco 6 (so currently 6.4.3). craco only currently supports react-scripts 4.

I am just trying to follow the very simple and short themeing tutorial for semantic-ui-react.

[layershifter]

Sorry if this is in ignorance (i'm not a package dependency pro) but it appears that there is a dependency issue when I try to install craco-less 2.0.2.

craco-less 2.0.2 requires react-scripts 5 and craco 6 (so currently 6.4.3). craco only currently supports react-scripts 4.

I am just trying to follow the very simple and short themeing tutorial for semantic-ui-react.

Do you have any issues with that setup? I guess something like that with NPM?

I will relax peerDependencies tomorrow to allow react-scripts@4.

P.S. npm i --legacy-peer-deps should still work.

[adenbley]

npm i --legacy-peer-deps should still work.

Thank you, That allowed it to install.

Yes, my error was very similar to what you posted. FYI the craco people are working on upgrading to RS5, and they are really tired of people asking :) so it should be a temporary need.

[adenbley]

Error (with build or start). It sounds like I should just wait a while before attempting to do this.

Error: Can't find a 'asset/resource' loader under module.rules in the development webpack config!

This error probably occurred because you updated react-scripts or craco. Please try updating @semantic-ui-react/craco-less to the latest version:

   $ yarn upgrade @semantic-ui-react/craco-less

Or:

   $ npm update @semantic-ui-react/craco-less

If that doesn't work, @semantic-ui-react/craco-less needs to be fixed to support the latest version.

   * https://www.npmjs.com/package/@semantic-ui-react/craco-less

[layershifter]

This looks you're on react-scripts@4

I will check and test it more in detail. I was sure that Craco 6 supports CRA 5 and applied rules to it 🙃

Will double verify and check it again.

[layershifter]

Okay, sorry for confusion. I released @semantic-ui-react/[email protected] with compat to craco@6. Compat table is below:

CRA v3

{
  "react-scripts": "3.4.4",
  "@craco/craco": "5.9.0",
  "@semantic-ui-react/craco-less": "1.2.3"
}

• ✅ npm install is passing
• ✅ SKIP_PREFLIGHT_CHECK=true npm start is passing (complains about Webpack version)

CRA v4

{
  "react-scripts": "4.0.3",
  "@craco/craco": "6.4.3",
  "@semantic-ui-react/craco-less": "1.2.6"
}

• ✅ npm install is passing
• ✅ npm start is passing

CRA v5

{
  "react-scripts": "5.0.0",
  "@craco/craco": "6.4.3",
  "@semantic-ui-react/craco-less": "2.0.2"
}

• ✅ npm install --force is passing (as craco@6 does not allow react-scripts@5 in peerDependencies)
• ✅ npm start is passing

---

Please let me know if there are other difficulties.