3

We are migrating CSS-loader from v0.28.11 to v3.1.0

We have 2 projects:

  • Project A- No component dependency on any other project - (containing some components)
  • Project B - We are importing Project A as node modules

We are able to run and build project A successfully. But when we try to run Project B we getting a dependancy error for css files from Project A.

ERROR in ./src/help/css/about.qcss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './Project/A/src/typography/css/qx-typography.css' in 'D:\Projects\B\src\help\css'
    at factory.create (D:\Projects\B\node_modules\webpack\lib\Compilation.js:823:10)
    at factory (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:397:22)
    at resolver (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
    at asyncLib.parallel (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
    at D:\Projects\B\node_modules\neo-async\async.js:2830:7
    at D:\Projects\B\node_modules\neo-async\async.js:6877:13
    at normalResolver.resolve (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
    at doResolve (D:\Projects\B\node_modules\enhanced-resolve\lib\Resolver.js:184:12)
    at hook.callAsync (D:\Projects\rx\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (D:\Projects\B\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
  1. Same works fine with if we do css-loader of Project A to v3.1.0 and Project B to v1.0.0
  2. But we get a compile-time error if we change both project css-loader version to 3.1.0

We should be able to run and create a build using CSS-loader with version 3.1.0

Michael Dodd
  • 10,102
  • 12
  • 51
  • 64
Bhushankumar Pawar
  • 61
  • 1
  • 1
  • 4

4 Answers4

3
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cj s.js): Error: Missing binding /home/user/frontloja/node_modul es/node-sass/vendor/ linux-x64-64/binding.node Node Sass could not find a binding for your current environment : Linux 64-bit with Node.js 10.x Found bindings for the following environments: - Linux 64-bit with Node.js 12.x

In my case, it happened after I updated ubuntu 18 to 20, so I did it like this

  1. remove or rename node_modules
  2. then reinstall use npm or yarn install
Gama
  • 51
  • 1
  • 5
2

This issue happens because of webpack resolve.alias not works

To solve this issue we can use the relative path.

In my case

Currently, I am in Projects\B\src\help\css

and requiring file from node_Modules
/Project/A/src/typography/css/qx-typography.css

so my path be like (**Relative Path**)
../../../../node_modules/Project/A/src/typography/css/qx-typography.css";
captainrad
  • 3,760
  • 16
  • 41
  • 74
Bhushankumar Pawar
  • 61
  • 1
  • 1
  • 4
0

Error: ./src/styles.css Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: Failed to find 'bootstrap/dist/css/bootstrap.min.css'

Solution: Run the following command for installing additional packages

npm install bootstrap jquery popper.js
Sachin Gaikwad
  • 1
0

I had this issue in my Angular project. It looks like a bootstrap issue. I just downgraded bootstrap from 5.1.3 to 4.6.0. That's all

RezaNikfal
  • 927
  • 11
  • 22