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

[Bhushankumar-pawar]

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.

same works fine with if we do css-loader of Project A to v3.1.0 and Project B to v1.0.0
But we get a compile-time error if we change both project css-loader version to 3.1.0

`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 './ProjectA/src/typography/css/qx-typography.css' in 'D:\Projects\rx\src\help\css'
    at factory.create (D:\Projects\rx\node_modules\webpack\lib\Compilation.js:823:10)
    at factory (D:\Projects\rx\node_modules\webpack\lib\NormalModuleFactory.js:397:22)
    at resolver (D:\Projects\rx\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
    at asyncLib.parallel (D:\Projects\rx\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
    at D:\Projects\rx\node_modules\neo-async\async.js:2830:7
    at D:\Projects\rx\node_modules\neo-async\async.js:6877:13
    at normalResolver.resolve (D:\Projects\rx\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
    at doResolve (D:\Projects\rx\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\rx\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
`

[alexander-akait]

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I'm closing this. Please either update the issue with the template and reopen, or open a new issue.

Yes, there are a lot of breaking changes from 0.28.11 to 3.1.0, for url/@import resolving was changed + many other stuff.

Looks on error Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):, problem was mini-css-extract-plugin not from, css-loader, also mini-css-extract-plugin doesn't support multiple instances, sorry we can't help, please create minimum reproducible test repo, if bug was found i will repopen issue in right repository

[Bhushankumar-pawar]

For future use, if any one gets stuck to the same issue.

This issue happens because of webpack resolve.alias not works

To solve this issue, you can use the absolute 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 (**Absolute Path**)
    ../../../../node_modules/Project/A/src/typography/css/qx-typography.css";

Still not able to understand, why below wbepack resolve works with CSS-loader v1.0.0 but not with CSS-loader v3.1.0?

//webpack.config

  resolve: {
    extensions: [".js", ".jsx",".css",".qcss"],
    alias: {
      "react": path.resolve("./node_modules/react"),
      "A/react-i18n": path.resolve("./node_modules/A/react-i18n"),
      "A/react-ui-library": path.resolve("./node_modules/A/react-ui-library"),
      "B": path.resolve(__dirname + "/src")
    },
    modules: ["node_modules"]
  },

[ghost]

Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './node_modules/bootstrap/scss/bootstrap.scss' in 'c:Websitesknowledgeassetsstyles'
at finishWithoutResolve (c:Websitesknowledgenode_modulesenhanced-resolvelibResolver.js:293:18)
at doResolve (c:Websitesknowledgenode_modulesenhanced-resolvelibResolver.js:362:15)
at hook.callAsync (c:Websitesknowledgenode_modulesenhanced-resolvelibResolver.js:410:5)
at eval (eval at create (c:Websitesknowledgenode_modulestapablelibHookCodeFactory.js:33:10), :15:1)
at hook.callAsync (c:Websitesknowledgenode_modulesenhanced-resolvelibResolver.js:410:5)
at eval (eval at create (c:Websitesknowledgenode_modulestapablelibHookCodeFactory.js:33:10), :27:1)
at resolver.doResolve (c:Websitesknowledgenode_modulesenhanced-resolvelibDescriptionFilePlugin.js:87:43)
at hook.callAsync (c:Websitesknowledgenode_modulesenhanced-resolvelibResolver.js:410:5)
at eval (eval at create (c:Websitesknowledgenode_modulestapablelibHookCodeFactory.js:33:10), :15:1)
at hook.callAsync (c:Websitesknowledgenode_modulesenhanced-resolvelibResolver.js:410:5)
at processResult (c:Websitesknowledgenode_moduleswebpacklibNormalModule.js:576:19)
at runLoaders (c:Websitesknowledgenode_moduleswebpacklibNormalModule.js:669:5)
at c:Websitesknowledgenode_modulesloader-runnerlibLoaderRunner.js:399:11
at c:Websitesknowledgenode_modulesloader-runnerlibLoaderRunner.js:251:18
at context.callback (c:Websitesknowledgenode_modulesloader-runnerlibLoaderRunner.js:124:13)
at Object.loader (c:Websitesknowledgenode_modulescss-loaderdistindex.js:155:5)
at process._tickCallback (internal/process/next_tick.js:68:7)
at Object../assets/styles/app.css (http://127.0.0.1:8000/build/app.js:177:7)
at __webpack_require__ (http://127.0.0.1:8000/build/runtime.js:22:41)
at Object../assets/app.js (http://127.0.0.1:8000/build/app.js:49:73)
at __webpack_require__ (http://127.0.0.1:8000/build/runtime.js:22:41)
at checkDeferredModulesImpl (http://127.0.0.1:8000/build/runtime.js:122:24)
at Array.webpackJsonpCallback [as push] (http://127.0.0.1:8000/build/runtime.js:171:20)
at http://127.0.0.1:8000/build/app.js:1:53

Here ya go Enjoy it's what i get when i use webpack in combination with symfony 5.2.1