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

@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.

from babel-plugin-inline-react-svg.

from babel-plugin-inline-react-svg.

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

from babel-plugin-inline-react-svg.

I can confirm this bug.

from babel-plugin-inline-react-svg.

Can either of you compare it to v0.5.1?

from babel-plugin-inline-react-svg.

using v0.5.3 and can confirm this happening. not sure if its interacting with my other plugins:

{
  "presets": [
    "env", "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-es2015-classes",
    "transform-object-rest-spread",
    "css-modules-transform",
    "inline-react-svg"
  ]
}

from babel-plugin-inline-react-svg.

@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.

from babel-plugin-inline-react-svg.

@catamphetamine @DiederikvandenB can either of you confirm that you are transpiling modules, since otherwise import statements won’t work in node?

from babel-plugin-inline-react-svg.

Can confirm it happen in v1.0.0

from babel-plugin-inline-react-svg.

@lxcid same question - are you transpiling modules? whats your babel config?

from babel-plugin-inline-react-svg.

@ljharb here is mine:

{
    "plugins": [
        ["@babel/transform-react-jsx", {
            "pragma": "h"
        }],
        ["@babel/transform-runtime", {
            "regenerator": true
        }],
        ["inline-react-svg", {
            "svgo": false
        }],
    ],
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ]
    ]
}

{
  "name": "tcs",
  "version": "0.14.2",
  "description": "Turtle Control Software",
  "main": "index.js",
  "scripts": {
    "watch": "parcel watch ./client/src/index.html --out-dir ./client/dist --public-url ./ --no-hmr",
    "serve": "parcel serve ./client/src/index.html --out-dir ./client/dist --public-url / -p 3000",
    "build": "parcel build ./client/src/index.html --out-dir ./client/dist --public-url ./",
    "lint": "eslint --ext .js client/src/"
  },
  "repository": "git+https://github.com/TurtleRover/tcs.git",
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-react-jsx": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/template": "^7.2.2",
    "eslint": "^5.10.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "node-sass": "^4.11.0",
    "parcel-bundler": "1.11.0",
    "babel-plugin-inline-react-svg": "^1.0.1"
  },
  "dependencies": {
    "@hyperapp/logger": "^0.5.0",
    "hyperapp": "^1.2.9",
    "keyboardjs": "^2.5.1",
    "lodash": "^4.17.11",
    "nipplejs": "^0.7.3",
    "socket.io-client": "^2.2.0"
  }
}

from babel-plugin-inline-react-svg.

@stsdc The transform-react-jsx transform is the problem; you'll need to change your config ordering so that runs after inline-react-svg, I think.

Specifically, this transform is for react, so if you're using a different jsx project, it's not expected to work in every configuration.

from babel-plugin-inline-react-svg.

@himadrinath i wouldn’t recommend transpiling code in node_modules.

from babel-plugin-inline-react-svg.

In that case this might be related to #49.

from babel-plugin-inline-react-svg.

{ "svgo": false }

Why do you need to set svgo to false ? I had the samee issue theen following the instructions from the babel-plugin-inline-react-svg documentation solved it :

    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "removeAttrs": { "attrs": "(data-name)" }
            },
            {
              "cleanupIDs": true
            }
          ]
        }
      }
    ]

from babel-plugin-inline-react-svg.

I can confirm this issue in v1.1.0.

babel.config.js:

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react'
  ],
  sourceType: 'unambiguous',
  plugins: [
    [
      'inline-react-svg',
      {
        svgo: false
      }
    ]
  ]
};

Test.svg:

<?xml version="1.0" encoding="utf-8"?>
<!--Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)-->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 30" style="enable-background:new 0 0 18 30" xml:space="preserve">
<path d="M0,15l15,15l3-3L6,15L18,3l-3-3L0,15z" style="fill:#FFFFFF"/>
</svg>

index.js

import React from 'react';
import Sprite from './sprite.svg';

const Component = () => (
  <Sprite />
);

export default Component;

shell output:

> babel --config-file ./babel.config.js index.js --out-file dist.js

SyntaxError: /Users/j.cousins/Dev/tests/babel-inline-react-svg-test/index.js: Unexpected token (1:1)

from babel-plugin-inline-react-svg.

Anyone solved this issue? SyntaxError: Unexpected token (1:1)

I got the same issue as @jcousins-ynap

from babel-plugin-inline-react-svg.