Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@svgr/babel-plugin-transform-svg-component] Fix parsing error of JSX template export statements #225

Merged
merged 1 commit into from
Nov 8, 2018

Conversation

arcticicestudio
Copy link
Contributor

@arcticicestudio arcticicestudio commented Nov 7, 2018

When enabling the ref option the compilation will fail due to a SyntaxError on the unexpected token <:

ERROR in ./src/components/molecules/core/ErrorState404/styled/svg/fragments/space.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: Unexpected token (2:52)
  1 | /* @babel/template */;
> 2 | const ForwardRef = React.forwardRef((props, ref) => <SvgSpace svgRef={ref} {...props} />)
    |                                                    ^
  3 | 
  4 | export default __webpack_public_path__ + "static/space.fea3855e.svg";
  5 | export { ForwardRef as ReactComponent }

This is caused by the util function getExport that creates the JSX export statements.
The root cause is that the Babel's AST template function is called without adding the jsx plugin which results in the unexpected token < which is part of the JSX spec.

To fix the error the jsx plugin has been added to the array of enabled plugins for the Babel AST template.

When enabling the `ref` option the compilation will fail due to a `SyntaxError` on the _unexpected token_ `<`:

```sh
ERROR in ./src/components/molecules/core/ErrorState404/styled/svg/fragments/space.svg
Module build failed (from ./node_modules/@svgr/webpack/lib/index.js):
SyntaxError: Unexpected token (2:52)
  1 | /* @babel/template */;
> 2 | const ForwardRef = React.forwardRef((props, ref) => <SvgSpace svgRef={ref} {...props} />)
    |                                                    ^
  3 | 
  4 | export default __webpack_public_path__ + "static/space.fea3855e.svg";
  5 | export { ForwardRef as ReactComponent }
```

This is caused by [util function `getExport`][src-util-func] that creates the JSX export statements.
The problem causing the error is that the [Babel's AST template function][babel-doc-template] is called without adding the `jsx` plugin which results in the _unexpected token_ `<` which is part of the JSX spec.

To fix the error the `jsx` plugin has been added to the array of enabled plugins for the Babel AST template.

[babel-doc-template]: https://babeljs.io/docs/en/babel-template#templatecode-opts
[src-util-func]: https://github.com/smooth-code/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/util.js#L61
[src-default-template]: https://github.com/smooth-code/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/index.js
@vercel
Copy link

vercel bot commented Nov 7, 2018

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

@arcticicestudio arcticicestudio changed the title Fix parsing error of JSX template exports defs Fix parsing error of JSX template export statements Nov 7, 2018
@codecov
Copy link

codecov bot commented Nov 7, 2018

Codecov Report

Merging #225 into master will not change coverage.
The diff coverage is 0%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #225   +/-   ##
=======================================
  Coverage   88.92%   88.92%           
=======================================
  Files          21       21           
  Lines         352      352           
  Branches      105      105           
=======================================
  Hits          313      313           
  Misses         33       33           
  Partials        6        6
Impacted Files Coverage Δ
...s/babel-plugin-transform-svg-component/src/util.js 76.66% <0%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d3ada55...2f87a51. Read the comment docs.

@arcticicestudio arcticicestudio changed the title Fix parsing error of JSX template export statements [@svgr/babel-plugin-transform-svg-component] Fix parsing error of JSX template export statements Nov 8, 2018
@gregberge gregberge merged commit 1e56309 into gregberge:master Nov 8, 2018
@gregberge
Copy link
Owner

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants