Semantic-ui-react: CreateReactApp: Module not found on build

[fuwywawyuh]

Hey,

This

./node_modules/semantic-ui-less/semantic.less
ModuleNotFoundError: Module not found: Error: Can't resolve './definitions/elements/themes/default/assets/images/flags.png' in 'C:\Users\user_\portfolio-app\node_modules\semantic-ui-less'

has been happening to me in my create-react-app and I couldn't figure out what to do. I've started a new project, from scratch and this happened again so I believe I could either be missing a step, or there's a bug?

I've create a react app from scratch, installed semantic-ui-react, installed semantic-ui-less with craco and updated the package.json file. I've also included craco.config (should this be in /src?).
I've also installed semantic-ui-react/bootstrap package and updated the bottom of the theme.config file with the 4 lines, exactly as they are (should I be changing any values?)
I'm importing "import 'semantic-ui-less/semantic.less'" at the end of my index.js.

Did I miss anything?

Thanks

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

I've also installed semantic-ui-react/bootstrap package

You don't need to install this package, only run:

npx @semantic-ui-react/bootstrap

---

It's hard to understand what is missing, can you push your project to GitHub?

[fuwywawyuh]

I've also installed semantic-ui-react/bootstrap package

You don't need to install this package, only run:

npx @semantic-ui-react/bootstrap

It's hard to understand what is missing, can you push your project to GitHub?

My apologies, that's what I meant by installing the package.
I found the issue is something to do with my theming. if I remove semantic.less import and replace it with semantic-ui-css then everything is fine. So I'm missing something in that process.

[layershifter]

IDK, please push the code to repo...

[fuwywawyuh]

I'll try and do that tonight.

In the meantime, is there a benefit to using theming over css for a one-off project?

Thanks

---

From: Oleksandr Fediashov [e-mail]
Sent: Tuesday, 27 August 2019 08:39
To: Semantic-Org/Semantic-UI-React
Cc: fuwywawyuh; Author
Subject: Re: [Semantic-Org/Semantic-UI-React] Module not found on build (#3761)

IDK, please push the code to repo...

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[victortrusov]

Had same error on npm run build after updating packages:

"react-scripts": "^3.0.1" --> "^3.1.1"
"@craco/craco": "^5.2.4" --> "^5.3.0"
"craco-less": "^1.9.0" --> "^1.12.0"
"less": "^3.9.0" --> "^3.10.3"

fallback to previous versions solved the problem

[Volland]

I have the same issue. looks like 3.1.1 react-scripts do some breaking changes

[Volland]

"@craco/craco": "^5.3.0",
"craco-less": "^1.12.0",
"react-scripts": "3.1.1",

I do not have direct link to a less package

[layershifter]

Investigated a bit, it's caused by [email protected] and by this change: https://github.com/facebook/create-react-app/pull/5829. And now it's clear why it fails only on build 😛

Will try to provide a proper fix tomorrow.

[fuwywawyuh]

Investigated a bit, it's caused by [email protected] and by this change: facebook/create-react-app#5829. And now it's clear why it fails only on build 😛

Will try to provide a proper fix tomorrow.

Glad to know, I thought I was going insane. Sorry I couldn't provide a build earlier.

Downgrading packages seems to work at the moment though if anyone else runs into this.

Thanks

[layershifter]

craco.config.js

-const { getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco')
+const { removeLoaders, getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco')

  overrideWebpackConfig: ({ context, webpackConfig }) => {
+   removeLoaders(webpackConfig, loaderByName("resolve-url-loader"))

@fuwywawyuh @Volland
Can someone try this and confirm that it works with [email protected] properly?

---

BTW, I am going to publish our plugin to simplify craco.config.js.

[fuwywawyuh]

craco.config.js

-const { getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco')
+const { removeLoaders, getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco')

  overrideWebpackConfig: ({ context, webpackConfig }) => {
+   removeLoaders(webpackConfig, loaderByName("resolve-url-loader"))

@fuwywawyuh @Volland
Can someone try this and confirm that it works with [email protected] properly?

BTW, I am going to publish our plugin to simplify craco.config.js.

I have since downgraded my main project.

I have ran this into a project I was testing stuff out (which has practically 0 components etc, but has the same packages and had the error) and the build now runs successfully.

[victortrusov]

craco.config.js

-const { getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco')
+const { removeLoaders, getLoader, loaderByName, throwUnexpectedConfigError } = require('@craco/craco')

  overrideWebpackConfig: ({ context, webpackConfig }) => {
+   removeLoaders(webpackConfig, loaderByName("resolve-url-loader"))

Just updated react-scripts to 3.1.1 and tested your solution. Working perfect! Thanks!

[layershifter]

@victortrusov thank you for confirmation 👍

I introduced @semantic-ui-react/craco-less plugin, now craco.config is one liner 🚀 I will continue to improve setup process to simplify it even more.

craco.config.js

module.exports = {
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}

[rickysullivan]

I'm using a LESS mixin that is throwing a warning Inline JavaScript is not enabled. Is it set in your options?

Needs to allow options to be passed down to craco-less.

module.exports = {
  plugins: [
    {
      plugin: require("@semantic-ui-react/craco-less"),
      options: {
        lessLoaderOptions: {
          javascriptEnabled: true
        }
      }
    }
  ]
};

[rickysullivan]

https://gist.github.com/rickysullivan/e4b75f9a1f2ef77ba0ac733f9bb7395d

Passes pluginOptions down.

What do you think @layershifter?

[scorsi]

Hello @layershifter,

I had an old code base using old semantic-ui-react setup with webpack which now have a lot of vulnerabilities. I so changed everything to use CRA + CRACO + @semantic-ui-react/craco-less (without ejecting configurations).
I was looking for the repository of @semantic-ui-react/craco-less for posting the issue without success. Hope, this is the right place.

I need to use the CSS Modules (to avoid too much codebase changes), I so do in the craco.config.js file :

module.exports = {
  plugins: [{
    plugin: require('@semantic-ui-react/craco-less'),
    options: {
      cssLoaderOptions: {
        modules: true,
        localIdentName: '[local]_[hash:base64:5]',
      },
    },
  }],
};

But still got a weird issue.
If I use import * as styles from ... or import styles from ..., I got undefined values.
If I rename my style files to my-file-name.module.less (as hinted here : https://create-react-app.dev/docs/adding-a-css-modules-stylesheet), I got an error where the webpack loader seems to not recognized the file type : Module parse failed: Unexpected token (1:0). You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Do you have any clue ?

[layershifter]

You can temporary use craco-less for CSS modules: https://www.npmjs.com/package/craco-less#css-modules

It should work, can you please check?

[scorsi]

I already tried that but got a weird issue with semantic-ui-less files.

@import (multiple) '../../theme.config';
^
Can't resolve '../../theme.config' in '/somewhere/node_modules/semantic-ui-less/definitions/modules'
      in /somewhere/node_modules/semantic-ui-less/definitions/modules/transition.less (line 19, column 0)

Which is fixed by @semantic-ui-react/craco-less, right ?

[rickysullivan]

@layershifter Why not just allow pluginOptions to be passed down? See my gist.

[rickysullivan]

@layershifter thoughts?

[layershifter]

@rickysullivan I will do a change with pluginOptions on next week :rocket:

[rickysullivan]

@layershifter legend!

[layershifter]

@rickysullivan released in @semantic-ui-react/[email protected] 👍

I also created README.md files and added proper links to package.json files, so now it's clear where the source can be find 😺