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

jasongerbes · 2023-02-24T01:41:32Z

Current Behavior

When using @nrwl/next@latest with [email protected], the @nrwl/next:build executor doesn't respect the executor options.

The .next folder is built inline (e.g. apps/X/.next) rather than in the configured ouputPath (e.g. dist/apps/X/.next).

This issue is due to an internal breaking change in version 13.2.0 of Next that removed the custom conf option of the next/dist/build function: vercel/next.js#45455

Expected Behavior

The .next build output should be located in the outputPath folder, e.g. dist/apps/X/.next.

GitHub Repo

https://github.com/jasongerbes/nx-examples/tree/next-13.2.0

Steps to Reproduce

Create a Nx workspace with @nrwl/next
Add a Next application test-next-app
Upgrade next to 13.2.0
Run nx build test-next-app

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.18.0
   OS   : darwin arm64
   yarn : 1.22.19
   
   nx                      : 15.7.2
   @nrwl/jest              : 15.7.2
   @nrwl/linter            : 15.7.2
   @nrwl/workspace         : 15.7.2
   @nrwl/angular           : 15.7.2
   @nrwl/cli               : 15.7.2
   @nrwl/cypress           : 15.7.2
   @nrwl/devkit            : 15.7.2
   @nrwl/eslint-plugin-nx  : 15.7.2
   @nrwl/js                : 15.7.2
   @nrwl/next              : 15.7.2
   @nrwl/react             : 15.7.2
   @nrwl/rollup            : 15.7.2
   @nrwl/tao               : 15.7.2
   @nrwl/web               : 15.7.2
   @nrwl/webpack           : 15.7.2
   @nrwl/nx-cloud          : 15.0.3
   typescript              : 4.8.4
   ---------------------------------------
   Community plugins:
   @ngrx/component-store : 15.0.0
   @ngrx/effects         : 15.0.0
   @ngrx/entity          : 15.0.0
   @ngrx/router-store    : 15.0.0
   @ngrx/store           : 15.0.0
   @ngrx/store-devtools  : 15.0.0

Failure Logs

No response

Additional Information

No response

The text was updated successfully, but these errors were encountered:

Kolahzary · 2023-02-24T14:54:28Z

Also happened to us for updating to 13.2.1

Create a fresh NX monorepo
Create a nextjs app
Create a nextjs library
Use the library inside the app -> build will succeed till this step
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)

sre-is-toby · 2023-02-25T01:00:24Z

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

Brian-McBride · 2023-02-27T21:37:26Z

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.

sabbircste · 2023-02-28T04:45:10Z

any update from Nrwl?

skaneprime · 2023-03-01T15:02:04Z

any update from Nrwl?

Still waiting This issue is critical eh. Is there any workarounds for now?

ddhp · 2023-03-02T02:11:34Z

+1, we are building next.js app with nx:run-commands which means we have to copy all libs to the next.js folder and losing benefits from using nx

prateekbh · 2023-03-02T08:20:12Z

creading adoption issues at our end as well

ianldgs · 2023-03-02T09:11:31Z

Temporary workaround, tested in [email protected], 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 [email protected]+
+  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, "../../"),
  },

ruslanguns · 2023-03-02T10:48:29Z

@ianldgs, I'm a bit confused by your last message. Could you please clarify whether the workaround you provided in the configuration would make it work? Thank you.

ianldgs · 2023-03-02T10:52:00Z

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

ruslanguns · 2023-03-02T11:11:23Z

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

ianldgs · 2023-03-02T11:21:27Z

It's definitely not a production-ready solution :p

From what I peaked at the source code of @nrwl/nx:build, it will be a hard proper fix now that next internals don't have a way to override the next config.

rmachado-studocu · 2023-03-02T11:24:50Z

For a more concrete explanation of what's happening:

The PR that changed how the build function doesn’t receive the config anymore as a 2nd argument at vercel/next.js: https://github.com/vercel/next.js/pull/45455/files
The code that still uses it at nrwl/nx/packages/next: https://github.com/nrwl/nx/blob/master/packages/next/src/executors/build/build.impl.ts#L77

So basically for now the only solution is to downgrade nextjs' version. I wonder if you can configure all things via the nextjs' cli command. If so, something that executes the build command passing the command via CLI would be a way 🤔

ianldgs · 2023-03-02T11:34:52Z

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:
#15214 (comment)

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.

skaneprime · 2023-03-02T13:52:01Z

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

I switched to Nx to 15.8.1 and Nx to 13.1.1 build throws this error

Here is nx report for more details

Both @nrwl/next and @nrwl/workspace at 15.8.1

Can you please provide how you can run it?

UPD: Updated all modules to 15.8.1 But still not working

ruslanguns · 2023-03-02T16:25:36Z

@skaneprime I think that's because the NX Cli doesn't support the appDir functionality yet. So, maybe you should consider follow the steps provided by @ianldgs above ☝️.

lucasmerlin · 2023-03-02T17:38:03Z

@ianldgs solution works as a workaround for me. I had to remove the distDir line from the next.config.js in the dist folder though. Removing that line can also be done programmatically, if you want to use it in a build script:

sed -i '' "/distDir/d" "./dist/apps/web/next.config.js"

Also I changed my distDir config to:

  distDir: "../../dist/apps/web/.next",

skaneprime · 2023-03-02T20:26:54Z

@ianldgs solution works as a workaround for me. I had to remove the distDir line from the next.config.js in the dist folder though. Removing that line can also be done programmatically, if you want to use it in a build script:
sed -i '' "/distDir/d" "./dist/apps/web/next.config.js"
Also I changed my distDir config to:
  distDir: "../../dist/apps/web/.next",

This did work for me too! Thanks!

Brian-McBride · 2023-03-06T17:58:06Z

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.

kentytik · 2023-03-08T01:15:27Z

Also I changed my distDir config to:
  distDir: "../../dist/apps/web/.next",

Is your '../../dist/apps/web/.next' directory outside the Next.js app project directory? Would having a 'distDir' outside the project directory work well considering this warning from the Next.js documentation:
distDir should not leave your project directory. For example, ../build is an invalid directory.
Source: Setting a custom build directory

My workaround that seems to work so far for all the @nrwl:next executors is (1) leave/keep the '.next' 'distDir' default within the next.js app project directory/root, then (2) symlink (on Linux) that default '.next' directory to the '.next' directory within the dist directory I have set for 'outputPath' in project.json (i.e. the default 'outputPath' setting when the app is generated with NX).

NX 15.8.5 and Next.js 13.2.3 seem to co-exst somewhat 'peacefully' that way. I still have this warning coming up, though: "Skipping project found at packages/apps/APP/.next since project .next already exists at packages/apps/ANOTHER-APP-built-earlier/.next! Specify a unique name for the project to allow Nx to differentiate between the two projects." although project names are completely different. The warning went away briefly after a reset the NX workspace.

Kolahzary · 2023-03-08T10:58:27Z

NX 15.8.5 and Next.js 13.2.3 seem to co-exst somewhat 'peacefully' that way. I still have this warning coming up, though: "Skipping project found at packages/apps/APP/.next since project .next already exists at packages/apps/ANOTHER-APP-built-earlier/.next! Specify a unique name for the project to allow Nx to differentiate between the two projects." although project names are completely different. The warning went away briefly after a reset the NX workspace.

I got the same warning on pnpm-workspaces, I changed pnpm-lock.yaml from

packages:
  - 'apps/**'
  - 'libs/**'

to:

packages:
  - 'apps/*'
  - 'libs/*'

it was searching the sub-directories for package.json files by default

skaneprime · 2023-03-12T15:53:12Z

The following fixed the problem for me.

Update to the latest Next.js version (13.2.4)

add transpilePackages: [] to next.config.js

Wouldn't that kill libs feature?

wescopeland · 2023-03-13T15:15:42Z

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+?

ianldgs · 2023-03-13T15:22:53Z

@jaysoo I see you're working with adding appDir support to the generator in #15569.
Are you aware of this issue? Without a fix, appDir isn't very useful. There are many fixes for it in [email protected]+

wescopeland · 2023-03-14T12:52:15Z

They are not commenting here, but it seems Nrwl is aware of the issue:
#15650

terrymun · 2023-03-17T14:40:13Z

Update: it seems like [email protected] has fixed this.

For some strange reason, even after upgrading to [email protected] and [email protected], my @nrwl/next:build command is still failing and it seems to be coming from webpack:

../headless/src/lib/button/button.tsx
Module parse failed: Unexpected token (1:12)
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 type { ComponentPropsWithoutRef, ForwardedRef, ForwardRefRenderFunction, ReactNode } from 'react';

The failure is coming from importing components from another package (in this example, packages/headless) in the same monorepo.

However, as long as I add the following empty array to next.config.js:

const nextConfig = {
  // Adding this line fixes all my issues
  transpilePackages: [],

  // ...rest of my config that worked in [email protected] and [email protected]
}

...then my build is working again. I have no idea why this works, but just putting it out here for those trying shopping around for a fix 🍀

hoffination · 2023-03-19T22:07:32Z

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 ([email protected] & [email protected]). 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

vire · 2023-04-05T09:30:49Z

I have the the issue

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

with following setup

>  NX   Report complete - copy this into the issue template

   Node : 16.18.1
   OS   : darwin arm64
   yarn : 3.3.1
   
   nx                      : 15.9.2
   @nrwl/js                : 15.9.2
   @nrwl/jest              : 15.9.2
   @nrwl/linter            : 15.9.2
   @nrwl/workspace         : 15.9.2
   @nrwl/cli               : 15.9.2
   @nrwl/cypress           : 15.9.2
   @nrwl/eslint-plugin-nx  : 15.9.2
   @nrwl/next              : 15.9.2
   @nrwl/node              : 15.9.2
   @nrwl/react             : 15.9.2
   @nrwl/storybook         : 15.9.2
   @nrwl/tao               : 15.9.2
   @nrwl/web               : 15.9.2
   @nrwl/nx-cloud          : 15.3.5
   typescript              : 4.9.5
   next@npm:12.3.4

gilmillasseau · 2023-04-10T17:17:33Z

Using:
"next": "^13.3.0",
"nx": "15.9.2",

You can also try this workaround:

// ... your next config file

module.exports = (phase) => ({
  ...nextConfig,
  distDir: phase === PHASE_PRODUCTION_BUILD ? '../../dist/apps/<YOUR_APP_PATH>/.next' : '.next',
});

This way you only change the output at build time and at runtime all stays the same.

Brian-McBride · 2023-04-10T20:42:24Z

@gilmillasseau Are you dropping out withNx completely then?

montogeek · 2023-05-03T15:26:24Z

I solved it by refactoring it to:

// Example NxNext Configuration
const nextConfig = {
  nx: {
    svgr: false,
  },
  eslint: {
    ignoreDuringBuilds: false,
  },
};

module.exports = async (phase) => {
  const nxConfig = await withNx(nextConfig)(phase);

  const config = withSentry(withPlausible(nxConfig));

  return config;
};

github-actions · 2023-06-03T00:06:53Z

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

jasongerbes added the type: bug label Feb 24, 2023

jasongerbes changed the title ~~next: The @nrwl/next:build executor is incompatible with Next 13.2.0~~ next: The @nrwl/next:build executor is incompatible with Next 13.2 Feb 24, 2023

AgentEnder added the scope: nextjs Issues related to NextJS support for Nx label Feb 24, 2023

ianldgs mentioned this issue Feb 27, 2023

autogenerated type import path fails during build on nextjs 13 app directory, not finding layout file #14558

Closed

ianldgs mentioned this issue Mar 7, 2023

@nrwl/next:build disregards project.json 'outputPath' and --outputPath CLI option #15471

Closed

flexbox mentioned this issue Mar 8, 2023

chore: 🤖 bump nx.dev to the last version and next.js to 13+ flexbox/weshipit.today#87

Merged

ndcunningham mentioned this issue Mar 14, 2023

fix(nextjs): refactor how webpack config is loaded with nextjs #15650

Merged

4 tasks

FrozenPandaz closed this as completed in #15650 Mar 15, 2023

hoffination mentioned this issue Mar 22, 2023

On nx 15.8.7 can't build Next app (13.1.6 nor 13.2.4) #15794

Closed

burakkgunduzz mentioned this issue Mar 23, 2023

You may need an additional loader to handle the result of these loaders. aralroca/next-translate-plugin#13

Closed

senorscan mentioned this issue Apr 25, 2023

Sentry doing nothing on a NextJS application run within NX getsentry/sentry-javascript#6314

Closed

3 tasks

j8seangel mentioned this issue May 12, 2023

Update nx and next versions GlobalFishingWatch/frontend#2063

Merged

3 tasks

electroheadfx mentioned this issue May 12, 2023

Updating to Next 13.2+ with NX 15.9 or 16 endalk200/create-t3-nx#22

Closed

github-actions bot added the outdated label Jun 3, 2023

github-actions bot locked as resolved and limited conversation to collaborators Jun 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jasongerbes commented Feb 24, 2023 •

edited

Loading

Kolahzary commented Feb 24, 2023

sre-is-toby commented Feb 25, 2023

Brian-McBride commented Feb 27, 2023

sabbircste commented Feb 28, 2023

skaneprime commented Mar 1, 2023

ddhp commented Mar 2, 2023

prateekbh commented Mar 2, 2023

ianldgs commented Mar 2, 2023 •

edited

Loading

ruslanguns commented Mar 2, 2023

ianldgs commented Mar 2, 2023

ruslanguns commented Mar 2, 2023

ianldgs commented Mar 2, 2023

rmachado-studocu commented Mar 2, 2023 •

edited

Loading

ianldgs commented Mar 2, 2023

skaneprime commented Mar 2, 2023 •

edited

Loading

ruslanguns commented Mar 2, 2023

lucasmerlin commented Mar 2, 2023

skaneprime commented Mar 2, 2023

Brian-McBride commented Mar 6, 2023

kentytik commented Mar 8, 2023 •

edited

Loading

Kolahzary commented Mar 8, 2023

skaneprime commented Mar 12, 2023

wescopeland commented Mar 13, 2023

ianldgs commented Mar 13, 2023

wescopeland commented Mar 14, 2023

terrymun commented Mar 17, 2023 •

edited

Loading

hoffination commented Mar 19, 2023

vire commented Apr 5, 2023

gilmillasseau commented Apr 10, 2023

Brian-McBride commented Apr 10, 2023

montogeek commented May 3, 2023

github-actions bot commented Jun 3, 2023

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

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

Comments

jasongerbes commented Feb 24, 2023 • edited Loading

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Additional Information

Kolahzary commented Feb 24, 2023

sre-is-toby commented Feb 25, 2023

Brian-McBride commented Feb 27, 2023

sabbircste commented Feb 28, 2023

skaneprime commented Mar 1, 2023

ddhp commented Mar 2, 2023

prateekbh commented Mar 2, 2023

ianldgs commented Mar 2, 2023 • edited Loading

ruslanguns commented Mar 2, 2023

ianldgs commented Mar 2, 2023

ruslanguns commented Mar 2, 2023

ianldgs commented Mar 2, 2023

rmachado-studocu commented Mar 2, 2023 • edited Loading

ianldgs commented Mar 2, 2023

skaneprime commented Mar 2, 2023 • edited Loading

ruslanguns commented Mar 2, 2023

lucasmerlin commented Mar 2, 2023

skaneprime commented Mar 2, 2023

Brian-McBride commented Mar 6, 2023

kentytik commented Mar 8, 2023 • edited Loading

Kolahzary commented Mar 8, 2023

skaneprime commented Mar 12, 2023

wescopeland commented Mar 13, 2023

ianldgs commented Mar 13, 2023

wescopeland commented Mar 14, 2023

terrymun commented Mar 17, 2023 • edited Loading

hoffination commented Mar 19, 2023

vire commented Apr 5, 2023

gilmillasseau commented Apr 10, 2023

Brian-McBride commented Apr 10, 2023

montogeek commented May 3, 2023

github-actions bot commented Jun 3, 2023

jasongerbes commented Feb 24, 2023 •

edited

Loading

ianldgs commented Mar 2, 2023 •

edited

Loading

rmachado-studocu commented Mar 2, 2023 •

edited

Loading

skaneprime commented Mar 2, 2023 •

edited

Loading

kentytik commented Mar 8, 2023 •

edited

Loading

terrymun commented Mar 17, 2023 •

edited

Loading