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

zxcabs · 2015-06-09T16:00:21Z

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.

The text was updated successfully, but these errors were encountered:

nkbt · 2015-06-09T21:49:31Z

@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 · 2015-06-10T08:19:30Z

@nkbt No, it's simple less file

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

nkbt · 2015-06-10T10:02:12Z

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

zxcabs · 2015-06-10T10:31:23Z

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

markdalgleish · 2015-06-10T10:53:46Z

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

nkbt · 2015-06-10T11:51:57Z

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 · 2015-06-10T12:11:45Z

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 · 2015-06-10T12:39:39Z

can anybody fix it? 😺

nkbt · 2015-06-10T12:43:15Z

@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 · 2015-06-10T13:12:44Z

@zxcabs @markdalgleish lol, you know what worked?

No changes to loader at all.

zxcabs · 2015-06-10T13:38:09Z

oh 😄

moroshko · 2015-12-27T23:55:40Z

Any update on this?

markdalgleish · 2016-01-07T03:02:34Z

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

safhac · 2016-03-24T08:52:54Z

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 · 2016-03-24T08:59:15Z

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 · 2016-05-15T03:14:22Z

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

mmakarin · 2016-05-15T05:56:37Z

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 · 2016-05-23T19:21:57Z

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

skyiea · 2016-05-24T07:54:40Z

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 · 2016-07-06T04:26:25Z

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 · 2016-07-07T01:18:58Z

have the same the problem too.

marcelloma · 2016-07-18T15:48:17Z

+1 on this problem

wtlyu · 2016-08-07T15:11:20Z

+1 meet this problem too.

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

clownvary · 2016-09-07T19:40:03Z

+1 have the same the problem #2615

StipJey · 2016-09-20T13:33:59Z

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

alex-shamshurin · 2016-09-22T07:27:49Z

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.

NicoBurno · 2017-03-22T11:00:14Z

Still does not work... 😟

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 · 2017-03-22T11:03:57Z

@NicoBurno StackTrace (Error) please

NicoBurno · 2017-03-22T11:40:02Z

@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 · 2017-03-29T14:56:44Z

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

Bnaya · 2017-04-08T23:04:27Z

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

aspirisen · 2017-04-10T15:53:22Z

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

NicoBurno · 2017-04-12T08:01:41Z

@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 ...
webpack/loader-utils@master...NicoBurno:patch-1

aire-con-gas · 2017-05-26T04:09:49Z

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

mnpenner · 2017-06-14T17:26:33Z

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

bradennapier · 2017-06-16T03:10:01Z

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

artialex · 2017-07-14T14:30:50Z

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

alexander-akait · 2017-07-14T14:42:57Z

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

mnpenner · 2017-07-14T16:39:45Z

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 · 2017-07-14T16:52:29Z

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

smashercosmo · 2017-08-29T09:56:58Z

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

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

ishenli · 2018-01-28T09:10:59Z

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

Spaxe · 2018-04-09T05:42:15Z

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

viT-1 · 2024-01-26T10:23:25Z

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

sokra mentioned this issue Jun 21, 2015

add moduleUrl option less/less.js#2615

Closed

RanzQ mentioned this issue Sep 4, 2015

Weird problem with LESS erikras/react-redux-universal-hot-example#158

Closed

moroshko mentioned this issue Dec 27, 2015

Error: Cannot resolve module webpack-contrib/url-loader#21

Closed

bebraw added the type: Bug label Dec 28, 2015

michael-ciniawsky removed the modules label Mar 21, 2017

michael-ciniawsky removed their assignment Mar 21, 2017

ucay mentioned this issue May 23, 2017

Error: Cannot find module 'logo.png' kriasoft/react-starter-kit#1271

Closed

michael-ciniawsky reopened this Jun 14, 2017

joshwiens added priority: 4 (important) status: Needs triage type: Bug labels Jun 15, 2017

michael-ciniawsky closed this as completed Jan 8, 2018

michael-ciniawsky removed priority: 4 (important) status: Needs triage type: Bug labels Jan 8, 2018

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

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

Comments

zxcabs commented Jun 9, 2015

nkbt commented Jun 9, 2015

zxcabs commented Jun 10, 2015

nkbt commented Jun 10, 2015

zxcabs commented Jun 10, 2015

markdalgleish commented Jun 10, 2015

nkbt commented Jun 10, 2015

nkbt commented Jun 10, 2015

non-module mode

module mode

zxcabs commented Jun 10, 2015

nkbt commented Jun 10, 2015

nkbt commented Jun 10, 2015

zxcabs commented Jun 10, 2015

moroshko commented Dec 27, 2015

markdalgleish commented Jan 7, 2016

safhac commented Mar 24, 2016

mmakarin commented Mar 24, 2016

MarkoCen commented May 15, 2016

mmakarin commented May 15, 2016 • edited Loading

fbruckhoff commented May 23, 2016 • edited Loading

skyiea commented May 24, 2016

alianrock commented Jul 6, 2016

billcz commented Jul 7, 2016

marcelloma commented Jul 18, 2016

wtlyu commented Aug 7, 2016

clownvary commented Sep 7, 2016

StipJey commented Sep 20, 2016 • edited Loading

alex-shamshurin commented Sep 22, 2016

NicoBurno commented Mar 22, 2017

footer/footer.less

versions

michael-ciniawsky commented Mar 22, 2017

NicoBurno commented Mar 22, 2017

neutraali commented Mar 29, 2017 • edited Loading

Bnaya commented Apr 8, 2017

aspirisen commented Apr 10, 2017

NicoBurno commented Apr 12, 2017

aire-con-gas commented May 26, 2017

mnpenner commented Jun 14, 2017

bradennapier commented Jun 16, 2017

artialex commented Jul 14, 2017

alexander-akait commented Jul 14, 2017 • edited Loading

mnpenner commented Jul 14, 2017 • edited Loading

alexander-akait commented Jul 14, 2017

smashercosmo commented Aug 29, 2017

ishenli commented Jan 28, 2018

Spaxe commented Apr 9, 2018

viT-1 commented Jan 26, 2024

mmakarin commented May 15, 2016 •

edited

Loading

fbruckhoff commented May 23, 2016 •

edited

Loading

StipJey commented Sep 20, 2016 •

edited

Loading

neutraali commented Mar 29, 2017 •

edited

Loading

alexander-akait commented Jul 14, 2017 •

edited

Loading

mnpenner commented Jul 14, 2017 •

edited

Loading