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']
    }
};

Mixer

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? – Garrulity

@silvenon, thanks for your response file-loader was broken so i re-installed it, and everything gonna fine.Thanks – Mixer

Answer 1

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

Mixer

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. – Apocrypha

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. – Informed

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 – Saied

Thank you! Worked for me after I installed it. – Peabody

Answer 2

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.
          }
        }
      }

Kalinin

Answer 3

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

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

Lucais

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]"} – Onset

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

Answer 4

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!

Mucker

Answer 5

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

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

Successful

Answer 6

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'

Is