kuzivany / rollup-plugin-svgi

Import SVG files as JSX components
MIT License
4 stars 1 forks source link

Unexpected token error when importing font-awesome SVG #2

Open alex996 opened 5 years ago

alex996 commented 5 years ago

First of all, thanks for publishing this package! It seems to be the only rollup plugin for SVGs that is compatible with preact. (I've tried rollup-plugin-react-svg and rollup-plugin-svg-to-jsx with aliases, to no avail)

Anyway, I was hoping to use this plugin with @fortawesome/fontawesome-free icons, but I keep running into the following error:

Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

Any idea what's causing it? Font Awesome SVGs seems to have compliant markup. Here's a reproduction

// index.js
import { h } from 'preact'
import GitHub from '@fortawesome/fontawesome-free/svgs/brands/github.svg'
console.log(<GitHub />)
// rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import svg from 'rollup-plugin-svgi'
import babel from 'rollup-plugin-babel'

export default {
  input: 'src/index.js',
  output: {
    file: `dist/bundle.js`,
    format: 'iife'
  },
  plugins: [
    resolve(),
    svg({
      options: {
        jsx: 'preact',
      }
    }),
    babel({
      exclude: 'node_modules/**'
    })
  ]
}
// .babelrc
{
  "plugins": [["@babel/transform-react-jsx", { "pragma": "h" }]]
}
// package.json
"devDependencies": {
  "@babel/core": "^7.3.4",
  "@babel/plugin-transform-react-jsx": "^7.3.0",
  "rollup": "^1.6.0",
  "rollup-plugin-babel": "^4.3.2",
  "rollup-plugin-node-resolve": "^4.0.1",
  "rollup-plugin-svgi": "^0.2.0"
},
"dependencies": {
  "@fortawesome/fontawesome-free": "^5.7.2",
  "preact": "^10.0.0-alpha.2"
}
canab commented 4 years ago

Have the save error. It is not related to svg file, something wrong with rollup config (babel + typescript)