Roots Discourse

Importing svg.js 3.0 fails because of spread operator

I’m trying to manipulate a couple of SVGs in a Sage 9 theme, but I’m having trouble importing the latest version of svg.js.

The library is imported like this: import { SVG } from '@svgdotjs/svg.js'; but the webpack compiler is complaining afterwards: You may need an appropriate loader to handle this file type.. All the errors are lines that use the spread operator.

Is there are loader available to work around this issue, or am I importing the library incorrectly?

I’ve been going through the Sage’s webpack config to find out if I can fix the error myself, but I’m at a loss.

I tried adding a .babelrc at the root of my theme, containing the following:

{
  "presets": ["@babel/preset-es2015"]
}

As I understand it, Sage uses Bublé as opposed to Babel and the config is handled in webpack.config.js and the spread operator is handled using this rule using objectAssign: 'Object.assign':

      {
        test: /\.js$/,
        exclude: [/node_modules(?![/|\\](bootstrap|foundation-sites))/],
        use: [
          { loader: 'cache' },
          { loader: 'buble', options: { objectAssign: 'Object.assign' } },
        ],
      },

So Sage supposedly handles these use-cases, so I’m not sure why webpack chokes on code like this:

  font (name, src, params = {}) {
    return this.rule('@font-face', {
      fontFamily: name,
      src: src,
      ...params
    })
  }