svg-sprite-loader: SVG Sprite not working in CSS - [object Object]

Do you want to request a feature, report a bug or ask a question? Report a bug

What is the current behavior? SCSS input: background: url('../../static/images/svg-sprites/caret-down.svg') no-repeat; CSS output: background: url(http://localhost:3000/[object Object]) no-repeat;

What is the expected behavior? SCSS input: background: url('../../static/images/svg-sprites/caret-down.svg') no-repeat; CSS output: background: url(http://localhost:3000/images/sprites.svg#caret-down) no-repeat;

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. Webpack config for SVG is simple:

{
	test: /static\/images\/svg-sprites\/.*\.svg$/,
	use: [
		{
			loader: 'svg-sprite-loader',
			options: {
				spriteFilename: 'images/sprites.svg'
			}
		},
		{
			loader: 'svgo-loader'
		}
	]
}

Importing SVG files in JS are working.

The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code). It you don’t want to create a repository - create a gist with multiple files https://gist.github.com/GrzegorzZajac000/86618bf29024a7b82e9fb7c0863b7c30 - base webpack config https://gist.github.com/GrzegorzZajac000/adb2a4888d1e64756a68e690460111b2 - dev webpack config

If this is a feature request, what is motivation or use case for changing the behavior?

Please tell us about your environment:

Node.js version: v8.6.0
webpack version: 3.5.5
svg-sprite-loader version: 3.5.1
OS type & version: MacOS High Sierra 10.13

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

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (7 by maintainers)

Most upvoted comments

@vitortalaia in your case it can be fixed by setting esModule: false in loader config:

{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: resolve('src/assets/icons'),
        options: {
          extract: true,
          spriteFilename: utils.assetsPath('img/sprite-[hash:7].svg'),
          esModule: false
        }
      }

kisenka on Dec 12, 2017

Is there a resolution for background: url(…/…/C:/myApp/src/img/icn/arrw.svg);

issue ?

MarkiyanPyts on Feb 1, 2019

Have the same Issue, esModule:false is not working with me, it throws a Typeerror that cannot read viewBox property of the svg! Adding extract:true (with the plugin) does not show the SVGS with their symbols in html(inspect elements)

khanharis87 on Mar 5, 2018

@vitortalaia if shoutrly - Vue.js loaders evaluate result in their own sandbox, and as Node.js can’t handle ES exports yet we should use old commonjs export syntax, esModule=false does the trick.

kisenka on Dec 12, 2017