ModuleNotFoundError when using @import-s in CSS

[gombosg]

I get the below error when using extract-loader after css-loader. It seems that it messes up relative paths and wants to find a module by one folder higher in the path hierarchy - but css-loader is working fine, if you comment out extract-loader in the Webpack config file you can see its output in the dist folder.

Please advise. Here's a tiny repro repo: extractLoaderCssError.zip

Just install with NPM and then run webpack to see the error.

Am I doing something wrong or is this extract-loader's fault?

ERROR in ./main.css
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '../node_modules/css-loader/index.js' in '/home/user/csstest'
    at factory.create (/home/user/csstest/node_modules/webpack/lib/Compilation.js:798:10)
    at factory (/home/user/csstest/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/home/user/csstest/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/home/user/csstest/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /home/user/csstest/node_modules/neo-async/async.js:2817:7
    at /home/user/csstest/node_modules/neo-async/async.js:6783:13
    at /home/user/csstest/node_modules/neo-async/async.js:2817:7
    at done (/home/user/csstest/node_modules/neo-async/async.js:2914:13)
    at resolver.resolve (/home/user/csstest/node_modules/webpack/lib/NormalModuleFactory.js:447:23)
    at doResolve (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/user/csstest/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/home/user/csstest/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/user/csstest/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/user/csstest/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/home/user/csstest/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
    at hook.callAsync (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn1 (eval at create (/home/user/csstest/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:24:1)
    at hook.callAsync (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn1 (eval at create (/home/user/csstest/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:24:1)
    at hook.callAsync (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn1 (eval at create (/home/user/csstest/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:24:1)
    at hook.callAsync (/home/user/csstest/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/home/user/csstest/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at fs.stat (/home/user/csstest/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:22:13)
    at process.nextTick (/home/user/csstest/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

ERROR in ./main.css
Module not found: Error: Can't resolve '../node_modules/css-loader/index.js' in '/home/user/csstest'
resolve '../node_modules/css-loader/index.js' in '/home/user/csstest'
  using description file: /home/user/csstest/package.json (relative path: .)
    No description file found
    no extension
      /home/user/node_modules/css-loader/index.js doesn't exist
    .js
      /home/user/node_modules/css-loader/index.js.js doesn't exist
    .json
      /home/user/node_modules/css-loader/index.js.json doesn't exist
    as directory
      /home/user/node_modules/css-loader/index.js doesn't exist
[/home/user/node_modules/css-loader/index.js/package.json]
[/home/user/node_modules/css-loader/index.js]
[/home/user/node_modules/css-loader/index.js.js]
[/home/user/node_modules/css-loader/index.js.json]
 @ ./main.css -!../node_modules/css-loader/index.js??ref--4-2!../node_modules/resolve-url-loader/index.js??ref--4-3!/home/user/csstest/someFolder/anotherFolder/anotherCss.css

[HairyRabbit]

:) any update about this ? I got the same issue

[malash]

I guess it is a bug related to https://github.com/browserify/resolve/issues/177

I also created a temporary bug fix for extract-loader. If it works for you please let me known. Thanks.

@gombosg @HairyRabbit

[gombosg]

Well I was just using Mini CSS Extract Plugin in the meantime. Tried your fix but it didn't really work, got the same error. But maybe my setup was wrong.

[zmagyar]

@malash the browserify bug seems to be fixed but this one or at least #47 still persist. Shouldn't that gone away as well?

[Artur-]

This is still broken in the same way with the latest version (5.1.0).

Applying the fix in https://github.com/malash/extract-loader/commit/37f4feb80d69d011754b8b01424248e2128c4e27 does not seem to change anything

I created an up-to-date test case in https://github.com/Artur-/extract-loader-import-fail