fix(react): add babel/core when babel/preset-react is preset (#18462)

packages/react-native/src/generators/init/init.ts

@@ -12,7 +12,10 @@ import { Schema } from './schema';
 
 import { jestInitGenerator } from '@nx/jest';
 import { detoxInitGenerator } from '@nx/detox';
-import { babelPresetReactVersion } from '@nx/react/src/utils/versions';
+import {
+  babelCoreVersion,
+  babelPresetReactVersion,
+} from '@nx/react/src/utils/versions';
 import { initGenerator as jsInitGenerator } from '@nx/js';
 
 import {
@@ -109,6 +112,7 @@ export function updateDependencies(host: Tree) {
       'react-native-svg-transformer': reactNativeSvgTransformerVersion,
       'react-native-svg': reactNativeSvgVersion,
       '@babel/preset-react': babelPresetReactVersion,
+      '@babel/core': babelCoreVersion,
       ...(isPnpm
         ? {
             '@babel/runtime': babelRuntimeVersion, // @babel/runtime is used by react-native-svg

packages/react/migrations.json

@@ -97,6 +97,12 @@
       "implementation": "./src/migrations/update-16-2-0-remove-package/update-16-2-0-remove-package"
     },
     "remove-types-react-router-dom": {
+      "cli": "nx",
+      "version": "16.7.0-beta.2",
+      "description": "Add @babel/core to package.json if @babel/preset-react is present",
+      "implementation": "./src/migrations/update-16-7-0/add-babel-core"
+    },
+    "add-babel-core": {
       "cli": "nx",
       "version": "16.3.0-beta.2",
       "description": "Remove @types/react-router-dom from package.json",

packages/react/src/generators/application/lib/install-common-dependencies.ts

@@ -1,5 +1,6 @@
 import { addDependenciesToPackageJson, Tree } from '@nx/devkit';
 import {
+  babelCoreVersion,
   babelPresetReactVersion,
   lessVersion,
   sassVersion,
@@ -37,6 +38,7 @@ export function installCommonDependencies(
       // babel-loader is currently included in @nx/webpack
       // TODO(jack): Install babel-loader and other babel packages only as needed
       devDependencies['@babel/preset-react'] = babelPresetReactVersion;
+      devDependencies['@babel/core'] = babelCoreVersion;
     }
   }
 

packages/react/src/generators/library/lib/install-common-dependencies.ts

@@ -6,6 +6,7 @@ import {
 } from '@nx/devkit';
 import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies';
 import {
+  babelCoreVersion,
   babelPresetReactVersion,
   lessVersion,
   reactDomVersion,
@@ -56,7 +57,10 @@ export function installCommonDependencies(
       addDependenciesToPackageJson(
         host,
         {},
-        { '@babel/preset-react': babelPresetReactVersion }
+        {
+          '@babel/preset-react': babelPresetReactVersion,
+          '@babel/core': babelCoreVersion,
+        }
       )
     );
   }

packages/react/src/migrations/update-16-7-0/add-babel-core.spec.ts

@@ -0,0 +1,32 @@
+import { Tree, readJson, updateJson } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import addBabelCore from './add-babel-core';
+
+describe('update-16-7-0-add-babel-core', () => {
+  let tree: Tree;
+
+  beforeEach(() => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it('should add @babel/core to package.json', async () => {
+    updateJson(tree, 'package.json', (json) => {
+      json.devDependencies['@babel/preset-react'] = '*';
+      return json;
+    });
+
+    await addBabelCore(tree);
+
+    expect(
+      readJson(tree, 'package.json').devDependencies['@babel/core']
+    ).toBeDefined();
+  });
+
+  it('should not add @babel/core to package.json if preset-react is not available', async () => {
+    await addBabelCore(tree);
+
+    expect(
+      readJson(tree, 'package.json').devDependencies['@babel/core']
+    ).not.toBeDefined();
+  });
+});

packages/react/src/migrations/update-16-7-0/add-babel-core.ts

@@ -0,0 +1,21 @@
+import {
+  Tree,
+  addDependenciesToPackageJson,
+  formatFiles,
+  readJson,
+} from '@nx/devkit';
+import { babelCoreVersion } from '../../utils/versions';
+
+export default async function addBabelCore(tree: Tree): Promise<void> {
+  const packageJson = readJson(tree, 'package.json');
+  if (packageJson?.devDependencies['@babel/preset-react']) {
+    addDependenciesToPackageJson(
+      tree,
+      {},
+      {
+        '@babel/core': babelCoreVersion,
+      }
+    );
+    await formatFiles(tree);
+  }
+}

packages/react/src/utils/versions.ts

@@ -15,6 +15,7 @@ export const typesReactIsVersion = '18.2.1';
 export const typesNodeVersion = '18.14.2';
 
 export const babelPresetReactVersion = '^7.14.5';
+export const babelCoreVersion = '^7.14.5';
 
 export const styledComponentsVersion = '5.3.6';
 export const typesStyledComponentsVersion = '5.1.26';