Unable to use SVG in styles because all paths get replaced with [object Module]

[mihnutzen]

Do you want to request a feature, report a bug or ask a question? question . how can i tell the sprite loader to ignore all paths in css files ?

What is the current behavior? creates the sprite but breaks css files .. all paths to SVG in css are replaced with url([object Module])

What is the expected behavior? not brake paths

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code. { test: /.svg$/, loader: 'svg-sprite-loader', options: { extract: false | true // doesnt make a difference }, include: [ path.resolve(__dirname, 'app/common/img/icons') ] },

Please tell us about your environment:

• Node.js version: ? 8.4
• webpack version: ? 4.16
• svg-sprite-loader version: ? 4.1

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[angelov-a]

I have a similar issue when using with Vue CLI 3.

[kisenka]

Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

[pulicapus]

I have a similar issue

[strukove]

Could you please create repo with minimal setup to demonstrate a problem (package.json, webpack config, SVG image and piece of your code). If you don't want to create a repository - you can create a gist with multiple files.

Hi! We have the same problem when we setup vue cli 3 project. Check this demo please, https://github.com/strukove/svg-sprite-loader-error

[dimdid]

same issue here, when tring to apply style from svg file, with default configuration.

//wp config
test: /\.svg$/,
  use: [{ loader: 'svg-sprite-loader', options: {} }]
[......]
plugins: [
    new SvgSpritePlugin(),
[..]

/*style.css, where ~Assets is an webpack alias, same result whith relative path.*/
.svg-style {
  filter: url('~Assets/freezed.svg#freezed-filter');
  fill: url(~Assets/freezed.svg#freezed-gradient);
}

result in

  filter: url([object Module]#freezed-filter);
  fill: url([object Module]#freezed-gradient);

expected

  fill: url(sprite.svg#freezed_freezed-filter);

[swapzone]

Same issue here.

[aethr]

I'm experiencing a similar issue, except the URL the browser is trying to load for the sprite is [object%20Object].

For me this issue only occurs during development using HMR and the prod build appears to be fine.

[golubvladimir]

same problem.

[vchrm]

@kisenka Hi, to demonstrate the issue I have created the simplest example I could imagine.

Please see: https://github.com/vchrm/svg-sprite-loader-issue-324

Our previous configuration was webpack 3.8.1, css-loader 0.28.7, extract-text-webpack-plugin 3.0.2 and svg-sprite-loader 3.4.1 and everything was working fine. (Yes, a little prehistoric, I know.)

After upgrade to webpack 4.30.0, css-loader 2.1.1, mini-css-extract-plugin 0.6.0 and svg-sprite-loader 4.1.6 we started to get the background: url([object Module]) issue too.

Do you please have any ideas what that can be related to?

Thanks!

[vchrm]

My personal guess is that the issue is related to switch to mini-css-extract-plugin so in the meantime I looked into other issues related to webpack 4 or mini-css-extract-plugin and especially this comment struck my mind: https://github.com/kisenka/svg-sprite-loader/issues/271#issuecomment-425361287

So I guess extract-svg-sprite-webpack-plugin is the way to go and to get over this issue, am I right? Will try!

[entr]

In Gatsby I had to enforce the { esModule: false } in loader options. I guess this also depends on the version of css-loader. In Gatsby sadly it's fairly old (1.0.1), but hey, if it works...

[antongorodezkiy]

Thank you @entr esModule: false makes it work in my vue project

config.module.rule('svg')
    .test(/\.(svg)(\?.*)?$/)
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
        extract: true,
        spriteFilename: 'sprite-[hash:6].svg',
        esModule: false
    })