Open kripod opened 3 years ago
Downgrading to React 16.14 has fixed the issue for now. I'm not sure whether an issue should be filed towards Babel or React, too.
I'm not sure either - but this plugin very explicitly adds an import of React if none exists, so I think this (and many other ecosystem transforms) can't likely work transparently with the new jsx transform.
I'm experiencing the same issue.
Same problem here. There should at least be a warning somewhere that this is currently incompatible with the new jsx transform.
Every jsx-related transform is incompatible with it.
Not really a solution for this issue, but for those of you who use Next.js v10, you can try next/image
as a workaround until this package gets fixed.
For Next.js 10, I'm currently using the following workaround:
/* .babelrc */
{
"presets": [
[
"next/babel",
{
// TODO: Remove when airbnb/babel-plugin-inline-react-svg#91 gets fixed
"preset-react": { "runtime": "classic", "pragma": "__jsx" }
}
]
],
"plugins": [
[
// TODO: Remove when airbnb/babel-plugin-inline-react-svg#91 gets fixed
// Source: https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts
"next/dist/build/babel/plugins/jsx-pragma",
{
"module": "react",
"importAs": "React",
"pragma": "__jsx",
"property": "createElement"
}
],
"babel-plugin-inline-react-svg"
]
}
Also, I've opened an issue to support simplifying the config given above:
/* .babelrc */
{
"presets": [
[
"next/babel",
{ "preset-react": { "runtime": "classic" } }
]
],
"plugins": ["babel-plugin-inline-react-svg"]
}
Please fix the bug for react v17 / NextJS.
Please fix the bug for react v17 / NextJS.
Please be patient and consider supporting the developers of this project. That’s an example how you could help besides contributing code.
Hey fellas, I wrote a fix for this in my fork.
You can test this today using yarn add -D @simplyianm/babel-plugin-inline-react-svg
.
Here's my config which uses next
and emotion
:
{
"env": {
"production": {
"plugins": ["@emotion"]
}
},
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
"plugins": [
[
"@simplyianm/babel-plugin-inline-react-svg",
{
"noReactAutoImport": true,
"svgo": {
"plugins": [
{
"cleanupIDs": {
"minify": false
}
}
]
}
}
],
"@emotion"
]
}
Cheers!
https://github.com/airbnb/babel-plugin-inline-react-svg/pull/94
@macalinao Great job, thank you! I would love to see that being merged into this project.
any update?
nothing?
@ochmanski #94 isn't ready to land yet, so nope.
When importing an SVG, the new JSX transform doesn't work seamlessly along with React 17. The resulting component with inlined SVG data looks as follows:
Instead of something similar to: