Importing svg.js 3.0 fails because of spread operator

sage
,
1

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?

2

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
    })
  }
3

Any progress ever made on this? I encountered the same trying to use a third-party npm package and subsequently discovered that using object spread in any JS file throws an error. For example putting it in the init() function in a route throws:

error  Parsing error: Unexpected token ..

The particular package that initially triggered this for me is a Svelte component that errors out when trying to spread in props to a component -

<input {...other} value={inputValue} />

so, it doesn’t know what to do with {…other} and doesn’t compile. Svelte in general works just fine with the svelte-loader added to the Webpack config.

4

Unfortunately I haven’t heard anything more about this. I ended up using svg.js 2.7, because I had to meet a deadline, but that isn’t really a future-proof solution, of course.

1 Like
5

What worked for me was importing svg.js like this

import * as SVG from '@svgdotjs/svg.js'

then the main SVG method becomes available like this

SVG.SVG( '#idofsvgrapper' )

Important:
In your .eslintrc.js set ecmaVersion from 2017 to 2018

'parserOptions': {
    'ecmaFeatures': {
      'globalReturn': true,
      'generators': false,
      'objectLiteralDuplicateProperties': false,
      'experimentalObjectRestSpread': true,
    },
    'ecmaVersion': 2018,
    'sourceType': 'module',
  },

and it should work.

1 Like