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

[zxcabs]

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.

[nkbt]

@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)?

[zxcabs]

@nkbt No, it's simple less file

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

[nkbt]

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

[zxcabs]

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

[markdalgleish]

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

[nkbt]

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]

non-module mode

loaderUtils.urlToRequest(url, root)

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

module mode

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

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

[zxcabs]

can anybody fix it? :smiley_cat:

[nkbt]

@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) + ")+\"";

to

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

Everything works fine.

[nkbt]

@zxcabs @markdalgleish lol, you know what worked?

No changes to loader at all.

[zxcabs]

oh :smile:

[moroshko]

Any update on this?

[markdalgleish]

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

[safhac]

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?

[mmakarin]

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.

[MarkoCen]

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

[mmakarin]

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

[fbruckhoff]

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

[skyiea]

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.

[alianrock]

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

[billcz]

have the same the problem too.

[marcelloma]

+1 on this problem

[wtlyu]

+1 meet this problem too.

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

[clownvary]

+1 have the same the problem #2615

[StipJey]

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

[alex-shamshurin]

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]

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

[beshanoe]

same issue here

[alex-shamshurin]

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

[iloginov]

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

[mnpenner]

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

[michael-ciniawsky]

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

[NicoBurno]

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

[michael-ciniawsky]

@NicoBurno StackTrace (Error) please

[NicoBurno]

@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

[neutraali]

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

• webpack@2.3.2
• css-loader@0.27.3
• postcss-loader@1.3.3
• less-loader@4.0.2

[Bnaya]

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

[aspirisen]

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

[NicoBurno]

@neutraali update did not help: webpack@2.3.3 css-loader@0.27.3 postcss-loader@1.3.3 less-loader@4.0.3

@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

[aire-con-gas]

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

[mnpenner]

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

[bradennapier]

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

[artialex]

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

[alexander-akait]

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

[mnpenner]

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.

[alexander-akait]

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

[smashercosmo]

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

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

[ishenli]

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

[Spaxe]

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

[viT-1]

Still a bug with scss files and sass-loader (v8.0.2): css-loader (v6.9.1)

Error: Cannot find module '/img/ajax-loader.gif' "resolve" / "modules" setting is not helped