feat(js): do not generate root babel.config.json for babel projects (#17289)

docs/generated/packages/express/generators/application.json

@@ -50,10 +50,16 @@
         "type": "string",
         "description": "Frontend project that needs to access this application. This sets up proxy configuration."
       },
+      "swcJest": {
+        "type": "boolean",
+        "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
+        "default": false
+      },
       "babelJest": {
         "type": "boolean",
         "description": "Use `babel` instead `ts-jest`.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Use --swcJest instead for faster compilation"
       },
       "pascalCaseFiles": {
         "type": "boolean",

docs/generated/packages/node/generators/application.json

@@ -54,10 +54,16 @@
         "description": "Frontend project that needs to access this application. This sets up proxy configuration.",
         "x-priority": "important"
       },
+      "swcJest": {
+        "type": "boolean",
+        "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
+        "default": false
+      },
       "babelJest": {
         "type": "boolean",
-        "description": "Use `babel` instead of `ts-jest`.",
+        "description": "Use `babel` instead `ts-jest`.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Use --swcJest instead for faster compilation"
       },
       "pascalCaseFiles": {
         "type": "boolean",

docs/generated/packages/react/generators/application.json

@@ -92,8 +92,8 @@
         "default": false,
         "x-priority": "internal"
       },
-      "skipWorkspaceJson": {
+      "skipNxJson": {
-        "description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
+        "description": "Skip updating `nx.json` with default options based on values provided to this app.",
         "type": "boolean",
         "default": false,
         "x-priority": "internal"

docs/generated/packages/react/generators/host.json

@@ -73,7 +73,7 @@
         "default": false,
         "x-priority": "internal"
       },
-      "skipWorkspaceJson": {
+      "skipNxJson": {
         "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
         "type": "boolean",
         "default": false,

docs/generated/packages/react/generators/init.json

@@ -31,11 +31,6 @@
         "type": "boolean",
         "default": false
       },
-      "skipBabelConfig": {
-        "description": "Do not generate a root babel.config.json (if babel is not needed).",
-        "type": "boolean",
-        "default": false
-      },
       "skipHelperLibs": {
         "description": "Do not install  tslib.",
         "type": "boolean",

docs/generated/packages/react/generators/remote.json

@@ -78,7 +78,7 @@
         "default": false,
         "x-priority": "internal"
       },
-      "skipWorkspaceJson": {
+      "skipNxJson": {
         "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
         "type": "boolean",
         "default": false,

docs/generated/packages/web/generators/application.json

@@ -43,8 +43,8 @@
       "compiler": {
         "type": "string",
         "description": "The compiler to use",
-        "enum": ["babel", "swc"],
+        "enum": ["swc", "babel"],
-        "default": "babel",
+        "default": "swc",
         "x-priority": "important"
       },
       "bundler": {

docs/generated/packages/web/generators/init.json

@@ -37,11 +37,6 @@
         "type": "boolean",
         "default": false,
         "x-priority": "internal"
-      },
-      "skipBabelConfig": {
-        "description": "Do not generate a root babel.config.json (if babel is not needed).",
-        "type": "boolean",
-        "default": false
       }
     },
     "required": [],

docs/generated/packages/webpack/generators/webpack-project.json

@@ -21,7 +21,7 @@
         "type": "string",
         "enum": ["babel", "swc", "tsc"],
         "description": "The compiler to use to build source.",
-        "default": "babel"
+        "default": "swc"
       },
       "main": {
         "type": "string",

e2e/web/src/web.test.ts

@@ -7,7 +7,6 @@ import {
   killPorts,
   newProject,
   readFile,
-  removeFile,
   rmDist,
   runCLI,
   runCLIAsync,
@@ -100,10 +99,10 @@ describe('Web Components Applications', () => {
     checkFilesExist(`dist/libs/${libName}/_should_keep.txt`);
   }, 120000);
 
-  it('should emit decorator metadata when it is enabled in tsconfig', async () => {
+  it('should emit decorator metadata when --compiler=babel and it is enabled in tsconfig', async () => {
     const appName = uniq('app');
     runCLI(
-      `generate @nx/web:app ${appName} --bundler=webpack --no-interactive`
+      `generate @nx/web:app ${appName} --bundler=webpack --compiler=babel --no-interactive`
     );
 
     updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
@@ -155,6 +154,48 @@ describe('Web Components Applications', () => {
     );
   }, 120000);
 
+  it('should emit decorator metadata when using --compiler=swc', async () => {
+    const appName = uniq('app');
+    runCLI(
+      `generate @nx/web:app ${appName} --bundler=webpack --compiler=swc --no-interactive`
+    );
+
+    updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
+      const newContent = `${content}
+        function enumerable(value: boolean) {
+          return function (
+            target: any,
+            propertyKey: string,
+            descriptor: PropertyDescriptor
+          ) {
+            descriptor.enumerable = value;
+          };
+        }
+        function sealed(target: any) {
+          return target;
+        }
+
+        @sealed
+        class Foo {
+          @enumerable(false) bar() {}
+        }
+      `;
+      return newContent;
+    });
+
+    updateFile(`apps/${appName}/src/app/app.element.ts`, (content) => {
+      const newContent = `${content}
+        // bust babel and nx cache
+      `;
+      return newContent;
+    });
+    runCLI(`build ${appName} --outputHashing none`);
+
+    expect(readFile(`dist/apps/${appName}/main.js`)).toMatch(
+      /Foo=__decorate\(\[sealed\],Foo\)/
+    );
+  }, 120000);
+
   it('should support custom webpackConfig option', async () => {
     const appName = uniq('app');
     runCLI(
@@ -257,7 +298,7 @@ describe('CLI - Environment Variables', () => {
       `;
 
     runCLI(
-      `generate @nx/web:app ${appName} --bundler=webpack --no-interactive`
+      `generate @nx/web:app ${appName} --bundler=webpack --no-interactive --compiler=babel`
     );
 
     const content = readFile(main);
@@ -282,7 +323,7 @@ describe('CLI - Environment Variables', () => {
     const newCode2 = `const envVars = [process.env.NODE_ENV, process.env.NX_BUILD, process.env.NX_API, process.env.NX_WS_BASE, process.env.NX_WS_ENV_LOCAL, process.env.NX_WS_LOCAL_ENV, process.env.NX_APP_BASE, process.env.NX_APP_ENV_LOCAL, process.env.NX_APP_LOCAL_ENV, process.env.NX_SHARED_ENV];`;
 
     runCLI(
-      `generate @nx/web:app ${appName2} --bundler=webpack --no-interactive`
+      `generate @nx/web:app ${appName2} --bundler=webpack --no-interactive --compiler=babel`
     );
 
     const content2 = readFile(main2);
@@ -401,16 +442,16 @@ describe('index.html interpolation', () => {
     const srcPath = `apps/${appName}/src`;
     const indexPath = `${srcPath}/index.html`;
     const indexContent = `<!DOCTYPE html>
-    <html lang="en">
+    <html lang='en'>
       <head>
-        <meta charset="utf-8" />
+        <meta charset='utf-8' />
         <title>BestReactApp</title>
-        <base href="/" />
+        <base href='/' />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
-        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <link rel='icon' type='image/x-icon' href='favicon.ico' />
       </head>
       <body>
-        <div id="root"></div>
+        <div id='root'></div>
         <div>Nx Variable: %NX_VARIABLE%</div>
         <div>Some other variable: %SOME_OTHER_VARIABLE%</div>
         <div>Deploy Url: %DEPLOY_URL%</div>

packages/express/src/generators/application/schema.d.ts

@@ -10,6 +10,8 @@ export interface Schema {
   tags?: string;
   linter: Linter;
   frontendProject?: string;
+  swcJest?: boolean;
+  /** @deprecated use `swcJest` instead */
   babelJest?: boolean;
   js: boolean;
   pascalCaseFiles: boolean;

packages/express/src/generators/application/schema.json

@@ -50,10 +50,16 @@
       "type": "string",
       "description": "Frontend project that needs to access this application. This sets up proxy configuration."
     },
+    "swcJest": {
+      "type": "boolean",
+      "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
+      "default": false
+    },
     "babelJest": {
       "type": "boolean",
       "description": "Use `babel` instead `ts-jest`.",
-      "default": false
+      "default": false,
+      "x-deprecated": "Use --swcJest instead for faster compilation"
     },
     "pascalCaseFiles": {
       "type": "boolean",

packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap

@@ -8,7 +8,12 @@ export default {
   transform: {
     '^.+\\\\.[tj]sx?$': [
       '@swc/jest',
-      { jsc: { transform: { react: { runtime: 'automatic' } } } },
+      {
+        jsc: {
+          parser: { syntax: 'typescript', tsx: true },
+          transform: { react: { runtime: 'automatic' } },
+        },
+      },
     ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],

packages/jest/src/generators/jest-project/jest-project.spec.ts

@@ -60,15 +60,6 @@ describe('jestProject', () => {
     expect(tree.read('libs/lib1/jest.config.ts', 'utf-8')).toMatchSnapshot();
   });
 
-  it('should generate files w/babel-jest', async () => {
-    await jestProjectGenerator(tree, {
-      ...defaultOptions,
-      project: 'lib1',
-      babelJest: true,
-    } as JestProjectSchema);
-    expect(tree.exists('babel.config.json')).toBeTruthy();
-  });
-
   it('should alter project configuration', async () => {
     await jestProjectGenerator(tree, {
       ...defaultOptions,

packages/jest/src/generators/jest-project/lib/create-files.ts

@@ -21,7 +21,7 @@ export function createFiles(tree: Tree, options: NormalizedJestProjectSchema) {
     transformer = '@swc/jest';
     if (options.supportTsx) {
       transformerOptions =
-        "{ jsc: { transform: { react: { runtime: 'automatic' } } } }";
+        "{ jsc: { parser: { syntax: 'typescript', tsx: true }, transform: { react: { runtime: 'automatic' } } } }";
     }
   } else {
     transformer = 'ts-jest';
@@ -48,15 +48,6 @@ export function createFiles(tree: Tree, options: NormalizedJestProjectSchema) {
     tree.delete(join(projectConfig.root, './src/test-setup.ts'));
   }
 
-  if (options.babelJest && !tree.exists('babel.config.json')) {
-    tree.write(
-      'babel.config.json',
-      JSON.stringify({
-        babelrcRoots: ['*'],
-      })
-    );
-  }
-
   if (options.js) {
     tree.rename(
       join(projectConfig.root, 'jest.config.ts'),

packages/js/src/generators/library/library.ts

@@ -91,10 +91,6 @@ export async function projectGenerator(
     });
     tasks.push(viteTask);
   }
-  if (options.bundler === 'rollup') {
-    ensureBabelRootConfigExists(tree);
-  }
-
   if (options.linter !== 'none') {
     const lintCallback = await addLint(tree, options);
     tasks.push(lintCallback);
@@ -583,14 +579,6 @@ function getBuildExecutor(bundler: Bundler) {
   }
 }
 
-function ensureBabelRootConfigExists(tree: Tree) {
-  if (tree.exists('babel.config.json')) return;
-
-  writeJson(tree, 'babel.config.json', {
-    babelrcRoots: ['*'],
-  });
-}
-
 function getOutputPath(options: NormalizedSchema, destinationDir?: string) {
   const parts = ['dist'];
   if (destinationDir) {

packages/js/src/utils/add-babel-inputs.ts

@@ -1,5 +1,4 @@
 import {
-  formatFiles,
   joinPathFragments,
   readNxJson,
   Tree,
@@ -7,6 +6,8 @@ import {
   writeJson,
 } from '@nx/devkit';
 
+/** @deprecated Do not use this function as the root babel.config.json file is no longer needed */
+// TODO(jack): Remove This in Nx 17 once we don't need to support Nx 15 anymore. Currently this function is used in v15 migrations.
 export function addBabelInputs(tree: Tree) {
   const nxJson = readNxJson(tree);
   let globalBabelFile = ['babel.config.js', 'babel.config.json'].find((file) =>

packages/next/src/generators/init/init.ts

@@ -65,7 +65,6 @@ export async function nextInitGenerator(host: Tree, schema: InitSchema) {
   const reactTask = await reactInitGenerator(host, {
     ...schema,
     skipFormat: true,
-    skipBabelConfig: true,
   });
   tasks.push(reactTask);
 

packages/next/src/generators/library/library.spec.ts

@@ -13,67 +13,6 @@ describe('next library', () => {
   let mockedInstalledCypressVersion: jest.Mock<
     ReturnType<typeof installedCypressVersion>
   > = installedCypressVersion as never;
-  it('should use "@nx/next/babel" preset in babelrc', async () => {
-    const baseOptions: Schema = {
-      name: '',
-      linter: Linter.EsLint,
-      skipFormat: false,
-      skipTsConfig: false,
-      unitTestRunner: 'jest',
-      style: 'css',
-      component: true,
-    };
-
-    const appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
-
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib',
-    });
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib2',
-      style: '@emotion/styled',
-    });
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib-styled-jsx',
-      style: 'styled-jsx',
-    });
-    await libraryGenerator(appTree, {
-      ...baseOptions,
-      name: 'myLib3',
-      directory: 'myDir',
-    });
-
-    expect(readJson(appTree, 'libs/my-lib/.babelrc')).toEqual({
-      presets: ['@nx/next/babel'],
-      plugins: [],
-    });
-    expect(readJson(appTree, 'libs/my-lib2/.babelrc')).toEqual({
-      presets: [
-        [
-          '@nx/next/babel',
-          {
-            'preset-react': {
-              runtime: 'automatic',
-              importSource: '@emotion/react',
-            },
-          },
-        ],
-      ],
-      plugins: ['@emotion/babel-plugin'],
-    });
-    expect(readJson(appTree, 'libs/my-lib-styled-jsx/.babelrc')).toEqual({
-      presets: ['@nx/next/babel'],
-      plugins: [],
-    });
-    expect(readJson(appTree, 'libs/my-dir/my-lib3/.babelrc')).toEqual({
-      presets: ['@nx/next/babel'],
-      plugins: [],
-    });
-  });
-
   it('should use @nx/next images.d.ts file', async () => {
     const baseOptions: Schema = {
       name: '',

packages/next/src/generators/library/library.ts

@@ -71,36 +71,6 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
   );
   addTsConfigPath(host, `${options.importPath}/server`, [serverEntryPath]);
 
-  updateJson(
-    host,
-    joinPathFragments(options.projectRoot, '.babelrc'),
-    (json) => {
-      if (options.style === '@emotion/styled') {
-        json.presets = [
-          [
-            '@nx/next/babel',
-            {
-              'preset-react': {
-                runtime: 'automatic',
-                importSource: '@emotion/react',
-              },
-            },
-          ],
-        ];
-      } else if (options.style === 'styled-jsx') {
-        // next.js doesn't require the `styled-jsx/babel' plugin as it is already
-        // built-into the `next/babel` preset
-        json.presets = ['@nx/next/babel'];
-        json.plugins = (json.plugins || []).filter(
-          (x) => x !== 'styled-jsx/babel'
-        );
-      } else {
-        json.presets = ['@nx/next/babel'];
-      }
-      return json;
-    }
-  );
-
   updateJson(
     host,
     joinPathFragments(options.projectRoot, 'tsconfig.json'),

packages/node/src/generators/application/application.spec.ts

@@ -343,7 +343,33 @@ describe('app', () => {
     });
   });
 
-  describe('--babelJest', () => {
+  describe('--swcJest', () => {
+    it('should use @swc/jest for jest', async () => {
+      await applicationGenerator(tree, {
+        name: 'myNodeApp',
+        tags: 'one,two',
+        swcJest: true,
+      } as Schema);
+
+      expect(tree.read(`my-node-app/jest.config.ts`, 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "/* eslint-disable */
+        export default {
+          displayName: 'my-node-app',
+          preset: '../jest.preset.js',
+          testEnvironment: 'node',
+          transform: {
+            '^.+\\\\.[tj]s$': '@swc/jest',
+          },
+          moduleFileExtensions: ['ts', 'js', 'html'],
+          coverageDirectory: '../coverage/my-node-app',
+        };
+        "
+      `);
+    });
+  });
+
+  describe('--babelJest (deprecated)', () => {
     it('should use babel for jest', async () => {
       await applicationGenerator(tree, {
         name: 'myNodeApp',
@@ -368,6 +394,7 @@ describe('app', () => {
       `);
     });
   });
+
   describe('--js flag', () => {
     it('should generate js files instead of ts files', async () => {
       await applicationGenerator(tree, {

packages/node/src/generators/application/application.ts

@@ -398,7 +398,7 @@ export async function applicationGenerator(tree: Tree, schema: Schema) {
       skipSerializers: true,
       supportTsx: options.js,
       testEnvironment: 'node',
-      compiler: 'tsc',
+      compiler: options.swcJest ? 'swc' : 'tsc',
       skipFormat: true,
     });
     tasks.push(jestTask);

packages/node/src/generators/application/schema.d.ts

@@ -10,6 +10,8 @@ export interface Schema {
   linter?: Linter;
   tags?: string;
   frontendProject?: string;
+  swcJest?: boolean;
+  /** @deprecated use `swcJest` instead */
   babelJest?: boolean;
   js?: boolean;
   pascalCaseFiles?: boolean;

packages/node/src/generators/application/schema.json

@@ -54,10 +54,16 @@
       "description": "Frontend project that needs to access this application. This sets up proxy configuration.",
       "x-priority": "important"
     },
+    "swcJest": {
+      "type": "boolean",
+      "description": "Use `@swc/jest` instead `ts-jest` for faster test compilation.",
+      "default": false
+    },
     "babelJest": {
       "type": "boolean",
-      "description": "Use `babel` instead of `ts-jest`.",
+      "description": "Use `babel` instead `ts-jest`.",
-      "default": false
+      "default": false,
+      "x-deprecated": "Use --swcJest instead for faster compilation"
     },
     "pascalCaseFiles": {
       "type": "boolean",

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

@@ -35,47 +35,4 @@ describe('init', () => {
     expect(content).toMatch(/# React Native/);
     expect(content).toMatch(/# Nested node_modules/);
   });
-
-  describe('babel config', () => {
-    it('should create babel config if not present', async () => {
-      updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
-        json.namedInputs = {
-          sharedGlobals: ['{workspaceRoot}/exiting-file.json'],
-        };
-        return json;
-      });
-
-      await reactNativeInitGenerator(tree, {
-        unitTestRunner: 'none',
-        e2eTestRunner: 'none',
-      });
-
-      expect(tree.exists('babel.config.json')).toBe(true);
-      const sharedGloabls = readJson<NxJsonConfiguration>(tree, 'nx.json')
-        .namedInputs.sharedGlobals;
-      expect(sharedGloabls).toContain('{workspaceRoot}/exiting-file.json');
-      expect(sharedGloabls).toContain('{workspaceRoot}/babel.config.json');
-    });
-
-    it('should not overwrite existing babel config', async () => {
-      tree.write('babel.config.json', '{ "preset": ["preset-awesome"] }');
-
-      await reactNativeInitGenerator(tree, {
-        unitTestRunner: 'none',
-        e2eTestRunner: 'none',
-      });
-
-      const existing = readJson(tree, 'babel.config.json');
-      expect(existing).toEqual({ preset: ['preset-awesome'] });
-    });
-
-    it('should not overwrite existing babel config (.js)', async () => {
-      tree.write('/babel.config.js', 'module.exports = () => {};');
-      await reactNativeInitGenerator(tree, {
-        unitTestRunner: 'none',
-        e2eTestRunner: 'none',
-      });
-      expect(tree.exists('babel.config.json')).toBe(false);
-    });
-  });
 });

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

@@ -10,7 +10,6 @@ import {
 } from '@nx/devkit';
 import { Schema } from './schema';
 
-import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
 import { jestInitGenerator } from '@nx/jest';
 import { detoxInitGenerator } from '@nx/detox';
 import { babelPresetReactVersion } from '@nx/react/src/utils/versions';
@@ -41,7 +40,6 @@ import { addGitIgnoreEntry } from './lib/add-git-ignore-entry';
 
 export async function reactNativeInitGenerator(host: Tree, schema: Schema) {
   addGitIgnoreEntry(host);
-  await addBabelInputs(host);
   const tasks: GeneratorCallback[] = [];
 
   tasks.push(

packages/react/plugins/storybook/index.ts

@@ -1,4 +1,10 @@
-import { ExecutorContext, logger, workspaceRoot } from '@nx/devkit';
+import {
+  createProjectGraphAsync,
+  ExecutorContext,
+  logger,
+  ProjectGraphProjectNode,
+  workspaceRoot,
+} from '@nx/devkit';
 import { composePluginsSync } from '@nx/webpack/src/utils/config';
 import { NormalizedWebpackExecutorOptions } from '@nx/webpack/src/executors/webpack/schema';
 import { join } from 'path';
@@ -10,6 +16,7 @@ import {
 } from 'webpack';
 import { mergePlugins } from './merge-plugins';
 import { withReact } from '../with-react';
+import { existsSync } from 'fs';
 
 // This is shamelessly taken from CRA and modified for NX use
 // https://github.com/facebook/create-react-app/blob/4784997f0682e75eb32a897b4ffe34d735912e6c/packages/react-scripts/config/env.js#L71
@@ -58,6 +65,90 @@ export const core = (prev, options) => ({
   disableWebpackDefaults: true,
 });
 
+interface NxProjectData {
+  workspaceRoot: string;
+  projectRoot: string;
+  sourceRoot: string;
+  projectNode?: ProjectGraphProjectNode;
+}
+
+const getProjectData = async (
+  storybookOptions: any
+): Promise<NxProjectData> => {
+  const fallbackData = {
+    workspaceRoot: storybookOptions.configDir,
+    projectRoot: '',
+    sourceRoot: '',
+  };
+  // Edge-case: not running from Nx
+  if (!process.env.NX_WORKSPACE_ROOT) return fallbackData;
+
+  const projectGraph = await createProjectGraphAsync();
+  const projectNode = projectGraph.nodes[process.env.NX_TASK_TARGET_PROJECT];
+
+  return projectNode
+    ? {
+        workspaceRoot: process.env.NX_WORKSPACE_ROOT,
+        projectRoot: projectNode.data.root,
+        sourceRoot: projectNode.data.sourceRoot,
+        projectNode,
+      }
+    : // Edge-case: missing project node
+      fallbackData;
+};
+
+const fixBabelConfigurationIfNeeded = (
+  webpackConfig: Configuration,
+  projectData: NxProjectData
+): void => {
+  if (!projectData.projectNode) return;
+
+  const isUsingBabelUpwardRootMode = Object.keys(
+    projectData.projectNode.data.targets
+  ).find((k) => {
+    const targetConfig = projectData.projectNode.data.targets[k];
+    return (
+      (targetConfig.executor === '@nx/webpack:webpack' ||
+        targetConfig.executor === '@nrwl/webpack:webpack') &&
+      targetConfig.options?.babelUpwardRootMode
+    );
+  });
+
+  if (isUsingBabelUpwardRootMode) return;
+
+  let babelrcPath: string;
+  for (const ext of ['', '.json', '.js', '.cjs', '.mjs', '.cts']) {
+    const candidate = join(
+      projectData.workspaceRoot,
+      projectData.projectRoot,
+      `.babelrc${ext}`
+    );
+    if (existsSync(candidate)) {
+      babelrcPath = candidate;
+      break;
+    }
+  }
+
+  // Unexpected setup, skip.
+  if (!babelrcPath) return;
+
+  let babelRuleItem;
+  for (const rule of webpackConfig.module.rules) {
+    if (typeof rule === 'string') continue;
+    if (!Array.isArray(rule.use)) continue;
+    for (const item of rule.use) {
+      if (typeof item !== 'string' && item['loader'].includes('babel-loader')) {
+        babelRuleItem = item;
+        break;
+      }
+    }
+  }
+
+  if (babelRuleItem) {
+    babelRuleItem.options.configFile = babelrcPath;
+  }
+};
+
 export const webpack = async (
   storybookWebpackConfig: Configuration = {},
   options: any
@@ -78,12 +169,15 @@ export const webpack = async (
   const { withNx, withWeb } = require('@nx/webpack');
   const tsconfigPath = join(options.configDir, 'tsconfig.json');
 
+  const projectData = await getProjectData(options);
+
+  fixBabelConfigurationIfNeeded(storybookWebpackConfig, projectData);
+
   const builderOptions: NormalizedWebpackExecutorOptions = {
     ...options,
-    root: options.configDir,
+    root: projectData.workspaceRoot,
-    // These are blank because root is the absolute path to .storybook folder
+    projectRoot: projectData.projectRoot,
-    projectRoot: '',
+    sourceRoot: projectData.sourceRoot,
-    sourceRoot: '',
     fileReplacements: [],
     sourceMap: true,
     styles: options.styles ?? [],

packages/react/src/generators/application/application.spec.ts

@@ -849,12 +849,12 @@ describe('app', () => {
     ).toBeUndefined();
   });
 
-  describe('--skipWorkspaceJson', () => {
+  describe('--skipNxJson', () => {
     it('should update workspace with defaults when --skipprojectsConfigurations=false', async () => {
       await applicationGenerator(appTree, {
         ...schema,
         style: 'styled-components',
-        skipWorkspaceJson: false,
+        skipNxJson: false,
       });
 
       const nxJson = readNxJson(appTree);

packages/react/src/generators/application/application.ts

@@ -39,6 +39,7 @@ import { installCommonDependencies } from './lib/install-common-dependencies';
 import { extractTsConfigBase } from '../../utils/create-ts-config';
 import { addSwcDependencies } from '@nx/js/src/utils/swc/add-swc-dependencies';
 import * as chalk from 'chalk';
+import { showPossibleWarnings } from './lib/show-possible-warnings';
 
 async function addLinting(host: Tree, options: NormalizedSchema) {
   const tasks: GeneratorCallback[] = [];
@@ -73,12 +74,7 @@ async function addLinting(host: Tree, options: NormalizedSchema) {
       const installTask = await addDependenciesToPackageJson(
         host,
         extraEslintDependencies.dependencies,
-        {
+        extraEslintDependencies.devDependencies
-          ...extraEslintDependencies.devDependencies,
-          ...(options.compiler === 'swc'
-            ? { 'swc-loader': swcLoaderVersion }
-            : {}),
-        }
       );
       const addSwcTask = addSwcDependencies(host);
       tasks.push(installTask, addSwcTask);
@@ -94,11 +90,11 @@ export async function applicationGenerator(
   const tasks = [];
 
   const options = normalizeOptions(host, schema);
+  showPossibleWarnings(host, options);
 
   const initTask = await reactInitGenerator(host, {
     ...options,
     skipFormat: true,
-    skipBabelConfig: options.bundler === 'vite',
     skipHelperLibs: options.bundler === 'vite',
   });
 

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

@@ -1,8 +1,10 @@
 import { addDependenciesToPackageJson, Tree } from '@nx/devkit';
 import {
+  babelPresetReactVersion,
   lessVersion,
   sassVersion,
   stylusVersion,
+  swcLoaderVersion,
 } from '../../../utils/versions';
 import { NormalizedSchema } from '../schema';
 
@@ -10,26 +12,33 @@ export function installCommonDependencies(
   host: Tree,
   options: NormalizedSchema
 ) {
-  let devDependencies = null;
+  const devDependencies: Record<string, string> = {};
 
   // Vite requires style preprocessors to be installed manually.
   // `@nx/webpack` installs them automatically for now.
-  // TODO(jack): Once we clean up webpack we can remove this check
   if (options.bundler === 'vite' || options.unitTestRunner === 'vitest') {
     switch (options.style) {
       case 'scss':
-        devDependencies = { sass: sassVersion };
+        devDependencies['sass'] = sassVersion;
         break;
       case 'less':
-        devDependencies = { less: lessVersion };
+        devDependencies['less'] = lessVersion;
         break;
       case 'styl': // @TODO(17): deprecated, going to be removed in Nx 17
-        devDependencies = { stylus: stylusVersion };
+        devDependencies['stylus'] = stylusVersion;
         break;
     }
   }
 
-  return devDependencies
+  if (options.bundler === 'webpack') {
-    ? addDependenciesToPackageJson(host, {}, devDependencies)
+    if (options.compiler === 'swc') {
-    : function noop() {};
+      devDependencies['swc-loader'] = swcLoaderVersion;
+    } else if (options.compiler === 'babel') {
+      // 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;
+    }
+  }
+
+  return addDependenciesToPackageJson(host, {}, devDependencies);
 }

packages/react/src/generators/application/lib/set-defaults.ts

@@ -2,7 +2,7 @@ import { readNxJson, Tree, updateNxJson } from '@nx/devkit';
 import { NormalizedSchema } from '../schema';
 
 export function setDefaults(host: Tree, options: NormalizedSchema) {
-  if (options.skipWorkspaceJson) {
+  if (options.skipNxJson) {
     return;
   }
 

packages/react/src/generators/application/lib/show-possible-warnings.ts

@@ -0,0 +1,16 @@
+import * as chalk from 'chalk';
+import { logger, Tree } from '@nx/devkit';
+import { NormalizedSchema, Schema } from '../schema';
+
+export function showPossibleWarnings(
+  tree: Tree,
+  options: NormalizedSchema<Schema>
+) {
+  if (options.style === 'styled-jsx' && options.compiler === 'swc') {
+    logger.warn(
+      `styled-jsx may not work with SWC. Try using ${chalk.bold(
+        'nx g @nx/react:app --compiler=babel'
+      )} instead.`
+    );
+  }
+}

packages/react/src/generators/application/schema.d.ts

@@ -14,7 +14,7 @@ export interface Schema {
   pascalCaseFiles?: boolean;
   classComponent?: boolean;
   routing?: boolean;
-  skipWorkspaceJson?: boolean;
+  skipNxJson?: boolean;
   js?: boolean;
   globalCss?: boolean;
   strict?: boolean;

packages/react/src/generators/application/schema.json

@@ -98,8 +98,8 @@
       "default": false,
       "x-priority": "internal"
     },
-    "skipWorkspaceJson": {
+    "skipNxJson": {
-      "description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
+      "description": "Skip updating `nx.json` with default options based on values provided to this app.",
       "type": "boolean",
       "default": false,
       "x-priority": "internal"

packages/react/src/generators/host/schema.d.ts

@@ -15,7 +15,7 @@ export interface Schema {
   remotes?: string[];
   setParserOptionsProject?: boolean;
   skipFormat?: boolean;
-  skipWorkspaceJson?: boolean;
+  skipNxJson?: boolean;
   ssr?: boolean;
   strict?: boolean;
   style: SupportedStyles;

packages/react/src/generators/host/schema.json

@@ -79,7 +79,7 @@
       "default": false,
       "x-priority": "internal"
     },
-    "skipWorkspaceJson": {
+    "skipNxJson": {
       "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
       "type": "boolean",
       "default": false,

packages/react/src/generators/init/init.spec.ts

@@ -30,9 +30,4 @@ describe('init', () => {
     await reactInitGenerator(tree, { ...schema, unitTestRunner: 'none' });
     expect(tree.exists('jest.config.js')).toEqual(false);
   });
-
-  it('should not add babel.config.json if skipBabelConfig is true', async () => {
-    await reactInitGenerator(tree, { ...schema, skipBabelConfig: true });
-    expect(tree.exists('babel.config.json')).toEqual(false);
-  });
 });

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

@@ -8,7 +8,6 @@ import {
   runTasksInSerial,
   Tree,
   updateNxJson,
-  writeJson,
 } from '@nx/devkit';
 
 import { initGenerator as jsInitGenerator } from '@nx/js';
@@ -65,25 +64,6 @@ function updateDependencies(host: Tree, schema: InitSchema) {
   });
 }
 
-function initRootBabelConfig(tree: Tree, schema: InitSchema) {
-  if (tree.exists('/babel.config.json') || tree.exists('/babel.config.js')) {
-    return;
-  }
-
-  if (!schema.skipBabelConfig) {
-    writeJson(tree, '/babel.config.json', {
-      babelrcRoots: ['*'], // Make sure .babelrc files other than root can be loaded in a monorepo
-    });
-  }
-
-  const nxJson = readNxJson(tree);
-
-  if (nxJson.namedInputs?.sharedGlobals) {
-    nxJson.namedInputs.sharedGlobals.push('{workspaceRoot}/babel.config.json');
-  }
-  updateNxJson(tree, nxJson);
-}
-
 export async function reactInitGenerator(host: Tree, schema: InitSchema) {
   const tasks: GeneratorCallback[] = [];
 
@@ -106,21 +86,6 @@ export async function reactInitGenerator(host: Tree, schema: InitSchema) {
     tasks.push(cypressTask);
   }
 
-  if (!schema.skipPackageJson && !schema.skipBabelConfig) {
-    const installBabelTask = addDependenciesToPackageJson(
-      host,
-      {},
-      {
-        '@babel/preset-react': babelPresetReactVersion,
-      }
-    );
-    tasks.push(installBabelTask);
-  }
-
-  if (!schema.skipBabelConfig) {
-    initRootBabelConfig(host, schema);
-  }
-
   if (!schema.skipPackageJson) {
     const installTask = updateDependencies(host, schema);
     tasks.push(installTask);

packages/react/src/generators/init/schema.d.ts

@@ -1,7 +1,6 @@
 export interface InitSchema {
   unitTestRunner?: 'jest' | 'vitest' | 'none';
   e2eTestRunner?: 'cypress' | 'none';
-  skipBabelConfig?: boolean;
   skipFormat?: boolean;
   skipPackageJson?: boolean;
   skipHelperLibs?: boolean;

packages/react/src/generators/init/schema.json

@@ -28,11 +28,6 @@
       "type": "boolean",
       "default": false
     },
-    "skipBabelConfig": {
-      "description": "Do not generate a root babel.config.json (if babel is not needed).",
-      "type": "boolean",
-      "default": false
-    },
     "skipHelperLibs": {
       "description": "Do not install  tslib.",
       "type": "boolean",

packages/react/src/generators/library/files/common/.babelrc__tmpl__

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel", {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-        <% if (style === '@emotion/styled') { %>,"importSource": "@emotion/react"<% } %>
-      }
-    ]
-  ],
-  "plugins": [
-    <% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>
-    <% if (style === 'styled-jsx') { %>"styled-jsx/babel"<% } %>
-    <% if (style === '@emotion/styled') { %>"@emotion/babel-plugin"<% } %>
-  ]
-}

packages/react/src/generators/library/lib/create-files.ts

@@ -5,6 +5,7 @@ import {
   names,
   offsetFromRoot,
   toJS,
+  writeJson,
 } from '@nx/devkit';
 import { getRelativePathToRootTsConfig } from '@nx/js';
 
@@ -38,10 +39,33 @@ export function createFiles(host: Tree, options: NormalizedSchema) {
       options.projectRoot,
       substitutions
     );
-
-    if (host.exists(joinPathFragments(options.projectRoot, '.babelrc'))) {
-      host.delete(joinPathFragments(options.projectRoot, '.babelrc'));
   }
+
+  if (options.compiler === 'babel') {
+    writeJson(host, joinPathFragments(options.projectRoot, '.babelrc'), {
+      presets: [
+        [
+          '@nx/react/babel',
+          {
+            runtime: 'automatic',
+            useBuiltIns: 'usage',
+            importSource:
+              options.style === '@emotion/styled'
+                ? '@emotion/react'
+                : undefined,
+          },
+        ],
+      ],
+      plugins: [
+        options.style === 'styled-components'
+          ? ['styled-components', { pure: true, ssr: true }]
+          : undefined,
+        options.style === 'styled-jsx' ? 'styled-jsx/babel' : undefined,
+        options.style === '@emotion/styled'
+          ? '@emotion/babel-plugin'
+          : undefined,
+      ].filter(Boolean),
+    });
   }
 
   if (!options.publishable && !options.buildable) {

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 {
+  babelPresetReactVersion,
   lessVersion,
   reactDomVersion,
   reactVersion,
@@ -50,6 +51,14 @@ export function installCommonDependencies(
 
   if (options.compiler === 'swc') {
     tasks.push(addSwcDependencies(host));
+  } else if (options.compiler === 'babel') {
+    tasks.push(
+      addDependenciesToPackageJson(
+        host,
+        {},
+        { '@babel/preset-react': babelPresetReactVersion }
+      )
+    );
   }
 
   return runTasksInSerial(...tasks);

packages/react/src/generators/library/library.spec.ts

@@ -47,7 +47,6 @@ describe('lib', () => {
     });
   });
 
-  describe('not nested', () => {
   it('should update project configuration', async () => {
     await libraryGenerator(tree, defaultSchema);
     const project = readProjectConfiguration(tree, 'my-lib');
@@ -69,10 +68,7 @@ describe('lib', () => {
       unitTestRunner: 'vitest',
     });
     const tsconfigApp = readJson(tree, 'libs/my-lib/tsconfig.lib.json');
-      expect(tsconfigApp.compilerOptions.types).toEqual([
+    expect(tsconfigApp.compilerOptions.types).toEqual(['node', 'vite/client']);
-        'node',
-        'vite/client',
-      ]);
     const tsconfigSpec = readJson(tree, 'libs/my-lib/tsconfig.spec.json');
     expect(tsconfigSpec.compilerOptions.types).toEqual([
       'vitest/globals',
@@ -239,6 +235,17 @@ describe('lib', () => {
       "['babel-jest', { presets: ['@nx/react/babel'] }]"
     );
   });
+
+  it('should add @babel/preset-react when using babel compiler', async () => {
+    await libraryGenerator(tree, {
+      ...defaultSchema,
+      compiler: 'babel',
+      directory: 'myDir',
+      tags: 'one',
+    });
+
+    const packageJson = readJson(tree, 'package.json');
+    expect(packageJson.devDependencies['@babel/preset-react']).toBeDefined();
   });
 
   describe('nested', () => {

packages/react/src/generators/library/library.ts

@@ -43,7 +43,6 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
     ...options,
     e2eTestRunner: 'none',
     skipFormat: true,
-    skipBabelConfig: options.bundler === 'vite' || options.compiler === 'swc',
     skipHelperLibs: options.bundler === 'vite',
   });
   tasks.push(initTask);

packages/react/src/generators/remote/schema.d.ts

@@ -17,7 +17,7 @@ export interface Schema {
   routing?: boolean;
   setParserOptionsProject?: boolean;
   skipFormat: boolean;
-  skipWorkspaceJson?: boolean;
+  skipNxJson?: boolean;
   ssr?: boolean;
   strict?: boolean;
   style: SupportedStyles;

packages/react/src/generators/remote/schema.json

@@ -84,7 +84,7 @@
       "default": false,
       "x-priority": "internal"
     },
-    "skipWorkspaceJson": {
+    "skipNxJson": {
       "description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
       "type": "boolean",
       "default": false,

packages/rollup/src/generators/init/init.spec.ts

@@ -11,23 +11,6 @@ describe('rollupInitGenerator', () => {
     tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
   });
 
-  it('should support babel', async () => {
-    updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
-      json.namedInputs = {
-        sharedGlobals: ['{workspaceRoot}/exiting-file.json'],
-      };
-      return json;
-    });
-
-    await rollupInitGenerator(tree, { compiler: 'babel' });
-
-    expect(tree.exists('babel.config.json'));
-    const sharedGlobals = readJson<NxJsonConfiguration>(tree, 'nx.json')
-      .namedInputs.sharedGlobals;
-    expect(sharedGlobals).toContain('{workspaceRoot}/exiting-file.json');
-    expect(sharedGlobals).toContain('{workspaceRoot}/babel.config.json');
-  });
-
   it('should support swc', async () => {
     await rollupInitGenerator(tree, { compiler: 'swc' });
 

packages/rollup/src/generators/init/init.ts

@@ -17,10 +17,6 @@ import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
 export async function rollupInitGenerator(tree: Tree, schema: Schema) {
   let task: GeneratorCallback;
 
-  if (schema.compiler === 'babel') {
-    addBabelInputs(tree);
-  }
-
   if (schema.compiler === 'swc') {
     task = addDependenciesToPackageJson(
       tree,

packages/web/src/generators/application/application.ts

@@ -184,8 +184,6 @@ export async function applicationGenerator(host: Tree, schema: Schema) {
   const webTask = await webInitGenerator(host, {
     ...options,
     skipFormat: true,
-    // Vite does not use babel by default
-    skipBabelConfig: options.bundler === 'vite',
   });
   tasks.push(webTask);
 

packages/web/src/generators/application/schema.json

@@ -46,8 +46,8 @@
     "compiler": {
       "type": "string",
       "description": "The compiler to use",
-      "enum": ["babel", "swc"],
+      "enum": ["swc", "babel"],
-      "default": "babel",
+      "default": "swc",
       "x-priority": "important"
     },
     "bundler": {

packages/web/src/generators/init/init.ts

@@ -8,8 +8,6 @@ import {
   runTasksInSerial,
   Tree,
 } from '@nx/devkit';
-
-import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
 import { initGenerator as jsInitGenerator } from '@nx/js';
 import {
   nxVersion,
@@ -65,7 +63,6 @@ export async function webInitGenerator(tree: Tree, schema: Schema) {
     const installTask = updateDependencies(tree, schema);
     tasks.push(installTask);
   }
-  addBabelInputs(tree);
 
   if (!schema.skipFormat) {
     await formatFiles(tree);

packages/web/src/generators/init/schema.d.ts

@@ -4,5 +4,4 @@ export interface Schema {
   e2eTestRunner?: 'cypress' | 'none';
   skipFormat?: boolean;
   skipPackageJson?: boolean;
-  skipBabelConfig?: boolean;
 }

packages/web/src/generators/init/schema.json

@@ -34,11 +34,6 @@
       "type": "boolean",
       "default": false,
       "x-priority": "internal"
-    },
-    "skipBabelConfig": {
-      "description": "Do not generate a root babel.config.json (if babel is not needed).",
-      "type": "boolean",
-      "default": false
     }
   },
   "required": []

packages/webpack/src/executors/webpack/schema.d.ts

@@ -70,28 +70,16 @@ export interface WebpackExecutorOptions {
   webpackConfig?: string;
   babelConfig?: string;
   babelUpwardRootMode?: boolean;
-  // TODO(jack): Also deprecate these in schema.json once we have migration from executor options to webpack.config.js file.
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   baseHref?: string;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   deployUrl?: string;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   extractCss?: boolean;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   generateIndexHtml?: boolean;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   index?: string;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   postcssConfig?: string;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   scripts?: Array<ExtraEntryPointClass | string>;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   stylePreprocessorOptions?: any;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   styles?: Array<ExtraEntryPointClass | string>;
-  /** @deprecated Moved to withWeb options from `@nx/webpack` */
   subresourceIntegrity?: boolean;
 }
 

packages/webpack/src/generators/init/init.spec.ts

@@ -10,23 +10,6 @@ describe('webpackInitGenerator', () => {
     tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
   });
 
-  it('should support babel', async () => {
-    updateJson<NxJsonConfiguration>(tree, 'nx.json', (json) => {
-      json.namedInputs = {
-        sharedGlobals: ['{workspaceRoot}/exiting-file.json'],
-      };
-      return json;
-    });
-
-    await webpackInitGenerator(tree, { compiler: 'babel' });
-
-    expect(tree.exists('babel.config.json'));
-    const sharedGlobals = readJson<NxJsonConfiguration>(tree, 'nx.json')
-      .namedInputs.sharedGlobals;
-    expect(sharedGlobals).toContain('{workspaceRoot}/exiting-file.json');
-    expect(sharedGlobals).toContain('{workspaceRoot}/babel.config.json');
-  });
-
   it('should support swc', async () => {
     await webpackInitGenerator(tree, { compiler: 'swc' });
 

packages/webpack/src/generators/init/init.ts

@@ -22,9 +22,6 @@ import { addBabelInputs } from '@nx/js/src/utils/add-babel-inputs';
 
 export async function webpackInitGenerator(tree: Tree, schema: Schema) {
   const tasks: GeneratorCallback[] = [];
-  if (schema.compiler === 'babel') {
-    addBabelInputs(tree);
-  }
   const devDependencies = {
     '@nx/webpack': nxVersion,
   };

packages/webpack/src/generators/webpack-project/schema.json

@@ -21,7 +21,7 @@
       "type": "string",
       "enum": ["babel", "swc", "tsc"],
       "description": "The compiler to use to build source.",
-      "default": "babel"
+      "default": "swc"
     },
     "main": {
       "type": "string",

packages/webpack/src/generators/webpack-project/webpack-project.ts

@@ -1,10 +1,11 @@
-import type { ProjectConfiguration, Tree } from '@nx/devkit';
+import type { Tree } from '@nx/devkit';
 import {
   convertNxGenerator,
   formatFiles,
   joinPathFragments,
   readProjectConfiguration,
   updateProjectConfiguration,
+  writeJson,
 } from '@nx/devkit';
 
 import { webpackInitGenerator } from '../init/init';
@@ -58,7 +59,7 @@ function addBuildTarget(tree: Tree, options: WebpackProjectGeneratorSchema) {
   const buildOptions: WebpackExecutorOptions = {
     target: options.target,
     outputPath: joinPathFragments('dist', project.root),
-    compiler: options.compiler ?? 'babel',
+    compiler: options.compiler ?? 'swc',
     main: options.main ?? joinPathFragments(project.root, 'src/main.ts'),
     tsConfig:
       options.tsConfig ?? joinPathFragments(project.root, 'tsconfig.app.json'),
@@ -71,8 +72,11 @@ function addBuildTarget(tree: Tree, options: WebpackProjectGeneratorSchema) {
 
   if (options.babelConfig) {
     buildOptions.babelConfig = options.babelConfig;
-  } else {
+  } else if (options.compiler === 'babel') {
-    buildOptions.babelUpwardRootMode = true;
+    // If no babel config file is provided then write a default one, otherwise build will fail.
+    writeJson(tree, joinPathFragments(project.root, '.babelrc'), {
+      presets: ['@nx/js/babel'],
+    });
   }
 
   if (options.target === 'web') {