Css-loader: Error can't find module when using less-loader and "module" options

Created on 9 Jun 2015 · 49Comments · Source: webpack-contrib/css-loader

Hello,
when i use "background: url(./icon.png)" in my less file i got error Module not found: Error: Cannot resolve module 'icon.png'.

Here part of webpack.config.js file

module: {
            loaders: [
                {
                    test: /\.less$/,
                    loader: ExtractTextPlugin.extract('style', 'css?module&localIdentName=[hash:base64:5]!postcss!less')
                },
                {
                    test: /\.(jpg|png)$/,
                    loader: 'url-loader?limit=100000'
                },
                {
                    test: /\.svg$/,
                    loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
                }
            ]
},

If remove module options or less-loader all works well.

Source

zxcabs

👍2

Most helpful comment

This is what worked for me. Add to webpack config the following lines

resolve: {
  modules: ['./', 'node_modules'],
}

smashercosmo on 29 Aug 2017

👍18

All 49 comments

@zxcabs are you using your png file in a mixin or something (not actual less file you require, but some other file somehow imported less-way)?

nkbt on 9 Jun 2015

@nkbt No, it's simple less file

.root {
  width: 29px;
  height: 29px;
  background: url('./icon.png');
  cursor: pointer;
}

zxcabs on 10 Jun 2015

That is hard to tell, could be even some typo... If you could make a simple repo to reproduce the issue

nkbt on 10 Jun 2015

https://github.com/zxcabs/webpack-css-module-less-error

zxcabs on 10 Jun 2015

I'm actually having the same issue trying to convert my current project to CSS Modules.

markdalgleish on 10 Jun 2015

That is interesting. When I migrated our sprockets build with sass and all that kind of stuff - I had almost no issues. The only issue I had was - not correctly resolved path inside imported files and different mixins. But in general everything worked like a charm.

nkbt on 10 Jun 2015

non-module mode

loaderUtils.urlToRequest(url, root)

returns url("+require("./cat.png")+")

module mode

require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")

gives url("+require("cat.png")+")

nkbt on 10 Jun 2015

can anybody fix it? :smiley_cat:

zxcabs on 10 Jun 2015

@zxcabs I kind of debugged all the chain and it is quite clear where exactly the issue, but that code was written on purpose...

When I changed:

        if(!moduleMode) urlRequest = loaderUtils.urlToRequest(url, root);
        return "\"+require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")+\"";

        urlRequest = loaderUtils.urlToRequest(url, root);
        return "\"+require(" + loaderUtils.stringifyRequest(this, urlRequest) + ")+\"";

Everything works fine.

nkbt on 10 Jun 2015

👍1

@zxcabs @markdalgleish lol, you know what worked?

20150610-231147

No changes to loader at all.

nkbt on 10 Jun 2015

👍6

oh :smile:

zxcabs on 10 Jun 2015

Any update on this?

moroshko on 28 Dec 2015

@moroshko we're still waiting to hear back on this issue in Less: https://github.com/less/less.js/pull/2615

markdalgleish on 7 Jan 2016

Not sure if this still an issue?, but this could be cause your package json has less in devdeps have you tried less-loader instead of less?

safhac on 24 Mar 2016

It's stiil an issue. I have to load images via url("../folder/img.jpg") instead of just url("img.jpg") which is very inconvinient.

mmakarin on 24 Mar 2016

make sure you install less: npm install less -D
less-loader won't auto install less

MarkoCen on 15 May 2016

👍2

It's installed. Still doesn't work.
background: url("./img/login-background.png") no-repeat 0 0;
Module not found: Error: Cannot resolve module 'img/login-background.png' in c:\Users\spybo\Documents\Projects\project\src\frontend\components\login\EntrancePage

mmakarin on 15 May 2016

👍5

Getting the same error as mmakarin.
Update: npm install css-less-loader --save-dev did the trick for me.

fbruckhoff on 23 May 2016

My workaround was that I've created additional temporary loader called (just local .js file called _less-loader-fix.js):

module.exports = function (content) {
    return content.
            replace(/url\(('|")*(\.\/)*(.+?)('|")*\)/g, 'url(./$3)').
            replace(/\.\/((https?|ftp):\/\/)/, '$1');
};

And using it in webpack.config.js like this:

loaders: [
    'style',
    'css?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
    path.resolve('./_less-loader-fix'),
    'less'
]

Present RegEx might not cover all use-cases, so you might want to extend it a bit on demand.

skyiea on 24 May 2016

👍2

have the same problem as mmakarin..
background: url(../../style/images/icon.png) no-repeat;works fine

but background: url(./images/icon.png) no-repeat; warn module not found

alianrock on 6 Jul 2016

have the same the problem too.

billcz on 7 Jul 2016

+1 on this problem

marcelloma on 18 Jul 2016

+1 meet this problem too.

using ../dir_name to return the same root works for me.

eastpiger on 7 Aug 2016

+1 have the same the problem #2615

clownvary on 7 Sep 2016

still working background: url("\./images/cat.png"); but there must be a normal solution

StipJey on 20 Sep 2016

background: url("\./images/cat.png"); does not work for me. As a temporary solution I added 'image' folder to webpack resolve fallback path. I still cannot load image or font from the stylus file's folder.

alex-shamshurin on 22 Sep 2016

👍1

For me this background: url("\./images/cat.png"); does not work for stylus.

alex-shamshurin on 22 Sep 2016

same issue here

beshanoe on 7 Oct 2016

I found that the only way is url(cat.png) and add that images folder to webpack fallback path.

alex-shamshurin on 7 Oct 2016

I know one more fix for less: ~"url()".

iloginov on 15 Jan 2017

👍2

Just hit this too. Discovered the ../directory_i_was_already_in/file.svg trick works for me too.

mnpenner on 28 Jan 2017

Please try again with less-loader >= v4.0.0, if there are still regressions I will reopen 😛

michael-ciniawsky on 21 Mar 2017

👍1

Still does not work... :worried:

footer/footer.less

background: url("img/logo.png"); //not work
background: url("\./img/logo.png"); //work

versions

webpack 2.2.1
less-loader 4.0.2
css-loader 0.27.3

NicoBurno on 22 Mar 2017

@NicoBurno StackTrace (Error) please

michael-ciniawsky on 22 Mar 2017

@michael-ciniawsky there are two error sections:

Section 1

ERROR in ./\~/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]___[hash:base64:5]"}!./\~/postcss-loader!./\~/less-loader/dist?{"paths":["/var/www/lb/src/public/styles"]}!./src/public/components/views/footer/styles.less
Module not found: Error: Can't resolve 'img/logo.png' in '/var/www/lb/src/public/components/views/footer'
@ ./\~/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]___[hash:base64:5]"}!./\~/postcss-loader!./\~/less-loader/dist?{"paths":["/var/www/lb/src/public/styles"]}!./src/public/components/views/footer/styles.less 6:2491-2514
@ ./src/public/components/views/footer/styles.less
@ ./src/public/components/views/footer/index.js
@ ./src/public/components/views/index.js
@ ./src/public/components/index.js
@ ./src/public/index.js
@ ./src/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:9100 webpack/hot/dev-server ./index.js

ERROR in ./src/public/components/views/footer/styles.less
Module build failed: Error
at factoryCallback (/var/www/lb/node_modules/webpack/lib/Compilation.js:259:39)
at /var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:234:19
at onDoneResolving (/var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:59:20)
at /var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:126:20
at /var/www/lb/node_modules/async/dist/async.js:3694:9
at /var/www/lb/node_modules/async/dist/async.js:359:16
at iteratorCallback (/var/www/lb/node_modules/async/dist/async.js:933:13)
at /var/www/lb/node_modules/async/dist/async.js:843:16
at /var/www/lb/node_modules/async/dist/async.js:3691:13
at apply (/var/www/lb/node_modules/async/dist/async.js:21:25)
at /var/www/lb/node_modules/async/dist/async.js:56:12
at /var/www/lb/node_modules/webpack/lib/NormalModuleFactory.js:121:22
at onResolved (/var/www/lb/node_modules/enhanced-resolve/lib/Resolver.js:70:11)
at loggingCallbackWrapper (/var/www/lb/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)
at afterInnerCallback (/var/www/lb/node_modules/enhanced-resolve/lib/Resolver.js:138:10)
at loggingCallbackWrapper (/var/www/lb/node_modules/enhanced-resolve/lib/createInnerCallback.js:31:19)

ERROR in /var/www/lb/node_modules/extract-text-webpack-plugin/loader.js??ref--2-0!/var/www/lb/node_modules/style-loader/index.js!/var/www/lb/node_modules/css-loader/index.js??ref--2-2!/var/www/lb/node_modules/postcss-loader/index.js!/var/www/lb/node_modules/less-loader/dist/index.js??ref--2-4!/var/www/lb/src/public/components/views/footer/styles.less doesn't export content

Section 2

ERROR in ./\~/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]___[hash:base64:5]"}!./\~/postcss-loader!./\~/less-loader/dist?{"paths":["/var/www/lb/src/public/styles"]}!./src/public/components/views/footer/styles.less
Module not found: Error: Can't resolve 'img/logo.png' in '/var/www/lb/src/public/components/views/footer'
@ ./~/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[name]__[local]___[hash:base64:5]"}!./\~/postcss-loader!./\~/less-loader/dist?{"paths":["/var/www/lb/src/public/styles"]}!./src/public/components/views/footer/styles.less 6:2491-2514

NicoBurno on 22 Mar 2017

👍1

Any update to this? Having near-exactly the same error as @NicoBurno - Using:

neutraali on 29 Mar 2017

👍1

@neutraali it have some issue becouse of postcss-loader. i'm still trying to understand it

Bnaya on 9 Apr 2017

Had the same with webpack 2 and css-modules on
background: url("\./img/logo.png"); //work
helped

aspirisen on 10 Apr 2017

👍2

@neutraali update did not help:
[email protected]
[email protected]
[email protected]
[email protected]

@Bnaya I localized the problem. But I do not understand why this code works like this ...
https://github.com/webpack/loader-utils/compare/master...NicoBurno:patch-1

NicoBurno on 12 Apr 2017

So why does background: url("\./img/logo.png"); work @aspirisen ? I'd love to know the root cause.

aire-con-gas on 26 May 2017

@michael-ciniawsky This is still an issue with less-loader 4.0.3. Please re-open :cry:

mnpenner on 14 Jun 2017

hmm this seems to be an issue when just using postcss-loader as well.

bradennapier on 16 Jun 2017

adding resolve-url-loader fixes this for me
...!resolve-url!less...

alextheartisan on 14 Jul 2017

@mnpenner @bradennapier can your provide minimum reproducible test repo?

alexander-akait on 14 Jul 2017

Erm... I can't reproduce this is a new project. ~~Here's what I tried~~ [dead]. Will post again if I figure out to cause, unless maybe it was fixed recently.

mnpenner on 14 Jul 2017

For me, bug not related to css-loader. Seems more related to less/sass/etc/-loader.

alexander-akait on 14 Jul 2017

This is what worked for me. Add to webpack config the following lines

resolve: {
  modules: ['./', 'node_modules'],
}

smashercosmo on 29 Aug 2017

👍18

@smashercosmo I can not understand why it works。。It is surprise

ishenli on 28 Jan 2018

Just traced my postcss-loader issue all the way here! Wow. Please fix. :)

Spaxe on 9 Apr 2018

Was this page helpful?

0 / 5 - 0 ratings

Related issues

browserslist config ignored

dmiller9911 · 3Comments

css-loader 0.15.1 breaks keyframe animations

mareksuscak · 5Comments

Global and Local css mixed, how to exclude only one directory?

camsong · 3Comments

Exporting variables from SCSS file to JavaScript no longer works in css-loader 4.x.x

felipecarrillo100 · 3Comments

css-loader is incompatible with file-loader@^1.0.0

Jessidhia · 3Comments