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 https://unpkg.com/next@4.1.4/dist/server/build/babel/preset.js which uses babel-plugin-react-require - which has a bug, as documented above.

This issue should be closed, and an issue filed on https://github.com/vslinko/babel-plugin-react-require instead.

+10

ljharb on Nov 7, 2017

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

JuanCaicedo on Nov 7, 2017

@ljharb I just published the PR to babel-plugin-react-require: https://github.com/vslinko/babel-plugin-react-require/pull/18

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

🙌

timneutkens on Oct 1, 2018

@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: https://github.com/zeit/next.js/pull/6281

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

pRdm on Apr 18, 2019

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

alecmev on Apr 28, 2018

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.

MrOpperman on Mar 8, 2018

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

srosset81 on Jan 20, 2019

@ljharb

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 https://github.com/babel/babel/pull/5735).

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 https://github.com/babel/babel/issues/586 and https://github.com/babel/babel/issues/2135 and https://github.com/babel/babel/issues/2504.

alecmev on Apr 28, 2018