Can't include png and svg files loaded from a CSS in the node module directory through webpack

Question

I'm using a module called React-Photoswipe, which require me to import a CSS file that contains PNGs and SVGs in the node_module folder:

My import statements:

import { PhotoSwipe } from 'react-photoswipe';
import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';

in default-skin.css:

.pswp__button--arrow--right:before {
  background: url(default-skin.png) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px; }

in my webpack, I have the png loaders (other png files load alright):

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    'react-hot-loader/patch',
    './src/index',
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  resolve: {
    root: [
      path.join(__dirname, 'node_modules'),
    ],
    extensions: ['', '.js', '.json', 'css', 'svg', 'png', 'gif'],
  },
  module: {
    preLoaders: [
      {
        test: /\.js/,
        loader: 'eslint',
      },
    ],
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        include: path.join(__dirname, 'src'),
      },
      {
        test: /\.css/,
        loaders: [
          'style',
          'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss',
        ],
      },
      {
        test: /\.(png|jpg|svg|gif)/,
        loaders: [
          'url?limit=10000&hash=sha512&digest=hex&name=[name]_[hash].[ext]',
        ],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        loader: 'file?name=public/fonts/[name].[ext]',
      },
    ],
  },
  postcss: () => [autoprefixer],
};

Here are the errors I encounter:

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-ski
n.css
Module not found: Error: Cannot resolve module 'default-skin.png' in C:\xampp\htdocs\react-forge-landing-gh-pages\node_modules\photoswipe\dist\default-skin
 @ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-skin.css
6:1455-1482

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-ski
n.css
Module not found: Error: Cannot resolve module 'default-skin.svg' in C:\xampp\htdocs\react-forge-landing-gh-pages\node_modules\photoswipe\dist\default-skin
 @ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-skin.css
6:2093-2120

ERROR in ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-ski
n.css
Module not found: Error: Cannot resolve module 'preloader.gif' in C:\xampp\htdocs\react-forge-landing-gh-pages\node_modules\photoswipe\dist\default-skin
 @ ./~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/photoswipe/dist/default-skin/default-skin.css
6:9039-9063

score 1 · Answer 1 · answered Jun 19 '16 at 06:27

1

The error literally says that url(default-skin.png) doesn't resolve to anything webpack is aware of.

You could try defining a resolve.alias against that particular file (alias default-skin.png to point at the file explicitly).

answered Jun 19 '16 at 06:27

Juho Vepsäläinen

26,573
12
79
105

can you give more info? – niklas Jan 30 '19 at 05:03
A `resolve.alias` can be used to override the import source. That would resolve the issue in this case as you can point `default-skin.png` to wherever it actually happens to exist in the file system. – Juho Vepsäläinen Jan 30 '19 at 12:53
I mean on how you would use it. I tried some different things and in my case it did not work – niklas Jan 31 '19 at 23:03
I would need actual code to look at. The key in the object matches while the value resolves. Maybe your rule doesn't match correctly. – Juho Vepsäläinen Feb 01 '19 at 10:35

Can't include png and svg files loaded from a CSS in the node module directory through webpack

1 Answers1