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

Question

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

Solution 1

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";

Solution 2

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

Comments

[kissu]

Actually, it's not absolute but relative path (hence the ../../..).