CreateReactApp: Module not found on build #3761

fuwywawyuh · 2019-08-26T19:17:34Z

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

The text was updated successfully, but these errors were encountered:

welcome · 2019-08-26T19:17:36Z

👋 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 · 2019-08-27T06:44:01Z

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 · 2019-08-27T07:35:14Z

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 · 2019-08-27T07:39:29Z

IDK, please push the code to repo...

fuwywawyuh · 2019-08-27T07:50:40Z

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 <notifications@github.com> 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 · 2019-08-27T09:06:43Z

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 · 2019-08-27T11:52:19Z

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

Volland · 2019-08-27T11:56:08Z

"@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 · 2019-08-27T19:45:41Z

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

fuwywawyuh · 2019-08-27T20:14:47Z

Investigated a bit, it's caused by react-scripts@3.1.0 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 · 2019-08-28T16:03:52Z

`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 react-scripts@3.1.1 properly?

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

fuwywawyuh · 2019-08-28T21:39:09Z

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 react-scripts@3.1.1 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 · 2019-08-29T12:56:23Z

`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 · 2019-08-29T13:41:06Z

@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 · 2019-10-10T23:40:40Z

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 · 2019-10-22T03:33:05Z

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

Passes pluginOptions down.

What do you think @layershifter?

scorsi · 2019-11-20T14:47:25Z

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 · 2019-11-20T15:03:08Z

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 · 2019-11-20T15:05:39Z

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 · 2019-11-20T19:18:33Z

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

rickysullivan · 2019-12-02T21:57:50Z

@layershifter thoughts?

layershifter · 2019-12-05T21:50:55Z

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

rickysullivan · 2019-12-05T22:23:20Z

@layershifter legend!

layershifter · 2019-12-12T13:56:37Z

@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 😺

emutanen · 2021-07-02T14:49:09Z

Not fully related to modules, but rickysullivan's solution gave me an idea for a fix to a problem where
CRA Typescript setup with SUI React complained that Error evaluating function unit: the first argument to unit must be a number. Here is the shown error with yarn start

Failed to compile.

./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?

The one-line CRACO config seems to not work in this particular setup with react-scripts 4.0.3 and semantic-ui-less 2.4.1 and semantic-ui-react 2.0.3.

I ended up changing the contents of craco.config.js to

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

Now it works perfectly, thanks for the idea to work with the craco config file!

triage-new-issues bot added the triage label Aug 26, 2019

victortrusov mentioned this issue Aug 27, 2019

ModuleNotFoundError Semantic-Org/Semantic-UI-LESS#69

Open

Volland mentioned this issue Aug 27, 2019

Theming is not working on build step Semantic-Org/Semantic-UI#6862

Open

layershifter changed the title ~~Module not found on build~~ CreateReactApp: Module not found on build Aug 28, 2019

layershifter added the bug label Aug 28, 2019

triage-new-issues bot removed the triage label Aug 28, 2019

layershifter mentioned this issue Aug 29, 2019

docs(Theming): use @semantic-ui-react/craco-less plugin #3767

Merged

layershifter closed this as completed in #3767 Aug 29, 2019

scorsi mentioned this issue Nov 21, 2019

How to work with custom semantic-ui-less theme, css-modules and semantic-ui-react simultaneously using craco #3844

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CreateReactApp: Module not found on build #3761

CreateReactApp: Module not found on build #3761

fuwywawyuh commented Aug 26, 2019

welcome bot commented Aug 26, 2019

layershifter commented Aug 27, 2019

fuwywawyuh commented Aug 27, 2019

layershifter commented Aug 27, 2019

fuwywawyuh commented Aug 27, 2019 via email

victortrusov commented Aug 27, 2019 •

edited

Loading

Volland commented Aug 27, 2019

Volland commented Aug 27, 2019

layershifter commented Aug 27, 2019

fuwywawyuh commented Aug 27, 2019

layershifter commented Aug 28, 2019 •

edited

Loading

fuwywawyuh commented Aug 28, 2019

`craco.config.js`

victortrusov commented Aug 29, 2019

`craco.config.js`

layershifter commented Aug 29, 2019

rickysullivan commented Oct 10, 2019

rickysullivan commented Oct 22, 2019 •

edited

Loading

scorsi commented Nov 20, 2019 •

edited

Loading

layershifter commented Nov 20, 2019

scorsi commented Nov 20, 2019

rickysullivan commented Nov 20, 2019 •

edited

Loading

rickysullivan commented Dec 2, 2019

layershifter commented Dec 5, 2019

rickysullivan commented Dec 5, 2019

layershifter commented Dec 12, 2019

emutanen commented Jul 2, 2021

CreateReactApp: Module not found on build #3761

CreateReactApp: Module not found on build #3761

Comments

fuwywawyuh commented Aug 26, 2019

welcome bot commented Aug 26, 2019

layershifter commented Aug 27, 2019

fuwywawyuh commented Aug 27, 2019

layershifter commented Aug 27, 2019

fuwywawyuh commented Aug 27, 2019 via email

victortrusov commented Aug 27, 2019 • edited Loading

Volland commented Aug 27, 2019

Volland commented Aug 27, 2019

layershifter commented Aug 27, 2019

fuwywawyuh commented Aug 27, 2019

layershifter commented Aug 28, 2019 • edited Loading

craco.config.js

fuwywawyuh commented Aug 28, 2019

craco.config.js

victortrusov commented Aug 29, 2019

craco.config.js

layershifter commented Aug 29, 2019

craco.config.js

rickysullivan commented Oct 10, 2019

rickysullivan commented Oct 22, 2019 • edited Loading

scorsi commented Nov 20, 2019 • edited Loading

layershifter commented Nov 20, 2019

scorsi commented Nov 20, 2019

rickysullivan commented Nov 20, 2019 • edited Loading

rickysullivan commented Dec 2, 2019

layershifter commented Dec 5, 2019

rickysullivan commented Dec 5, 2019

layershifter commented Dec 12, 2019

emutanen commented Jul 2, 2021

victortrusov commented Aug 27, 2019 •

edited

Loading

layershifter commented Aug 28, 2019 •

edited

Loading

`craco.config.js`

`craco.config.js`

`craco.config.js`

`craco.config.js`

rickysullivan commented Oct 22, 2019 •

edited

Loading

scorsi commented Nov 20, 2019 •

edited

Loading

rickysullivan commented Nov 20, 2019 •

edited

Loading