Parcel: Vue event shorthand error when building

[andrewbanchich]

I am getting this error when running parcel build. I use the Vue event shorthand (e.g. @click) so I thought it could be related to that, but looking at the component code itself, I don't think it is. I didn't use that shorthand anywhere on it.

🚨 Error in parsing SVG: Invalid attribute name
Line: 0
Column: 201
Char: @

[mrobakowski]

I'm getting the same. Doesn't happen when I do parcel build --no-minify btw.

[DeMoorJasper]

This is an svgo error.

(At least it seems like one, same error template as other svgo errors i've seen and only happens in minify mode 99% sure it is.)

[mrobakowski]

I'm debugging this right now. I've got inline svg in a vue component template. Seems like parcel's extracted svg from the template and is trying to optimize it, even though it still has some vue-specific syntax.

[mrobakowski]

So yeah, turns out running htmlnano on a vue template which contains an svg with vue event shortcuts is a bad idea. A quick and dirty fix is just checking whether the html asset is a part of a vue file, and not minify it in that case:

  // src/assets/HTMLAsset.js, lines 157-161
  async transform() {
    if (this.options.minify && !this.basename.endsWith(".vue")) {
      await htmlnanoTransform(this);
    }
  }

[mrobakowski]

Btw, turning minification off for this one case isn't as bad as one may think. The template ends up being js code either way, and that is minified.

[DeMoorJasper]

It's not a big issue to turn off minification for this, but it's a bit of a dirty fix, perhaps we could pass some custom options per asset, so that we still develop each asset type in a plugin style and independent of each other and the core

[mrobakowski]

In the meantime, if there's anyone that needs a fix for this urgently (like me :smile:), they can use a plugin.

index.js

module.exports = function(bundler) {
  bundler.addAssetType('html', require('path').resolve(__dirname + '/HTMLAsset.js'))
}

HTMLAsset.js

const HTMLAssetsOfficial = require('parcel-bundler/src/assets/HTMLAsset.js');

class HTMLAsset extends HTMLAssetsOfficial {
  async transform() {
    if (this.basename.endsWith(".vue")) return;
    await super.transform();
  }
}

module.exports = HTMLAsset;

package.json

{
  "name": "parcel-plugin-whatevernameyouwish",
  "version": "0.0.1"
}

Throw the three files above into a folder named parcel-plugin-whatevernameyouwish in your project and add

"parcel-plugin-whatevernameyouwish": "file:./parcel-plugin-whatevernameyouwish",

to your main package.json dev-dependencies

[DeMoorJasper]

@mrobakowski Probably easier to add a htmlnano config to disable svg minification
.htmlnanorc

{
  "minifySvg": false,
  "collapseWhitespace": "conservative",
  "minifyCss": {
    "safe": true
  }
}

[ghost]

A similar thing seems to happen with Polymer 2.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.