nx: next: The @nrwl/next:build executor is incompatible with Next 13.2

NextJS Issue tracking this problem (impacting other folk too): vercel/next.js#46374

Reading the “tracking” of this issue. It seems like, "hey, you are using undocumented and unsupported features from the dist folder. "

This likely means that the fix needs to come from Nrwl, not NextJS.

This issue is a showstopper, to put it kindly.

Is Nrwl aware that importing a component from a lib breaks when using Next.js 13.2+?

They are not commenting here, but it seems Nrwl is aware of the issue: https://github.com/nrwl/nx/pull/15650

Temporary workaround, tested in next@13.2.3, if you don’t use NX NextJS features, like:

• tsconfig.base.json paths (if you use npm/pnpm/yarn workspaces you should be fine)
• assets to be copied (couldn’t find in nx docs, just found mentions in the code, not sure what it is)
• file replacements
• nextconfig enhancer
• svgr

in your next.config.js:

const withNx = require("@nrwl/next/plugins/with-nx");

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  reactStrictMode: true,
+  distDir: "../../dist/apps/my-app/.next", // this is usually set by @nrwl/next:build, but silently fails in next@13.2+
+  transpilePackages: ["@my-npm-scope/my-package"], // for whatever module fails the build :/
+  // if you use nextjs appdir; there is a bug in next where their typescript plugin generates a wrong import path for pages
+  // maybe you can also fix with patch-package
+  typescript: {
+    ignoreBuildErrors: true,
+  },
  nx: {
    svgr: false,
  },
  // ...
};

module.exports = withNx(nextConfig);

Worth noting that in our case we also have:

  output: "standalone",
  experimental: {
    appDir: true,
    outputFileTracingRoot: path.join(__dirname, "../../"),
  },

NextJS Issue tracking this problem (impacting other folk too): vercel/next.js#46374

I am still seeing some loader issues on the latest that are not related to importing across projects. I seem to get a related issue when I upgrade nx or next to latest (nx@15.8.7 & next@13.2.4). I will also look for another issue to tie this to but I see the same thing @Kolahzary saw at the top of the thread:

# next upgrade to 13.2.4 from 13.1.6
../../libs/api/src/lib/constants.ts
Module parse failed: Unexpected token (5:2)
File was processed with these loaders:
 * ../../node_modules/next-translate/lib/cjs/plugin/loader.js
You may need an additional loader to handle the result of these loaders.
| export const API_ENDPOINT = (
|   HAVE_WINDOW ? process.env['NEXT_PUBLIC_API'] : process.env['NEXT_PUBLIC_API_SSR']
> ) as string

Import trace for requested module:
../../libs/api/src/lib/constants.ts
../../libs/api/src/index.ts

# nx upgrade to 15.8.7 from 15.8.6 (continues with next upgrade)
../../libs/api/src/lib/constants.ts
Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export const API_ENDPOINT = (
|   HAVE_WINDOW ? process.env['NEXT_PUBLIC_API'] : process.env['NEXT_PUBLIC_API_SSR']
> ) as string

Import trace for requested module:
../../libs/api/src/lib/constants.ts
../../libs/api/src/index.ts

Also happened to us for updating to 13.2.1

1. Create a fresh NX monorepo
2. Create a nextjs app
3. Create a nextjs library
4. Use the library inside the app -> build will succeed till this step
5. Update next to latest version -> build will fail with following error

Module parse failed: Unexpected token (3:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { SVGProps, memo } from "react";
| 
> const SvgLogo01 = (props: SVGProps<SVGSVGElement>) => (
|   <svg
Import trace for requested module:
../../libs/react-icons/src/lib/Logo01.tsx
../../libs/react-icons/src/lib/index.ts
../../libs/react-icons/src/index.ts

stacktrace:

Error: Build failed because of webpack errors
    at webpackBuildImpl (/root/mono1/node_modules/next/dist/build/webpack-build.js:231:21)
    at async Object.webpackBuild (/root/mono1/node_modules/next/dist/build/webpack-build.js:316:16)
    at async /root/mono1/node_modules/next/dist/build/index.js:480:77
    at async Span.traceAsyncFn (/root/mono1/node_modules/next/dist/trace/trace.js:79:20)
    at async build (/root/mono1/node_modules/next/dist/build/index.js:72:29)

I was testing out Turborepo, and Next run fine. That’s going to be pretty obvious.

Really, this is just because that monorepo tool is layered on top of the package manager’s workspace features. Well, Nx supports that as well.

So, while it is a bit different, it does seem that you could just set up your app and UI components libs as NPM/PNPM/Yarn workspaces. Parts of the solution, like Tailwind, can end up more manual maybe.

/** @type {import("tailwindcss").Config} */
const config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    '../../packages/ui/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
module.exports = config;

Where there are relative paths for processing. But, this is largely what the Nx tailwind Plugin does anyway and might still work fine.

@gilmillasseau Are you dropping out withNx completely then?

Ah, hey @rmachado-studocu! Nice to bump into you over the internets 🙃

So, the reason NX has to pass the config to the build function is for the features I mentioned in this comment: https://github.com/nrwl/nx/issues/15214#issuecomment-1451536766

If you don’t use those features, all you have to do is specify the distDir on next.config.js, which is something else that @nrwl/next:build does, but not to hard to replicate manually.

Thanks @ianldgs , I tested but got some weird behaviours, I rather downgraded NextJS to v13.1.1 which works smoothly with Next 15.8.1

@ruslanguns the workaround made it work for our project. But we don’t use any of the features NX provides for NextJS.