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!

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