feat(nextjs): support webpack 5

e2e/next/src/next.test.ts

@@ -356,7 +356,6 @@ describe('Next.js Applications', () => {
       `
       module.exports = {
         future: {
-          // Nx doesn't support webpack 5 yet
           webpack5: false,
         },
         webpack: (c) => {
@@ -457,6 +456,104 @@ describe('Next.js Applications', () => {
     });
   }, 120000);
 
+  it('webpack5 - should be able to consume a react libs (buildable and non-buildable)', async () => {
+    const appName = uniq('app');
+    const buildableLibName = uniq('lib');
+    const nonBuildableLibName = uniq('lib');
+
+    runCLI(`generate @nrwl/next:app ${appName} --no-interactive`);
+    runCLI(
+      `generate @nrwl/react:lib ${nonBuildableLibName} --no-interactive --style=none`
+    );
+    runCLI(
+      `generate @nrwl/react:lib ${buildableLibName} --no-interactive --style=none --buildable`
+    );
+
+    const mainPath = `apps/${appName}/pages/index.tsx`;
+    updateFile(
+      mainPath,
+      `
+    import '@${proj}/${nonBuildableLibName}';
+    import '@${proj}/${buildableLibName}';
+    ${readFile(mainPath)}
+    `
+    );
+    // enable webpack 5
+    updateFile(
+      `apps/${appName}/next.config.js`,
+      `
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const withNx = require('@nrwl/next/plugins/with-nx');
+        
+        module.exports = withNx({
+          nx: {
+            // Set this to false if you do not want to use SVGR
+            // See: https://github.com/gregberge/svgr
+            svgr: true,
+          },
+          future: {
+            webpack5: true
+          }
+        });
+      `
+    );
+
+    // Update non-buildable lib to use css modules to test that next.js can compile it
+    updateFile(
+      `libs/${nonBuildableLibName}/src/lib/${nonBuildableLibName}.tsx`,
+      `
+            import styles from './style.module.css';
+            export function Test() {
+              return <div className={styles.container}>Hello</div>;
+            }
+            export default Test;
+          `
+    );
+    updateFile(
+      `libs/${nonBuildableLibName}/src/lib/style.module.css`,
+      `
+            .container {}
+          `
+    );
+
+    await checkApp(appName, {
+      checkUnitTest: true,
+      checkLint: true,
+      checkE2E: true,
+      checkWebpack5: true,
+    });
+  }, 120000);
+
+  it('webpack5 - should build with a next.config.js file in the dist folder', async () => {
+    const appName = uniq('app');
+
+    runCLI(`generate @nrwl/next:app ${appName} --no-interactive --style=css`);
+
+    updateFile(
+      `apps/${appName}/next.config.js`,
+      `
+        module.exports = {
+          future: {
+            webpack5: true,
+          },
+          webpack: (c) => {
+            console.log('NODE_ENV is', process.env.NODE_ENV);
+            return c;
+          }
+        }
+        `
+    );
+    // deleting `NODE_ENV` value, so that it's `undefined`, and not `"test"`
+    // by the time it reaches the build executor.
+    // this simulates existing behaviour of running a next.js build executor via Nx
+    delete process.env.NODE_ENV;
+    const result = runCLI(`build ${appName}`);
+
+    checkFilesExist(`dist/apps/${appName}/next.config.js`);
+    expect(result).toContain('NODE_ENV is production');
+    expect(result).toContain('Using webpack 5');
+  }, 120000);
+
   it('should allow using a custom server implementation in TypeScript', async () => {
     const appName = uniq('app');
 
@@ -528,9 +625,17 @@ function getData(): Promise<any> {
 
 async function checkApp(
   appName: string,
-  opts: { checkUnitTest: boolean; checkLint: boolean; checkE2E: boolean }
+  opts: {
+    checkUnitTest: boolean;
+    checkLint: boolean;
+    checkE2E: boolean;
+    checkWebpack5?: boolean;
+  }
 ) {
   const buildResult = runCLI(`build ${appName} --withDeps`);
+  if (opts.checkWebpack5) {
+    expect(buildResult).toContain('Using webpack 5');
+  }
   expect(buildResult).toContain(`Compiled successfully`);
   checkFilesExist(`dist/apps/${appName}/.next/build-manifest.json`);
   checkFilesExist(`dist/apps/${appName}/public/star.svg`);

packages/next/plugins/with-nx.ts

@@ -32,12 +32,6 @@ function withNx(nextConfig = {} as WithNxOptions) {
     nextConfig.target = 'experimental-serverless-trace';
   }
 
-  if (nextConfig.future?.webpack5) {
-    throw new Error(
-      'withNx() plugin: using the "webpack5" option with Nx is not supported yet'
-    );
-  }
-
   const userWebpack = nextConfig.webpack || ((x) => x);
   return {
     ...nextConfig,

packages/next/src/utils/config.ts

@@ -92,9 +92,7 @@ export function createWebpackConfig(
         oneOf: [
           // If coming from JS/TS file, then transform into React component using SVGR.
           {
-            issuer: {
-              test: /\.[jt]sx?$/,
-            },
+            issuer: /\.[jt]sx?$/,
             use: [
               {
                 loader: require.resolve('@svgr/webpack'),