Webpack: cannot resolve module 'file-loader'

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


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

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!


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

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

Tags:

Sass

Webpack