Update the default JSX pragma to React instead of @wordpress/element (W…

…ordPress#54494)
faisal-alvi · Sep 28, 2023 · 429e645 · 429e645
1 parent 46995a2
commit 429e645
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/babel-plugin-import-jsx-pragma/README.md b/packages/babel-plugin-import-jsx-pragma/README.md
@@ -38,7 +38,7 @@ _Note:_ `@wordpress/babel-plugin-import-jsx-pragma` is included in `@wordpress/b
 
 As the `@babel/plugin-transform-react-jsx` plugin offers options to customize the `pragma` to which the transform references, there are equivalent options to assign for customizing the imports generated.
 
-For example, if you are using the `@wordpress/element` package, you may want to use the following configuration:
+For example, if you are using the `react` package, you may want to use the following configuration:
 
 ```js
 // .babelrc.js
@@ -49,7 +49,7 @@ module.exports = {
 			{
 				scopeVariable: 'createElement',
 				scopeVariableFrag: 'Fragment',
-				source: '@wordpress/element',
+				source: 'react',
 				isDefault: false,
 			},
 		],

diff --git a/packages/babel-preset-default/CHANGELOG.md b/packages/babel-preset-default/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 -   The bundled `browserslist` dependency has been updated from requiring `^4.21.9` to requiring `^4.21.10` ([#54657](https://github.com/WordPress/gutenberg/pull/54657)).
 
+## Enhancements
+
+-   Use `react` as the default scope variable for JSX pragma instead of `@wordpress/element`.
+
 ## 7.26.0 (2023-09-20)
 
 ## 7.25.0 (2023-08-31)

diff --git a/packages/babel-preset-default/index.js b/packages/babel-preset-default/index.js
@@ -80,7 +80,7 @@ module.exports = ( api ) => {
 				{
 					scopeVariable: 'createElement',
 					scopeVariableFrag: 'Fragment',
-					source: '@wordpress/element',
+					source: 'react',
 					isDefault: false,
 				},
 			],

diff --git a/packages/babel-preset-default/package.json b/packages/babel-preset-default/package.json
@@ -37,10 +37,10 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/babel-plugin-import-jsx-pragma": "file:../babel-plugin-import-jsx-pragma",
 		"@wordpress/browserslist-config": "file:../browserslist-config",
-		"@wordpress/element": "file:../element",
 		"@wordpress/warning": "file:../warning",
 		"browserslist": "^4.21.10",
-		"core-js": "^3.31.0"
+		"core-js": "^3.31.0",
+		"react": "^18.2.0"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/react-native-editor/babel.config.js b/packages/react-native-editor/babel.config.js
@@ -41,14 +41,14 @@ module.exports = function ( api ) {
 					/node_modules\/(react-native|@react-native-community|@react-navigation|react-native-reanimated)/,
 			},
 			{
-				// Auto-add `import { createElement } from '@wordpress/element';` when JSX is found.
+				// Auto-add `import { createElement } from 'react';` when JSX is found.
 				plugins: [
 					[
 						'@wordpress/babel-plugin-import-jsx-pragma',
 						{
 							scopeVariable: 'createElement',
 							scopeVariableFrag: 'Fragment',
-							source: '@wordpress/element',
+							source: 'react',
 							isDefault: false,
 						},
 					],