babel-plugin-inline-react-svg: Module build failed: SyntaxError: Unexpected token (1:1)

If I specify plugin config in .babelrc it throws the error.

ERROR in ./src/pages/Application.js
Module build failed: SyntaxError: c:/dev/.../Application.js: Unexpected token (1:1)

> 1 | import React, { Component } from 'react'
    |  ^
{
  "presets": ...,
  "plugins": [
    ...,
    ["inline-react-svg", {
      "svgo": false
    }]
  ]
}

If I then use just "inline-react-svg" in .babelrc then it doesn’t throw the error. But in the default mode it discards half of <svg/> attributes like stroke-width="2.5".

About this issue

  • Original URL
  • State: open
  • Created 6 years ago
  • Reactions: 2
  • Comments: 17

Most upvoted comments

@ljharb - I can confirm I experience a similar issue. "babel-plugin-inline-react-svg": "~0.5.4",

And a very simple .babelrc:

"pugins": [
    [
      "inline-react-svg",
      { "svgo": false }
    ]  
  ],

When setting svgo:false my application produces: SyntaxError: Unexpected token (1:1) in the console as well.

Hi, not sure if it is the same problem you all have but I came across this before when adding some new SVG to my project and solved it by removing the first line from my SVG files ie. the <?xml version="1.0" encoding="utf-8"?> part

hmm. honestly i dont know that that is my issue. i’m going to just retract my comment, please ignore it. thanks for the response.

On Mon, Jul 2, 2018 at 3:09 AM Jordan Harband notifications@github.com wrote:

@tsiq-swyx https://github.com/tsiq-swyx it doesn’t look like you’re transpiling modules. This plugin puts in import statements, and node doesn’t support that unflagged, so you’ll need to transpile modules to require.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/airbnb/babel-plugin-inline-react-svg/issues/38#issuecomment-401692155, or mute the thread https://github.com/notifications/unsubscribe-auth/AiT1ghpWFP3OOA8LhlPc4anXimRV3vZKks5uCccngaJpZM4Su9WH .