Disabling url() check in css-loader

4
votes

I have a React project with Leaflet 1.0.3 in it. On building with Webpack which uses css-loader, I get:

ERROR in ./~/css-loader!./~/leaflet/dist/leaflet.css
Module not found: Error: Can't resolve './images/layers.png' in '/home/tim/work/portal/node_modules/leaflet/dist'
resolve './images/layers.png' in '/home/tim/work/portal/node_modules/leaflet/dist'
  using description file: /home/tim/work/portal/node_modules/leaflet/package.json (relative path: ./dist)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/tim/work/portal/node_modules/leaflet/package.json (relative path: ./dist)
    using description file: /home/tim/work/portal/node_modules/leaflet/package.json (relative path: ./dist/images/layers.png)
      as directory
        /home/tim/work/portal/node_modules/leaflet/dist/images/layers.png doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/tim/work/portal/node_modules/leaflet/dist/images/layers.png doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/tim/work/portal/node_modules/leaflet/dist/images/layers.png.js doesn't exist

This appears to be because there is a relative image path used in the leaflet.css. I have tried to turn off the css-loader checks with:

{
        test: /\.css$/,
        exclude: [/node_modules/, /sanitize/],
        use: [
          'style-loader', 
          { 
            loader: 'css-loader',
            options: {
              url: false, // leaflet uses relative paths
              minimize: false,
              modules: false,
            }
          }
        ]
      },

but the documented options do not apparently work.

4
webpackleafletcss-loader

4 Answers

1
votes

I had the exact same issue and fixed it by removing the line "images" from the .yarnclean file in my project.

If .yarnclean is present in project, yarn will clean the node_modules and remove all files that match any of the patterns. Thus, also the images dir in node_modules/leaftlet/dist/ got deleted.

See also this closed issue in the yarn Github repository.

0
votes

Looking into node_modules in more detail, yarn add [email protected] puts no image directory or images into node_modules/leaflet/dist/. Copying the images in from a clone of the repo resolves the problem.

0
votes

I can also verify that under windows at least

yarn add leaflet

does not correctly install the leaflet dependency in node_modules -missing images folder. However if you stick with NPM you should be fine.

npm install --save leaflet

0
votes

You have two solutions:

  1. Exclude some CSS files which has url() in your Webpack file, that is not a very good solution.
  2. Use url-loader in your Webpack config and config url-loader as static, that all of loaders ignore url addresses.

I'd same problem and fix it with second way.