babel-plugin-inline-react-svg: Duplicate declaration "React"

I’m using this plugin with next.js, which uses babel-plugin-react-require . It seems that the changes in 3bab74c5587d33892fd2cb409df2ae3fad641b6e are conflicting with that. So now I get this:

Module build failed: TypeError: unknown: Duplicate declaration "React"
   5 | import _inherits from 'babel-runtime/helpers/inherits';
   6 | import React from 'react';
>  7 | import React from 'react';
     |        ^

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 9
  • Comments: 33

Most upvoted comments

The next/babel preset includes which uses babel-plugin-react-require - which has a bug, as documented above.

This issue should be closed, and an issue filed on instead.

I downgraded to v0.4.0 and this solved the problem. Not sure if the plugin is working well yet though

@ljharb I just published the PR to babel-plugin-react-require:

This issue can be closed now, as it’ll be out on Next.js soon.


@timneutkens this issue seems to be resurfacing with next@8.1.0, as babel-plugin-react-require@3.0.0 is listed as a dependency whereas the fix is in babel-plugin-react-require@3.0.1

see comments here:

not sure how to go about solving this apart from manually adding an import React statement?

@ljharb It only happens when there’s no pre-existing React import, which is why it has been surfacing only for those using babel-plugin-react-require, I presume.

Ran into the same issue a few minutes ago, resolved by downgrading to 5.1.

You may need an appropriate loader to handle this file type.
| import React from 'react';
| import React from 'react';
| import React from 'react';

Was the kind of error I was receiving on all files that imported an SVG file. This issue happened once I migrated to webpack 4.

It still doesn’t work with this config:

"next": "^7.0.2",
"babel-plugin-react-require": "^3.0.1",
"babel-plugin-inline-react-svg": "^1.0.1"

However it seems the babel-plugin-react-require is not required by nextjs anymore. Removing it and importing the React package manually on each file solves the problem. 😃


What happens if you re-order your config so “presets” comes before “plugins”?

The order doesn’t matter, preset plugin visitors are always chained after user-supplied plugin visitors, at least until plugin ordering gets revamped (starting with

This issue should be closed

It shouldn’t. As mentioned by @christophehurpeau, this plugin adds a React import per each SVG, without any involvement from babel-plugin-react-require. Consider the following fixture:

import MySvg1 from './close.svg';
import MySvg2 from './close.svg';

export function MyFunctionIcon() {
  return MySvg1;

It results in the following output:

import React from 'react';
import React from 'react';

// ...

This could be fixed by having a hasReactBeenEnsured flag in Program.enter, but, IMO, this plugin shouldn’t be adding a React import in the first place, for the same reasons Babel itself isn’t adding a React import when it transforms JSX, as outlined in and and