From ddec362a5a9aff83a7b06a37c2c61af86d9b315c Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Tue, 9 Mar 2021 16:32:36 -0500
Subject: [PATCH] fix(nextjs): update babel setup to better support next apps
 (#4944)

* fix(nextjs): update babel setup to better support next apps

* fix(testing): remove babel-jest.config.json used in jest.config.js

- Fix `@nrwl/web/babel` to support Jest as well
---
 .../api-workspace/generators/library.md       |   8 ++
 docs/node/api-workspace/generators/library.md |   8 ++
 .../react/api-workspace/generators/library.md |   8 ++
 packages/gatsby/babel.ts                      |   5 +-
 .../application/application.spec.ts           |   6 -
 .../__snapshots__/jest-project.spec.ts.snap   |  10 +-
 .../files/babel-jest.config.json__tmpl__      |  14 ---
 .../jest-project/files/jest.config.js__tmpl__ |   3 +-
 .../jest-project/jest-project.spec.ts         |  40 +------
 .../jest-project/lib/create-files.ts          |   4 -
 .../update-10-0-0/update-jest-configs.spec.ts |   6 +-
 packages/next/babel.ts                        |  10 ++
 packages/next/migrations.json                 |   6 +
 packages/next/package.json                    |   1 +
 packages/next/plugins/with-nx.ts              |  17 ++-
 .../application/application.spec.ts           |   6 -
 .../application/files/.babelrc__tmpl__        |   6 +-
 .../application/lib/update-jest-config.ts     |   8 --
 .../update-11-5-0/update-babel-config.spec.ts |  63 +++++++++++
 .../update-11-5-0/update-babel-config.ts      |  22 ++++
 .../application/application.spec.ts           |  22 +---
 .../src/schematics/library/library.spec.ts    |  23 +---
 packages/react/babel.ts                       |   5 +-
 .../application/application.spec.ts           |   5 -
 .../application/lib/update-jest-config.ts     |   8 --
 .../src/generators/library/library.spec.ts    |   5 -
 .../react/src/generators/library/library.ts   |   8 --
 .../rules/update-babel-jest-config.spec.ts    |  31 ------
 .../src/rules/update-babel-jest-config.ts     |  14 ---
 packages/web/babel.ts                         |  29 +++--
 packages/web/migrations.json                  |   6 +
 .../application/application.spec.ts           |  20 +---
 .../application/files/app/.babelrc__tmpl__    |   6 +-
 packages/web/src/generators/init/init.ts      |   1 -
 .../update-11-5-0/update-babel-config.spec.ts | 104 ++++++++++++++++++
 .../update-11-5-0/update-babel-config.ts      |  49 +++++++++
 .../library/files/lib/__dot__babelrc__tmpl__  |   3 +
 .../src/generators/library/library.spec.ts    |  41 +++----
 .../src/generators/library/library.ts         |   5 +
 .../src/generators/library/schema.d.ts        |   1 +
 .../src/generators/library/schema.json        |   5 +
 .../src/generators/preset/preset.spec.ts      |   1 -
 42 files changed, 378 insertions(+), 265 deletions(-)
 delete mode 100644 packages/jest/src/generators/jest-project/files/babel-jest.config.json__tmpl__
 create mode 100644 packages/next/babel.ts
 create mode 100644 packages/next/src/migrations/update-11-5-0/update-babel-config.spec.ts
 create mode 100644 packages/next/src/migrations/update-11-5-0/update-babel-config.ts
 delete mode 100644 packages/react/src/rules/update-babel-jest-config.spec.ts
 delete mode 100644 packages/react/src/rules/update-babel-jest-config.ts
 create mode 100644 packages/web/src/migrations/update-11-5-0/update-babel-config.spec.ts
 create mode 100644 packages/web/src/migrations/update-11-5-0/update-babel-config.ts
 create mode 100644 packages/workspace/src/generators/library/files/lib/__dot__babelrc__tmpl__

diff --git a/docs/angular/api-workspace/generators/library.md b/docs/angular/api-workspace/generators/library.md
index 8d29f77b02..7ca32f42b0 100644
--- a/docs/angular/api-workspace/generators/library.md
+++ b/docs/angular/api-workspace/generators/library.md
@@ -90,6 +90,14 @@ Type: `boolean`
 
 Use pascal case file names.
 
+### skipBabelrc
+
+Default: `false`
+
+Type: `boolean`
+
+Do not generate .babelrc file. Useful for Node libraries that are not compiled by Babel
+
 ### skipFormat
 
 Default: `false`
diff --git a/docs/node/api-workspace/generators/library.md b/docs/node/api-workspace/generators/library.md
index 1f0f79e2a7..de7742b488 100644
--- a/docs/node/api-workspace/generators/library.md
+++ b/docs/node/api-workspace/generators/library.md
@@ -90,6 +90,14 @@ Type: `boolean`
 
 Use pascal case file names.
 
+### skipBabelrc
+
+Default: `false`
+
+Type: `boolean`
+
+Do not generate .babelrc file. Useful for Node libraries that are not compiled by Babel
+
 ### skipFormat
 
 Default: `false`
diff --git a/docs/react/api-workspace/generators/library.md b/docs/react/api-workspace/generators/library.md
index 1f0f79e2a7..de7742b488 100644
--- a/docs/react/api-workspace/generators/library.md
+++ b/docs/react/api-workspace/generators/library.md
@@ -90,6 +90,14 @@ Type: `boolean`
 
 Use pascal case file names.
 
+### skipBabelrc
+
+Default: `false`
+
+Type: `boolean`
+
+Do not generate .babelrc file. Useful for Node libraries that are not compiled by Babel
+
 ### skipFormat
 
 Default: `false`
diff --git a/packages/gatsby/babel.ts b/packages/gatsby/babel.ts
index 65f2393365..586b4362ef 100644
--- a/packages/gatsby/babel.ts
+++ b/packages/gatsby/babel.ts
@@ -4,6 +4,9 @@
 module.exports = function (api, options) {
   api.assertVersion(7);
   return {
-    presets: [[require.resolve('babel-preset-gatsby'), { useBuiltIns: true }]],
+    presets: [
+      '@nrwl/web/babel',
+      [require.resolve('babel-preset-gatsby'), { useBuiltIns: true }],
+    ],
   };
 };
diff --git a/packages/gatsby/src/generators/application/application.spec.ts b/packages/gatsby/src/generators/application/application.spec.ts
index 2b8e52c23e..544de6557d 100644
--- a/packages/gatsby/src/generators/application/application.spec.ts
+++ b/packages/gatsby/src/generators/application/application.spec.ts
@@ -181,13 +181,7 @@ describe('app', () => {
         .read('apps/my-app/src/pages/index.tsx')
         .toString();
 
-      const babelJestConfig = readJson(
-        tree,
-        'apps/my-app/babel-jest.config.json'
-      );
-
       expect(indexContent).toMatch(/<style jsx>/);
-      expect(babelJestConfig.plugins).toContain('styled-jsx/babel');
       expect(
         tree.exists('apps/my-app/src/pages/index.module.styled-jsx')
       ).toBeFalsy();
diff --git a/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap b/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap
index 561ba3f122..5a71a06a84 100644
--- a/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap
+++ b/packages/jest/src/generators/jest-project/__snapshots__/jest-project.spec.ts.snap
@@ -1,12 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`jestProject --babelJest should generate proper jest.transform and babel-jest.config.json when babelJest and supportTsx is true 1`] = `
+exports[`jestProject --babelJest should generate proper jest.transform when babelJest and supportTsx is true 1`] = `
 "module.exports = {
   displayName: 'lib1',
   preset: '../../jest.preset.js',
   transform: {
-    '^.+\\\\\\\\.[tj]sx?$': [ 'babel-jest',
-    { cwd: __dirname, configFile: './babel-jest.config.json' }]
+    '^.+\\\\\\\\.[tj]sx?$': 'babel-jest'
   },
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/lib1'
@@ -14,13 +13,12 @@ exports[`jestProject --babelJest should generate proper jest.transform and babel
 "
 `;
 
-exports[`jestProject --babelJest should generate proper jest.transform and babel-jest.config.json when babelJest is true 1`] = `
+exports[`jestProject --babelJest should generate proper jest.transform when babelJest is true 1`] = `
 "module.exports = {
   displayName: 'lib1',
   preset: '../../jest.preset.js',
   transform: {
-    '^.+\\\\\\\\.[tj]s$': [ 'babel-jest',
-    { cwd: __dirname, configFile: './babel-jest.config.json' }]
+    '^.+\\\\\\\\.[tj]s$': 'babel-jest'
   },
     moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/libs/lib1'
diff --git a/packages/jest/src/generators/jest-project/files/babel-jest.config.json__tmpl__ b/packages/jest/src/generators/jest-project/files/babel-jest.config.json__tmpl__
deleted file mode 100644
index 6c6534b0e8..0000000000
--- a/packages/jest/src/generators/jest-project/files/babel-jest.config.json__tmpl__
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "node": "current"
-        }
-      }
-    ],
-    "@babel/preset-typescript"<% if (supportTsx) { %>,
-    "@babel/preset-react"<% } %>
-  ]
-}
diff --git a/packages/jest/src/generators/jest-project/files/jest.config.js__tmpl__ b/packages/jest/src/generators/jest-project/files/jest.config.js__tmpl__
index 7efaacbb5b..3f586539c9 100644
--- a/packages/jest/src/generators/jest-project/files/jest.config.js__tmpl__
+++ b/packages/jest/src/generators/jest-project/files/jest.config.js__tmpl__
@@ -16,8 +16,7 @@ module.exports = {
   },<% } %><% if(testEnvironment) { %>
   testEnvironment: '<%= testEnvironment %>',<% } %><% if(skipSerializers){ %>
   transform: {
-    <% if (supportTsx){ %>'^.+\\.[tj]sx?$'<% } else { %>'^.+\\.[tj]s$'<% } %>: <% if (transformer == 'babel-jest') { %>[ 'babel-jest',
-    { cwd: __dirname, configFile: './babel-jest.config.json' }]<% } else { %> 'ts-jest' <% } %>
+    <% if (supportTsx){ %>'^.+\\.[tj]sx?$'<% } else { %>'^.+\\.[tj]s$'<% } %>: <% if (transformer == 'babel-jest') { %>'babel-jest'<% } else { %> 'ts-jest' <% } %>
   },<% if (supportTsx) { %>
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],<% } else { %>
     moduleFileExtensions: ['ts', 'js', 'html'],<% } %><% } %>
diff --git a/packages/jest/src/generators/jest-project/jest-project.spec.ts b/packages/jest/src/generators/jest-project/jest-project.spec.ts
index 0284e889bd..e7a9c73a8e 100644
--- a/packages/jest/src/generators/jest-project/jest-project.spec.ts
+++ b/packages/jest/src/generators/jest-project/jest-project.spec.ts
@@ -275,7 +275,7 @@ describe('jestProject', () => {
       });
     });
 
-    it('should generate proper jest.transform and babel-jest.config.json when babelJest is true', async () => {
+    it('should generate proper jest.transform when babelJest is true', async () => {
       await jestProjectGenerator(tree, {
         ...defaultOptions,
         project: 'lib1',
@@ -291,27 +291,9 @@ describe('jestProject', () => {
       expect(
         tree.read('libs/lib1/jest.config.js').toString()
       ).toMatchSnapshot();
-
-      expect(tree.exists('libs/lib1/babel-jest.config.json'));
-      expect(readJson(tree, 'libs/lib1/babel-jest.config.json'))
-        .toMatchInlineSnapshot(`
-              Object {
-                "presets": Array [
-                  Array [
-                    "@babel/preset-env",
-                    Object {
-                      "targets": Object {
-                        "node": "current",
-                      },
-                    },
-                  ],
-                  "@babel/preset-typescript",
-                ],
-              }
-            `);
     });
 
-    it('should generate proper jest.transform and babel-jest.config.json when babelJest and supportTsx is true', async () => {
+    it('should generate proper jest.transform when babelJest and supportTsx is true', async () => {
       await jestProjectGenerator(tree, {
         ...defaultOptions,
         project: 'lib1',
@@ -321,24 +303,6 @@ describe('jestProject', () => {
       expect(
         tree.read('libs/lib1/jest.config.js').toString()
       ).toMatchSnapshot();
-
-      expect(readJson(tree, 'libs/lib1/babel-jest.config.json'))
-        .toMatchInlineSnapshot(`
-            Object {
-              "presets": Array [
-                Array [
-                  "@babel/preset-env",
-                  Object {
-                    "targets": Object {
-                      "node": "current",
-                    },
-                  },
-                ],
-                "@babel/preset-typescript",
-                "@babel/preset-react",
-              ],
-            }
-          `);
     });
   });
 });
diff --git a/packages/jest/src/generators/jest-project/lib/create-files.ts b/packages/jest/src/generators/jest-project/lib/create-files.ts
index 2e5ebc5351..a55c21d90a 100644
--- a/packages/jest/src/generators/jest-project/lib/create-files.ts
+++ b/packages/jest/src/generators/jest-project/lib/create-files.ts
@@ -21,8 +21,4 @@ export function createFiles(tree: Tree, options: JestProjectSchema) {
   if (options.setupFile === 'none') {
     tree.delete(join(projectConfig.root, './src/test-setup.ts'));
   }
-
-  if (!options.babelJest) {
-    tree.delete(join(projectConfig.root, './babel-jest.config.json'));
-  }
 }
diff --git a/packages/jest/src/migrations/update-10-0-0/update-jest-configs.spec.ts b/packages/jest/src/migrations/update-10-0-0/update-jest-configs.spec.ts
index 26d3321fda..0b1e43175b 100644
--- a/packages/jest/src/migrations/update-10-0-0/update-jest-configs.spec.ts
+++ b/packages/jest/src/migrations/update-10-0-0/update-jest-configs.spec.ts
@@ -6,6 +6,7 @@ import { serializeJson } from '@nrwl/workspace';
 import { jestConfigObject } from '../utils/config/legacy/functions';
 
 import { getJestObject } from './require-jest-config';
+
 jest.mock('./require-jest-config');
 const getJestObjectMock = getJestObject as jest.Mock<typeof getJestObject>;
 
@@ -28,10 +29,7 @@ const reactJestObject = {
   preset: '../../jest.config.js',
   transform: {
     '^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\\\.[tj]sx?$': [
-      'babel-jest',
-      { cwd: __dirname, configFile: './babel-jest.config.json' },
-    ],
+    '^.+\\\\.[tj]sx?$': ['babel-jest', { cwd: __dirname }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
   coverageDirectory: '../../coverage/apps/my-react-app',
diff --git a/packages/next/babel.ts b/packages/next/babel.ts
new file mode 100644
index 0000000000..d0f95fb0c4
--- /dev/null
+++ b/packages/next/babel.ts
@@ -0,0 +1,10 @@
+/*
+ * Babel preset to provide Next.js support for Nx.
+ */
+module.exports = function (api, options) {
+  api.assertVersion(7);
+  return {
+    presets: ['next/babel'],
+    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+  };
+};
diff --git a/packages/next/migrations.json b/packages/next/migrations.json
index 114c67687e..857d32ce9c 100644
--- a/packages/next/migrations.json
+++ b/packages/next/migrations.json
@@ -24,6 +24,12 @@
       "version": "11.0.0-beta.0",
       "description": "Update libraries",
       "factory": "./src/migrations/update-11-0-0/update-11-0-0"
+    },
+    "update-babel-config-11.5.0": {
+      "cli": "nx",
+      "version": "11.5.0-beta.1",
+      "description": "Update .babelrc to use '@nrwl/next/babel' instead of 'next/babel'",
+      "factory": "./src/migrations/update-11-5-0/update-babel-config"
     }
   },
   "packageJsonUpdates": {
diff --git a/packages/next/package.json b/packages/next/package.json
index 0aa4112ea2..5de281313b 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -32,6 +32,7 @@
     "next": "^10.0.1"
   },
   "dependencies": {
+    "@babel/plugin-proposal-decorators": "^7.8.3",
     "@nrwl/react": "*",
     "@nrwl/cypress": "*",
     "@nrwl/jest": "*",
diff --git a/packages/next/plugins/with-nx.ts b/packages/next/plugins/with-nx.ts
index c3a7d9266e..3cde507c21 100644
--- a/packages/next/plugins/with-nx.ts
+++ b/packages/next/plugins/with-nx.ts
@@ -28,12 +28,19 @@ function withNx(nextConfig = {} as any) {
   const userWebpack = nextConfig.webpack || ((x) => x);
   return {
     ...nextConfig,
-    /*
-     * Modify the Next.js webpack config to allow workspace libs to use css modules.
-     *
-     * Note: This would be easier if Next.js exposes css-loader and sass-loader on `defaultLoaders`.
-     */
     webpack: (config, options) => {
+      /*
+       * Update babel to support our monorepo setup.
+       * The 'upward' mode allows the root babel.config.json and per-project .babelrc files to be picked up.
+       */
+      options.defaultLoaders.babel.options.babelrc = true;
+      options.defaultLoaders.babel.options.rootMode = 'upward';
+
+      /*
+       * Modify the Next.js webpack config to allow workspace libs to use css modules.
+       * Note: This would be easier if Next.js exposes css-loader and sass-loader on `defaultLoaders`.
+       */
+
       // Include workspace libs in css/sass loaders
       const includes = [join(appRootPath, workspaceLayout().libsDir)];
 
diff --git a/packages/next/src/generators/application/application.spec.ts b/packages/next/src/generators/application/application.spec.ts
index 053a35e9e2..7d13e65345 100644
--- a/packages/next/src/generators/application/application.spec.ts
+++ b/packages/next/src/generators/application/application.spec.ts
@@ -150,13 +150,7 @@ describe('app', () => {
 
       const indexContent = tree.read('apps/my-app/pages/index.tsx').toString();
 
-      const babelJestConfig = readJson(
-        tree,
-        'apps/my-app/babel-jest.config.json'
-      );
-
       expect(indexContent).toMatch(/<style jsx>{`.page {}`}<\/style>/);
-      expect(babelJestConfig.plugins).toContain('styled-jsx/babel');
       expect(
         tree.exists('apps/my-app/pages/index.module.styled-jsx')
       ).toBeFalsy();
diff --git a/packages/next/src/generators/application/files/.babelrc__tmpl__ b/packages/next/src/generators/application/files/.babelrc__tmpl__
index 4d62a607c0..c77984e670 100644
--- a/packages/next/src/generators/application/files/.babelrc__tmpl__
+++ b/packages/next/src/generators/application/files/.babelrc__tmpl__
@@ -1,4 +1,6 @@
 {
-  "presets": ["next/babel"],
-  "plugins": [<% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>]
+  "presets": ["@nrwl/next/babel"],
+  "plugins": [
+    <% if (style === 'styled-components') { %>["styled-components", { "pure": true, "ssr": true }]<% } %>
+  ]
 }
diff --git a/packages/next/src/generators/application/lib/update-jest-config.ts b/packages/next/src/generators/application/lib/update-jest-config.ts
index 257fac89f2..bdedfce730 100644
--- a/packages/next/src/generators/application/lib/update-jest-config.ts
+++ b/packages/next/src/generators/application/lib/update-jest-config.ts
@@ -1,6 +1,5 @@
 import { NormalizedSchema } from './normalize-options';
 import { Tree } from '@nrwl/devkit';
-import { updateBabelJestConfig } from '@nrwl/react/src/rules/update-babel-jest-config';
 
 export function updateJestConfig(host: Tree, options: NormalizedSchema) {
   if (options.unitTestRunner !== 'jest') {
@@ -14,11 +13,4 @@ export function updateJestConfig(host: Tree, options: NormalizedSchema) {
     "transform: {\n    '^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',"
   );
   host.write(configPath, content);
-
-  updateBabelJestConfig(host, options.appProjectRoot, (json) => {
-    if (options.style === 'styled-jsx') {
-      json.plugins = (json.plugins || []).concat('styled-jsx/babel');
-    }
-    return json;
-  });
 }
diff --git a/packages/next/src/migrations/update-11-5-0/update-babel-config.spec.ts b/packages/next/src/migrations/update-11-5-0/update-babel-config.spec.ts
new file mode 100644
index 0000000000..5a5646437d
--- /dev/null
+++ b/packages/next/src/migrations/update-11-5-0/update-babel-config.spec.ts
@@ -0,0 +1,63 @@
+import * as path from 'path';
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { readJson, Tree } from '@nrwl/devkit';
+import updateBabelConfig from './update-babel-config';
+
+describe('Migrate babel setup', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it(`should add web babel preset if it does not exist`, async () => {
+    tree.write(
+      'workspace.json',
+      JSON.stringify({
+        projects: {
+          app1: {
+            root: 'apps/app1',
+          },
+          app2: {
+            root: 'apps/app2',
+          },
+          app3: {
+            root: 'apps/app3',
+          },
+        },
+      })
+    );
+    tree.write(
+      'nx.json',
+      JSON.stringify({
+        projects: {
+          app1: {},
+          app2: {},
+          app3: {},
+        },
+      })
+    );
+    tree.write(
+      'apps/app1/.babelrc',
+      JSON.stringify({
+        presets: ['@nrwl/react/babel'],
+      })
+    );
+    tree.write(
+      'apps/app2/.babelrc',
+      JSON.stringify({ presets: ['next/babel'] })
+    );
+
+    await updateBabelConfig(tree);
+
+    expect(readJson(tree, 'apps/app1/.babelrc')).toMatchObject({
+      presets: ['@nrwl/react/babel'],
+    });
+
+    expect(readJson(tree, 'apps/app2/.babelrc')).toMatchObject({
+      presets: ['@nrwl/next/babel'],
+    });
+
+    expect(tree.exists('apps/app3/.babelrc')).not.toBeTruthy();
+  });
+});
diff --git a/packages/next/src/migrations/update-11-5-0/update-babel-config.ts b/packages/next/src/migrations/update-11-5-0/update-babel-config.ts
new file mode 100644
index 0000000000..47c32090d2
--- /dev/null
+++ b/packages/next/src/migrations/update-11-5-0/update-babel-config.ts
@@ -0,0 +1,22 @@
+import { formatFiles, getProjects, Tree, updateJson } from '@nrwl/devkit';
+
+export async function updateBabelConfig(host: Tree) {
+  const projects = getProjects(host);
+
+  projects.forEach((p) => {
+    const babelrcPath = `${p.root}/.babelrc`;
+    if (!host.exists(babelrcPath)) return;
+
+    updateJson(host, babelrcPath, (json) => {
+      json.presets = json.presets || [];
+      json.presets = json.presets.map((x) =>
+        x === 'next/babel' ? '@nrwl/next/babel' : x
+      );
+      return json;
+    });
+  });
+
+  await formatFiles(host);
+}
+
+export default updateBabelConfig;
diff --git a/packages/node/src/schematics/application/application.spec.ts b/packages/node/src/schematics/application/application.spec.ts
index 9dfd950de8..fa47a7eb7a 100644
--- a/packages/node/src/schematics/application/application.spec.ts
+++ b/packages/node/src/schematics/application/application.spec.ts
@@ -337,33 +337,13 @@ describe('app', () => {
           displayName: 'my-node-app',
           preset: '../../jest.preset.js',
           transform: {
-            '^.+\\\\\\\\.[tj]s$': [
-              'babel-jest',
-              { cwd: __dirname, configFile: './babel-jest.config.json' },
-            ],
+            '^.+\\\\\\\\.[tj]s$': 'babel-jest',
           },
           moduleFileExtensions: ['ts', 'js', 'html'],
           coverageDirectory: '../../coverage/apps/my-node-app',
         };
         "
       `);
-
-      expect(readJsonInTree(tree, 'apps/my-node-app/babel-jest.config.json'))
-        .toMatchInlineSnapshot(`
-        Object {
-          "presets": Array [
-            Array [
-              "@babel/preset-env",
-              Object {
-                "targets": Object {
-                  "node": "current",
-                },
-              },
-            ],
-            "@babel/preset-typescript",
-          ],
-        }
-      `);
     });
   });
   describe('--js flag', () => {
diff --git a/packages/node/src/schematics/library/library.spec.ts b/packages/node/src/schematics/library/library.spec.ts
index 7e8fdc8c44..593d328a60 100644
--- a/packages/node/src/schematics/library/library.spec.ts
+++ b/packages/node/src/schematics/library/library.spec.ts
@@ -449,34 +449,13 @@ describe('lib', () => {
           displayName: 'my-lib',
           preset: '../../jest.preset.js',
           transform: {
-            '^.+\\\\\\\\.[tj]sx?$': [
-              'babel-jest',
-              { cwd: __dirname, configFile: './babel-jest.config.json' },
-            ],
+            '^.+\\\\\\\\.[tj]sx?$': 'babel-jest',
           },
           moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
           coverageDirectory: '../../coverage/libs/my-lib',
         };
         "
       `);
-
-      expect(readJsonInTree(tree, 'libs/my-lib/babel-jest.config.json'))
-        .toMatchInlineSnapshot(`
-        Object {
-          "presets": Array [
-            Array [
-              "@babel/preset-env",
-              Object {
-                "targets": Object {
-                  "node": "current",
-                },
-              },
-            ],
-            "@babel/preset-typescript",
-            "@babel/preset-react",
-          ],
-        }
-      `);
     });
   });
   describe('--js flag', () => {
diff --git a/packages/react/babel.ts b/packages/react/babel.ts
index e2fbb486bc..e189c2e074 100644
--- a/packages/react/babel.ts
+++ b/packages/react/babel.ts
@@ -5,6 +5,9 @@
 module.exports = function (api: any, options: {}) {
   api.assertVersion(7);
   return {
-    presets: [[require.resolve('@babel/preset-react'), { useBuiltIns: true }]],
+    presets: [
+      '@nrwl/web/babel',
+      [require.resolve('@babel/preset-react'), { useBuiltIns: true }],
+    ],
   };
 };
diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts
index 56e6d3f5cf..56266da8bc 100644
--- a/packages/react/src/generators/application/application.spec.ts
+++ b/packages/react/src/generators/application/application.spec.ts
@@ -565,12 +565,7 @@ describe('app', () => {
       });
 
       const babelrc = readJson(appTree, 'apps/my-app/.babelrc');
-      const babelJestConfig = readJson(
-        appTree,
-        'apps/my-app/babel-jest.config.json'
-      );
       expect(babelrc.plugins).toContain('styled-jsx/babel');
-      expect(babelJestConfig.plugins).toContain('styled-jsx/babel');
     });
   });
 
diff --git a/packages/react/src/generators/application/lib/update-jest-config.ts b/packages/react/src/generators/application/lib/update-jest-config.ts
index 3c80868dfa..b725b314a3 100644
--- a/packages/react/src/generators/application/lib/update-jest-config.ts
+++ b/packages/react/src/generators/application/lib/update-jest-config.ts
@@ -1,4 +1,3 @@
-import { updateBabelJestConfig } from '../../../rules/update-babel-jest-config';
 import { updateJestConfigContent } from '../../../utils/jest-utils';
 import { NormalizedSchema } from '../schema';
 import { offsetFromRoot, Tree, updateJson } from '@nrwl/devkit';
@@ -26,11 +25,4 @@ export function updateJestConfig(host: Tree, options: NormalizedSchema) {
   const originalContent = host.read(configPath).toString();
   const content = updateJestConfigContent(originalContent);
   host.write(configPath, content);
-
-  updateBabelJestConfig(host, options.appProjectRoot, (json) => {
-    if (options.style === 'styled-jsx') {
-      json.plugins = (json.plugins || []).concat('styled-jsx/babel');
-    }
-    return json;
-  });
 }
diff --git a/packages/react/src/generators/library/library.spec.ts b/packages/react/src/generators/library/library.spec.ts
index 9f97930f72..0f41f6cd5e 100644
--- a/packages/react/src/generators/library/library.spec.ts
+++ b/packages/react/src/generators/library/library.spec.ts
@@ -487,10 +487,6 @@ describe('lib', () => {
 
       const workspaceJson = readJson(appTree, '/workspace.json');
       const babelrc = readJson(appTree, 'libs/my-lib/.babelrc');
-      const babelJestConfig = readJson(
-        appTree,
-        'libs/my-lib/babel-jest.config.json'
-      );
 
       expect(workspaceJson.projects['my-lib'].architect.build).toMatchObject({
         options: {
@@ -498,7 +494,6 @@ describe('lib', () => {
         },
       });
       expect(babelrc.plugins).toContain('styled-jsx/babel');
-      expect(babelJestConfig.plugins).toContain('styled-jsx/babel');
     });
 
     it('should support style none', async () => {
diff --git a/packages/react/src/generators/library/library.ts b/packages/react/src/generators/library/library.ts
index 11994935f6..a41c9a4229 100644
--- a/packages/react/src/generators/library/library.ts
+++ b/packages/react/src/generators/library/library.ts
@@ -19,7 +19,6 @@ import {
   typesReactRouterDomVersion,
 } from '../../utils/versions';
 import { Schema } from './schema';
-import { updateBabelJestConfig } from '../../rules/update-babel-jest-config';
 import {
   addDependenciesToPackageJson,
   addProjectConfiguration,
@@ -95,13 +94,6 @@ export async function libraryGenerator(host: Tree, schema: Schema) {
       babelJest: true,
     });
     tasks.push(jestTask);
-
-    updateBabelJestConfig(host, options.projectRoot, (json) => {
-      if (options.style === 'styled-jsx') {
-        json.plugins = (json.plugins || []).concat('styled-jsx/babel');
-      }
-      return json;
-    });
   }
 
   if (options.component) {
diff --git a/packages/react/src/rules/update-babel-jest-config.spec.ts b/packages/react/src/rules/update-babel-jest-config.spec.ts
deleted file mode 100644
index e8a2f65df1..0000000000
--- a/packages/react/src/rules/update-babel-jest-config.spec.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { readJson, Tree } from '@nrwl/devkit';
-import { updateBabelJestConfig } from './update-babel-jest-config';
-import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
-
-describe('updateBabelJestConfig', () => {
-  let tree: Tree;
-
-  beforeEach(() => {
-    tree = createTreeWithEmptyWorkspace();
-  });
-
-  it('should update babel-jest.config.json', async () => {
-    tree.write('/apps/demo/babel-jest.config.json', JSON.stringify({}));
-
-    updateBabelJestConfig(tree, '/apps/demo', (json) => {
-      json.plugins = ['test'];
-      return json;
-    });
-
-    const config = readJson(tree, '/apps/demo/babel-jest.config.json');
-    expect(config.plugins).toEqual(['test']);
-  });
-
-  it('should do nothing if project does not use babel jest', async () => {
-    updateBabelJestConfig(tree, '/apps/demo', (json) => {
-      json.plugins = ['test'];
-      return json;
-    });
-    expect(tree.exists('/apps/demo/babel-jest.config.json')).toBe(false);
-  });
-});
diff --git a/packages/react/src/rules/update-babel-jest-config.ts b/packages/react/src/rules/update-babel-jest-config.ts
deleted file mode 100644
index 67ebf7f27b..0000000000
--- a/packages/react/src/rules/update-babel-jest-config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Tree, updateJson } from '@nrwl/devkit';
-
-type BabelJestConfigUpdater<T> = (json: T) => T;
-
-export function updateBabelJestConfig<T = any>(
-  host: Tree,
-  projectRoot: string,
-  update: BabelJestConfigUpdater<T>
-) {
-  const configPath = `${projectRoot}/babel-jest.config.json`;
-  if (host.exists(configPath)) {
-    updateJson(host, configPath, update);
-  }
-}
diff --git a/packages/web/babel.ts b/packages/web/babel.ts
index 3adc5aff7e..5d0260db34 100644
--- a/packages/web/babel.ts
+++ b/packages/web/babel.ts
@@ -25,18 +25,23 @@ module.exports = function (api: any, options: NxReactBabelPresetOptions = {}) {
       // Support module/nomodule pattern.
       [
         require.resolve('@babel/preset-env'),
-        {
-          // Allow importing core-js in entrypoint and use browserlist to select polyfills.
-          // This is needed for differential loading as well.
-          useBuiltIns: 'entry',
-          corejs: 3,
-          // Do not transform modules to CJS
-          modules: false,
-          targets: isModern ? { esmodules: true } : undefined,
-          bugfixes: true,
-          // Exclude transforms that make all code slower
-          exclude: ['transform-typeof-symbol'],
-        },
+        // For Jest tests, NODE_ENV is set as 'test' and we only want to set target as Node.
+        // All other options will fail in Jest since Node does not support some ES features
+        // such as import syntax.
+        process.env.NODE_ENV === 'test'
+          ? { targets: { node: 'current' } }
+          : {
+              // Allow importing core-js in entrypoint and use browserlist to select polyfills.
+              // This is needed for differential loading as well.
+              useBuiltIns: 'entry',
+              corejs: 3,
+              // Do not transform modules to CJS
+              modules: false,
+              targets: isModern ? { esmodules: true } : undefined,
+              bugfixes: true,
+              // Exclude transforms that make all code slower
+              exclude: ['transform-typeof-symbol'],
+            },
       ],
       require.resolve('@babel/preset-typescript'),
     ],
diff --git a/packages/web/migrations.json b/packages/web/migrations.json
index 7b672650ca..4bff0a6d68 100644
--- a/packages/web/migrations.json
+++ b/packages/web/migrations.json
@@ -14,6 +14,12 @@
       "version": "9.2.0-beta.1",
       "description": "Set buildLibsFromSource property to true to not break existing projects.",
       "factory": "./src/migrations/update-9-2-0/set-build-libs-from-source"
+    },
+    "update-babel-config-11.5.0": {
+      "cli": "nx",
+      "version": "11.5.0-beta.1",
+      "description": "Update babel config to support different TS setup",
+      "factory": "./src/migrations/update-11-5-0/update-babel-config"
     }
   }
 }
diff --git a/packages/web/src/generators/application/application.spec.ts b/packages/web/src/generators/application/application.spec.ts
index e445f6ed27..7e7fd95543 100644
--- a/packages/web/src/generators/application/application.spec.ts
+++ b/packages/web/src/generators/application/application.spec.ts
@@ -354,31 +354,13 @@ describe('app', () => {
           preset: '../../jest.preset.js',
           setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
           transform: {
-            '^.+\\\\\\\\.[tj]s$': [ 'babel-jest',
-            { cwd: __dirname, configFile: './babel-jest.config.json' }]
+            '^.+\\\\\\\\.[tj]s$': 'babel-jest'
           },
             moduleFileExtensions: ['ts', 'js', 'html'],
           coverageDirectory: '../../coverage/apps/my-app'
         };
         "
       `);
-
-      expect(readJson(tree, 'apps/my-app/babel-jest.config.json'))
-        .toMatchInlineSnapshot(`
-        Object {
-          "presets": Array [
-            Array [
-              "@babel/preset-env",
-              Object {
-                "targets": Object {
-                  "node": "current",
-                },
-              },
-            ],
-            "@babel/preset-typescript",
-          ],
-        }
-      `);
     });
   });
 });
diff --git a/packages/web/src/generators/application/files/app/.babelrc__tmpl__ b/packages/web/src/generators/application/files/app/.babelrc__tmpl__
index 0967ef424b..2e593427f7 100644
--- a/packages/web/src/generators/application/files/app/.babelrc__tmpl__
+++ b/packages/web/src/generators/application/files/app/.babelrc__tmpl__
@@ -1 +1,5 @@
-{}
+{
+  "presets": [
+    "@nrwl/web/babel"
+  ]
+}
diff --git a/packages/web/src/generators/init/init.ts b/packages/web/src/generators/init/init.ts
index 62f1b039be..2cb408f0bd 100644
--- a/packages/web/src/generators/init/init.ts
+++ b/packages/web/src/generators/init/init.ts
@@ -42,7 +42,6 @@ function initRootBabelConfig(tree: Tree) {
   }
 
   writeJson(tree, '/babel.config.json', {
-    presets: ['@nrwl/web/babel'],
     babelrcRoots: ['*'], // Make sure .babelrc files other than root can be loaded in a monorepo
   });
 }
diff --git a/packages/web/src/migrations/update-11-5-0/update-babel-config.spec.ts b/packages/web/src/migrations/update-11-5-0/update-babel-config.spec.ts
new file mode 100644
index 0000000000..584b2ec62b
--- /dev/null
+++ b/packages/web/src/migrations/update-11-5-0/update-babel-config.spec.ts
@@ -0,0 +1,104 @@
+import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
+import { readJson, Tree } from '@nrwl/devkit';
+import { updateBabelConfig } from './update-babel-config';
+describe('Migrate babel setup', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace();
+  });
+
+  it(`should add web babel preset if it does not exist`, async () => {
+    tree.write(
+      'workspace.json',
+      JSON.stringify({
+        projects: {
+          app1: {
+            root: 'apps/app1',
+            projectType: 'application',
+          },
+          app2: {
+            root: 'apps/app2',
+            projectType: 'application',
+          },
+          app3: {
+            root: 'apps/app3',
+            projectType: 'application',
+          },
+          app4: {
+            root: 'apps/app4',
+            projectType: 'application',
+          },
+          app5: {
+            root: 'apps/app5',
+            projectType: 'application',
+          },
+          lib1: {
+            root: 'libs/lib1',
+            projectType: 'library',
+          },
+        },
+      })
+    );
+    tree.write(
+      'nx.json',
+      JSON.stringify({
+        projects: {
+          app1: {},
+          app2: {},
+          app3: {},
+          app4: {},
+          app5: {},
+          lib1: {},
+        },
+      })
+    );
+    tree.write(
+      'babel.config.json',
+      JSON.stringify({
+        presets: ['@nrwl/web/babel'],
+      })
+    );
+    tree.write('apps/app1/.babelrc', JSON.stringify({}));
+    tree.write(
+      'apps/app2/.babelrc',
+      JSON.stringify({ presets: ['@nrwl/web/babel'] })
+    );
+    tree.write(
+      'apps/app3/.babelrc',
+      JSON.stringify({ presets: ['@nrwl/react/babel'] })
+    );
+    tree.write(
+      'apps/app4/.babelrc',
+      JSON.stringify({ presets: ['@nrwl/gatsby/babel'] })
+    );
+
+    await updateBabelConfig(tree);
+
+    expect(readJson(tree, 'babel.config.json').presets).not.toContain(
+      '@nrwl/web/babel'
+    );
+
+    expect(readJson(tree, 'apps/app1/.babelrc')).toMatchObject({
+      presets: ['@nrwl/web/babel'],
+    });
+
+    expect(readJson(tree, 'apps/app2/.babelrc')).toMatchObject({
+      presets: ['@nrwl/web/babel'],
+    });
+
+    expect(readJson(tree, 'apps/app3/.babelrc')).toMatchObject({
+      presets: ['@nrwl/react/babel'],
+    });
+
+    expect(readJson(tree, 'apps/app4/.babelrc')).toMatchObject({
+      presets: ['@nrwl/gatsby/babel'],
+    });
+
+    expect(tree.exists('apps/app5/.babelrc')).not.toBeTruthy();
+
+    expect(readJson(tree, 'libs/lib1/.babelrc')).toMatchObject({
+      presets: ['@nrwl/web/babel'],
+    });
+  });
+});
diff --git a/packages/web/src/migrations/update-11-5-0/update-babel-config.ts b/packages/web/src/migrations/update-11-5-0/update-babel-config.ts
new file mode 100644
index 0000000000..d3a8a38c01
--- /dev/null
+++ b/packages/web/src/migrations/update-11-5-0/update-babel-config.ts
@@ -0,0 +1,49 @@
+import { formatFiles, getProjects, Tree, updateJson } from '@nrwl/devkit';
+
+export async function updateBabelConfig(host: Tree) {
+  const projects = getProjects(host);
+
+  if (host.exists('babel.config.json')) {
+    updateJson(host, 'babel.config.json', (json) => {
+      if (Array.isArray(json.presets)) {
+        json.presets = json.presets.filter((x) => x !== '@nrwl/web/babel');
+      }
+      return json;
+    });
+  }
+
+  projects.forEach((p) => {
+    const babelrcPath = `${p.root}/.babelrc`;
+
+    // Add `@nrwl/web/babel` to projects that did not previously use it.
+    // This is needed because we removed it from the root.
+    if (host.exists(babelrcPath)) {
+      updateJson(host, babelrcPath, (json) => {
+        json.presets = json.presets || [];
+        if (
+          -1 ===
+          json.presets.findIndex(
+            (x) =>
+              x === '@nrwl/web/babel' ||
+              x === '@nrwl/react/babel' ||
+              x === '@nrwl/gatsby/babel'
+          )
+        ) {
+          json.presets.push('@nrwl/web/babel');
+        }
+        return json;
+      });
+      // Non-buildable libraries might be included in applications that
+      // require .babelrc to exist and contain '@nrwl/web/babel' preset
+    } else if (p.projectType === 'library') {
+      host.write(
+        babelrcPath,
+        JSON.stringify({ presets: ['@nrwl/web/babel'] }, null, 2)
+      );
+    }
+  });
+
+  await formatFiles(host);
+}
+
+export default updateBabelConfig;
diff --git a/packages/workspace/src/generators/library/files/lib/__dot__babelrc__tmpl__ b/packages/workspace/src/generators/library/files/lib/__dot__babelrc__tmpl__
new file mode 100644
index 0000000000..0cae4a9a81
--- /dev/null
+++ b/packages/workspace/src/generators/library/files/lib/__dot__babelrc__tmpl__
@@ -0,0 +1,3 @@
+{
+  "presets": ["@nrwl/web/babel"]
+}
diff --git a/packages/workspace/src/generators/library/library.spec.ts b/packages/workspace/src/generators/library/library.spec.ts
index a903fabcbc..5efd98ea1f 100644
--- a/packages/workspace/src/generators/library/library.spec.ts
+++ b/packages/workspace/src/generators/library/library.spec.ts
@@ -718,34 +718,16 @@ describe('lib', () => {
           displayName: 'my-lib',
           preset: '../../jest.preset.js',
           transform: {
-            '^.+\\\\\\\\.[tj]sx?$': [ 'babel-jest',
-            { cwd: __dirname, configFile: './babel-jest.config.json' }]
+            '^.+\\\\\\\\.[tj]sx?$': 'babel-jest'
           },
             moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
           coverageDirectory: '../../coverage/libs/my-lib'
         };
         "
       `);
-
-      expect(readJson(tree, 'libs/my-lib/babel-jest.config.json'))
-        .toMatchInlineSnapshot(`
-        Object {
-          "presets": Array [
-            Array [
-              "@babel/preset-env",
-              Object {
-                "targets": Object {
-                  "node": "current",
-                },
-              },
-            ],
-            "@babel/preset-typescript",
-            "@babel/preset-react",
-          ],
-        }
-      `);
     });
   });
+
   describe('--pascalCaseFiles', () => {
     it('should generate files with upper case names', async () => {
       await libraryGenerator(tree, {
@@ -772,4 +754,23 @@ describe('lib', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('--skipBabelrc', () => {
+    it('should skip generating .babelrc when --skipBabelrc=true', async () => {
+      await libraryGenerator(tree, {
+        ...defaultOptions,
+        name: 'myLib',
+        skipBabelrc: true,
+      });
+      expect(tree.exists('libs/my-lib/.babelrc')).toBeFalsy();
+    });
+
+    it('should generate .babelrc by default', async () => {
+      await libraryGenerator(tree, {
+        ...defaultOptions,
+        name: 'myLib',
+      });
+      expect(tree.exists('libs/my-lib/.babelrc')).toBeTruthy();
+    });
+  });
 });
diff --git a/packages/workspace/src/generators/library/library.ts b/packages/workspace/src/generators/library/library.ts
index 9331e04965..7fd6a7d211 100644
--- a/packages/workspace/src/generators/library/library.ts
+++ b/packages/workspace/src/generators/library/library.ts
@@ -100,6 +100,7 @@ function createFiles(tree: Tree, options: NormalizedSchema) {
 
   generateFiles(tree, join(__dirname, './files/lib'), options.projectRoot, {
     ...options,
+    dot: '.',
     className,
     name,
     propertyName,
@@ -117,6 +118,10 @@ function createFiles(tree: Tree, options: NormalizedSchema) {
     );
   }
 
+  if (options.skipBabelrc) {
+    tree.delete(join(options.projectRoot, '.babelrc'));
+  }
+
   if (options.js) {
     toJS(tree);
   }
diff --git a/packages/workspace/src/generators/library/schema.d.ts b/packages/workspace/src/generators/library/schema.d.ts
index e6a6cc1d0c..2993240d0b 100644
--- a/packages/workspace/src/generators/library/schema.d.ts
+++ b/packages/workspace/src/generators/library/schema.d.ts
@@ -15,4 +15,5 @@ export interface Schema {
   babelJest?: boolean;
   pascalCaseFiles?: boolean;
   strict?: boolean;
+  skipBabelrc?: boolean;
 }
diff --git a/packages/workspace/src/generators/library/schema.json b/packages/workspace/src/generators/library/schema.json
index c900e0720a..6843fcbc8a 100644
--- a/packages/workspace/src/generators/library/schema.json
+++ b/packages/workspace/src/generators/library/schema.json
@@ -81,6 +81,11 @@
       "type": "boolean",
       "description": "Whether to enable tsconfig strict mode or not.",
       "default": false
+    },
+    "skipBabelrc": {
+      "type": "boolean",
+      "description": "Do not generate .babelrc file. Useful for Node libraries that are not compiled by Babel",
+      "default": false
     }
   },
   "required": ["name"]
diff --git a/packages/workspace/src/generators/preset/preset.spec.ts b/packages/workspace/src/generators/preset/preset.spec.ts
index be21cebd60..9734fccc84 100644
--- a/packages/workspace/src/generators/preset/preset.spec.ts
+++ b/packages/workspace/src/generators/preset/preset.spec.ts
@@ -49,7 +49,6 @@ describe('preset', () => {
     expect(tree.children('apps/proj')).toMatchSnapshot();
     expect(tree.children('apps/proj/src/')).toMatchSnapshot();
     expect(tree.children('apps/proj/src/app')).toMatchSnapshot();
-    console.log(tree.children(''));
 
     expect(
       JSON.parse(tree.read('/workspace.json').toString()).cli.defaultCollection