Semantic-UI-React: CreateReactApp: Module not found on build

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 25 (8 by maintainers)

Most upvoted comments

`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!

victortrusov on Aug 29, 2019

Investigated a bit, it’s caused by react-scripts@3.1.0 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.

layershifter on Aug 27, 2019

@rickysullivan released in @semantic-ui-react/craco-less@1.2.1 👍

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 😺

layershifter on Dec 12, 2019

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 on Oct 10, 2019