babel-plugin-inline-react-svg
babel-plugin-inline-react-svg copied to clipboard
airbnb
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 attributes like stroke-width="2.5".
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"
]
}
@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.
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 [email protected] 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 .
@catamphetamine @DiederikvandenB can either of you confirm that you are transpiling modules, since otherwise import statements won’t work in node?
@lxcid same question - are you transpiling modules? whats your babel config?
@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"]
}
}
]
]
}
package.json
{
"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"
}
}
@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.
@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.
{ "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
}
]
}
}
]
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)
Anyone solved this issue? SyntaxError: Unexpected token (1:1)
I got the same issue as @jcousins-ynap
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
