Webpack: cannot resolve module 'file-loader'

Question

When I try to build SASS file with webpack, I got the following error:

Module not found: Error:Cannot resolve module 'file-loader'

note that this issue only happen when i try to load background image using relative path.

this Work fine:

  background:url(http://localhost:8080/images/magnifier.png);

this cause the issue:

   background:url(../images/magnifier.png);

and this is my project structure

images
styles
webpack.config.js

and this is my webpack file:

var path = require('path');
module.exports = {
    entry: {
        build: [
            './scripts/app.jsx',
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/only-dev-server'
        ]
    },
    output: {
        path: path.join(__dirname, 'public'),
        publicPath: 'http://localhost:8080/',
        filename: 'public/[name].js'
    },
    module: {
        loaders: [
            {test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/},
            {test: /\.scss$/, loaders: ['style', 'css', 'sass']},
            {test: /\.(png|jpg)$/, loader: 'file-loader'},
            {test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
        modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts']
    }
};

css-loader converts every url(...) into require(...), so ../images/magnifier.png gets picked up by the /\.(png|jpg)$/ test. Do you have file-loader installed? — silvenon
– silvenon, Commented Dec 18, 2015 at 15:40
@silvenon, thanks for your response file-loader was broken so i re-installed it, and everything gonna fine.Thanks — Moussawi7
– Moussawi7, Commented Dec 28, 2015 at 13:17

thiagoh · Accepted Answer · 2017-12-09 21:45:49Z

100

As @silvenon said in his comment:

Do you have file-loader installed?

yes file-loader was installed but broken, and my issue has been solved by re-installing it.

npm install --save-dev file-loader

edited Dec 9, 2017 at 21:45

thiagoh

7,4588 gold badges55 silver badges78 bronze badges

answered Dec 29, 2015 at 11:46

Moussawi7

13.4k7 gold badges39 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

totymedli Over a year ago

For those who want to use url-loader: you also have to install file-loader for it, so run npm install --save-dev file-loader.

Kokodoko Over a year ago

What if I don't want webpack to load files? I do not need webpack to check if the image really exists in the dist folder.

OJ7 Over a year ago

Thank you! Spent a long time trying to fix a similar error where /node_modules/@ionic/core/dist/ionic/svg/index.js was giving an error when trying to run unit tests and only happened when using Ionic Platform

Leonardo Kuffo · Accepted Answer · 2019-12-12 19:43:31Z

You may face a very similar issue if you are using url-loader with the limit configuration defined. As the documentation states, if the resource you are trying to load exceeds this limit, then file-loader will be used as fallback. Therefore, if you do not have file-loader installed, an error will prompt. To fix this error, set this limit to a bigger value or do not define it at all.

      {
        test: /\.(jpg|png|svg)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 50000, // make sure this number is big enough to load your resource, or do not define it at all.
          }
        }
      }

lhahne · Accepted Answer · 2016-02-11 12:34:47Z

4

I has the exactly same issue and the following fixed it:

loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"

answered Feb 11, 2016 at 12:34

lhahne

6,0499 gold badges36 silver badges40 bronze badges

2 Comments

XML Over a year ago

This looks very useful, but I'm having trouble mapping it into the webpack.config with the other loader configs. Could you possibly provide a more complete example? Do you mean like this? {test: /\.(png|jpg)$/, loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"}

hizmarck Over a year ago

Hi @Ihahne, did you use yarn? I had the same issue, I only could resolve with this command. But I didn't know why.

Ben White · Accepted Answer · 2016-12-01 00:44:02Z

Thanks for this - this was the final piece to get Bootstrap, d3js, Jquery, base64 inline images and my own badly written JS to play with webpack.

To answer the question above and the solution to getting around the problematic
Module not found: Error: Cannot resolve module 'url' When compiling bootstrap fonts was

{ 
test: /glyphicons-halflings-regular\.(woff2|woff|svg|ttf|eot)$/,
loader:require.resolve("url-loader") + "?name=../[path][name].[ext]"
}

Thanks!

Rishab Surana · Accepted Answer · 2021-11-22 09:49:06Z

0

If you are facing this issue while running jest, then add this in moduleNameMapper

"ace-builds": "<rootDir>/node_modules/ace-builds"

answered Nov 22, 2021 at 9:49

Rishab Surana

2,1671 gold badge15 silver badges20 bronze badges

Comments

Anonymous · Accepted Answer · 2022-12-04 15:10:01Z

0

Error - ./node_modules/@fortawesome/fontawesome-free/css/all.min.cssdisabled.
     Error: Module not found: Can't resolve 'url-loader'

Fixed by installing url-loader, ex: run 'npm install url-loader --save-dev'

edited Dec 4, 2022 at 15:10

answered Dec 4, 2022 at 15:09

Anonymous

1015 bronze badges

Collectives™ on Stack Overflow

Webpack: cannot resolve module 'file-loader'

6 Answers 6

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Related