@wordpress/babel-preset-default@4.0.0 is causing an "Identifier 'createElement' has already been declared" error

[ocean90]

Describe the bug
After upgrading to @wordpress/babel-preset-default 4.0.0 I'm seeing with the setup from here this error:

ERROR in ./blocks/team-list/edit.js 7:9
Module parse failed: Identifier 'createElement' has already been declared (7:9)
You may need an appropriate loader to handle this file type.
| import _inherits from "@babel/runtime/helpers/inherits";
| import { createElement } from "@wordpress/element";
> import { createElement } from "@wordpress/element";
|
| /**
 @ ./blocks/team-list/index.js 9:0-26 50:8-12
 @ ./blocks/index.js
 @ ./editor.js

To Reproduce

1. git clone --single-branch --branch gutenberg git@github.com:wearerequired/wp-team-list.git
2. cd wp-team-list
3. npm run build:js -- everything works
4. npm install @wordpress/babel-preset-default@4.0.0 --save
5. npm run build:js -- build is broken

Expected behavior
Step 3 and 5 should both successfully produce a build.

Additional context
Might be related to #13809 and/or #14106.

[swissspidy]

Currently facing the same issue at ampproject/amp-wp#1952

[swissspidy]

According to #13540 and the babel-preset-default changelog, one apparently does not have to manually include the @wordpress/babel-plugin-import-jsx-pragma plugin anymore.

Removing it from the setup resolves the issue for me.

[aduth]

According to #13540 and the babel-preset-default changelog, one apparently does not have to manually include the @wordpress/babel-plugin-import-jsx-pragma plugin anymore.

Ah, it seems the issue may then be that there's two separate instances of the @wordpress/babel-plugin-import-jsx-pragma plugin being applied, hence the error about the identifier already having been defined?

It makes sense, though in retrospect I don't think was as consciously considered as it should have been (i.e. upgrade instructions for those using both the preset and the plugin already). Furthermore, perhaps the plugin could be made more tolerant to being run twice. I suspect the issue is that, by the implementation, both encounter and decide at the occurrence of the JSX tag to add the import.

[youknowriad]

Anything to do here? Since 4.0.0 is a breaking change, I'm fine just closing the issue. We could also add a note somewhere in the CHANGELOG.

[swissspidy]

I think the changelog is quite clear. One just has to read it :-)

[youknowriad]

Got it, let's close :)

[gziolo]

I'm glad it was a version upgrade issue. The latest implementation should auto-detect whether createElement is in the scope and add proper pragma only when necessary.

[ocean90]

https://github.com/WordPress/gutenberg/blob/master/packages/babel-plugin-import-jsx-pragma/README.md#usage should still get an update.

[gziolo]

How should it be updated exactly? The referenced usage looks legitimate. I mean, I can update but I want to learn what’s is wrong there.

[ocean90]

As mentioned in the issue, when you use both plugins (as mentioned in Usage) or copy the example configuration from Options, you get the error due to the duplicate declaration.

[youknowriad]

It looks like the README is not using both presets at the same time, it seems correct as is for me? Anything I'm missing?

[ocean90]

@youknowriad Updated steps from #14381 (comment) to reproduce:

1. git clone --single-branch --branch master git@github.com:wearerequired/wp-team-list.git
2. cd wp-team-list
3. npm install
4. npm run build:js - everything works
5. Apply this diff: (which is was https://www.npmjs.com/package/@wordpress/babel-plugin-import-jsx-pragma#options is suggesting)

diff --git .babelrc .babelrc
index dcff30b..20fabb0 100644
--- .babelrc
+++ .babelrc
@@ -3,6 +3,14 @@
     "@wordpress/default"
   ],
   "plugins": [
+    [
+      "@wordpress/babel-plugin-import-jsx-pragma",
+      {
+        "scopeVariable": "createElement",
+        "source": "@wordpress/element",
+        "isDefault": false
+      }
+    ],
     [
       "@babel/transform-react-jsx", {
         "pragma": "createElement"

6. npm run build:js - Build is broken

[swissspidy]

(which is was https://www.npmjs.com/package/@wordpress/babel-plugin-import-jsx-pragma#options is suggesting

The difference is that this README does not mention @wordpress/default, which you are using. Kinda makes sense, as one might want to use it standalone.

The changelog for @wordpress/default however mentions that it is not necessary to manually include @wordpress/babel-plugin-import-jsx-pragma anymore when using the default config.

So, to be clear, are you suggesting to add a note to https://www.npmjs.com/package/@wordpress/babel-plugin-import-jsx-pragma#options a la "Not needed when already using @wordpress/default"?

[gziolo]

Yes, let’s do it. There might be some issues when versions of the plugin differ between preset and the plugin itself.

[gziolo]

I hope #14482 will help.