Vue-svg-loader: Edge support

[dcrystalj]

I have the following config:

   .oneOf('inline')
      .resourceQuery(/inline/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [{ removeDoctype: true }, { removeComments: true }],
          removeViewBox: false,
        },
      })
      .end()
      .end()

When i import component like this:

import SomeSvg from '@/assets/hide.svg?inline';

this breaks in edge browser.

Looks like it is missing extra transpilation.

In edge i get following error:

SCRIPT1028: Expected identifier, string or number

and line error in code is 'inline strict';

[Shepard]

I managed to get this to work in Webpack at least by letting the babel-loader run on the SVG files after the vue-svg-loader, like this (the execution order in "use" is reversed):

{
    test: /\.svg$/,
    use: [
        'babel-loader',
        'vue-svg-loader',
    ]
}

Not sure what the equivalent for your bundler would be but basically as long as there's another step transpiling the resulting JavaScript to an older JavaScript version that Edge can deal with it should work.

[cannap]

how can i do tthat in the new vue cli?

 chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule.use('vue-svg-loader').loader('vue-svg-loader')
  },

thanks

[cannap]

Here the solution for the new vue cli
thanks to https://github.com/chymz

 chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    /* svgRule.use('vue-svg-loader').loader('vue-svg-loader') */
    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }

[Drew-Garratt]

In our build, we are using NUXT and are something much more similar to the original posting.
Finding it tricky to implement the fix while using the oneOf syntax.

Any suggestions would be greatly appreciated.

config.module.rules.push({
    test: /\.svg$/,
    use: 'babel-loader',
    oneOf: [
        {
        resourceQuery: /inline/, // foo.svg?inline
        loader: 'vue-svg-loader',
        options: {
            svgo: {
            plugins: [
                { removeDoctype: true },
                { removeComments: true },
                { removeViewBox: false }
            ]
            }
        }
        },
        {
        loader: 'url-loader',
        options: {
            limit: 1000, // 1KO
            name: 'img/[name].[hash:7].[ext]'
        }
        }
    ],
    exclude: /(node_modules)/
})

[terrymun]

Just want to say that I've ran into exactly the same issue, and @cannap's solution worked perfectly fine. It now works for Edge and IE11 ❤️

[Rain-Arro]

@DrewLinzmaierGarratt
I found a solution for NUXT. This code supports both background and inline svg.

In nuxt.config.js file, add the following code.

const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));
svgRule.test = /\.(png|jpe?g|gif|webp)$/;
config.module.rules.push({
  test: /\.svg$/,
  oneOf: [
    {
      resourceQuery: /inline/,
      use: [
        'babel-loader',
        {
          loader: 'vue-svg-loader',
        },
      ],
    },
    {
      loader: 'file-loader',
      query: {
        name: 'assets/[name].[hash:8].[ext]',
      },
    },
  ],
});

You will also need to install babel plugin for object rest spread support.

Add these as devDependencies in package.json

"@babel/preset-env": "^7.4.3",

"@babel/plugin-proposal-object-rest-spread": "^7.4.3",



md5-ed8abd045da9433e4203aa47d21b5ea5



{
  "presets": [
    "@babel/preset-env",
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

[JessicaSachs]

Any desire to make this work out of the box? Or atleast to put in giant, bold letters a link to how to make it IE11 compatible? Just spent my morning debugging in IE 😭

[dcrystalj]

I can confirm @cannap solution works!

Here is my full blown config in case anyone will need it.

svgRule
      .oneOf('raw')
      .resourceQuery(/raw/)
      .use('raw-loader')
      .loader('raw-loader')
      .end()
      .end()
      .oneOf('base64')
      .resourceQuery(/base64/)
      .use('url-loader')
      .loader('url-loader')
      .end()
      .end()
      .oneOf('inline')
      .resourceQuery(/inline/)
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo: {
          plugins: [{ removeDoctype: true }, { removeComments: true }],
          removeViewBox: false,
        },
      })
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]',
      });

I believe this babel-loader thing should be included in examples by default to avoid frustrations for edge.

[jqweryjson]

@cannap YOU.SAVE.MY.LIVE Please describe this as note at https://vue-svg-loader.js.org/

[cannap]

dont thank me thank https://github.com/chymz :D

[ladislavsulc]

Hi @DrewLinzmaierGarratt, could you, please, help me with this? Where exactly in the Nuxt config shall I put this? Does it still work like this or any updates on it? I use the nuxt-svg module (which uses also this loader) and have this error in both Edge and IE11.

Any help much appreciated.

Thank you.

[psnoonan]

@DrewLinzmaierGarratt
I used @DigiSplit's solution, but didn't want to mess with Nuxt's global babel config.
So, I added the object spread plugin to the babel-loader options for inline svgs only.

{
  resourceQuery: /inline/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        plugins: ['@babel/plugin-proposal-object-rest-spread'],
      },
    },
    {
      loader: 'vue-svg-loader',
      options: { svgo: false },
    },
  ],
},

[kylops]

Use babel loader together with vue-svg-loader will fix the IE issue, webpack config will look like this:

use: [
    {
        loader: 'babel-loader'
    },
    {
        loader: 'vue-svg-loader',
            options: {
              svgo: {
                plugins: [{ removeDimensions: false }, { removeViewBox: false }, {cleanupIDs: false}]
              }
            }
     }
]

If you see Unexpected token error like this ...rest,
use transform-object-rest-spread to transform rest properties.

Also if you are using es2015 preset, make sure to have a separate .babelrc. The official documentation of ES2015 states that it'll detect the presence of BabelJS and use that. However, it wasn't picking up the Babel configuration settings within the Webpack config file.
The .bebelrc will like this:

{
  "presets": ["es2015"],
  "plugins": ["transform-object-rest-spread"]
}

[coderjeet19]

I ran into the exact same issue in my vue-cli project where the app.js.map contained rest spreads for every svg being loaded to the SPA.
I am using vue-svg-loader version v0.12.0.
I tried the solution mentioned by @cannap , which did not work for me.
I tried using .babelrc with
{
"presets": ["babel/preset-env"],
"plugins": ["transform-object-rest-spread"]
}
This also didn't work.

Finally I just downgraded the vue-svg-loader to v0.10.0, and the rest spreads disappeared.

This looks like a version specific issue to me. Did anyone get this working for vue-svg-loader v0.12.0?

[LXHFIGHT]

That is amazing! It works @Shepard