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

[GrzegorzZajac000]

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)

[kisenka]

please provide package.json with listed dependencies and example code which produce wrong output

[GrzegorzZajac000]

package.json: https://gist.github.com/GrzegorzZajac000/aff95175d95afe96df66d6500e112baa

Example CSS code which produce wrong code: https://gist.github.com/GrzegorzZajac000/615cb3cbae2fa40a1bbb5d27605887c5

[kisenka]

And where is webpack/dev.config.babel.js?

[GrzegorzZajac000]

I added it to previous comment: https://gist.github.com/GrzegorzZajac000/adb2a4888d1e64756a68e690460111b2

[GrzegorzZajac000]

@kisenka Any info about that bug?

[kisenka]

Also base.config.babel.js is missed. Please create ready-to-use repo where I can just install dependencies and see described behaviour. I don't have time to collect demos from pieces.

[vitortalaia]

Hi @kisenka!

I'm having the same problem of getting [object Object] as the output, I'm trying to use the loader in a Vue.js project, so it could be a problem with other loaders (who knows ¯_(ツ)_/¯). Here is a way for you to reproduce the problem: https://github.com/vitortalaia/sprite-svg-test. You can simply run npm run dev to see what is happening.

Thanks!

[kisenka]

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

[vitortalaia]

@kisenka It worked like a charm, I didn't really understand why though :laughing:

Thanks!!! :heart:

[kisenka]

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

[GrzegorzZajac000]

esModule: false works also in my case ;)

[khanharis87]

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)

[angelov-a]

Using Vue CLI 3.0 with esModule: false as well.
JS imports work as expected but CSS don't.

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

Input:
background: url('../img/icn/arrw.svg');

Current output
background: url(../../C:/myApp/src/img/icn/arrw.svg);

Expected output
background-image: url("/dist/icons-3eb580.svg#arrw-usage");

[kisenka]

@angelov-a don't use file-loader with svg-sprite-loader

[angelov-a]

It doesn't make a difference if I do .use('svg-sprite-loader') or any other string.

[kisenka]

Ok, I need a reproducible demo then.

[angelov-a]

Just a clean install of Vue CLI + svg-sprite-loader:
https://github.com/angelov-a/svg-sprite-loader-vue-cli-bug

[MarkiyanPyts]

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

issue ?

[AndreiSoroka]

@MarkiyanPyts did you created an issue?

[meibin08]

@angelov-a I have the same isusse

before compiling

after compiling