Creating a new NextJs Application with App Router option enabled fails to build

[fsrajner]

Current Behavior

Creating a new NextJS Applictaion using nx g @nx/next:app my-new-app with the following options:
✔ Which E2E test runner would you like to use? · cypress
✔ Would you like to use the App Router (recommended)? (Y/n) · true
✔ Would you like to use src/ directory? (Y/n) · true

generates a project which fails to build, error message:

`

nx run web2:build

▲ Next.js 14.0.4

✓ Creating an optimized production build
✓ Compiled successfully
Skipping linting
Checking validity of types .
We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
The following suggested values were added to your tsconfig.json. These values can be changed to fit your project's needs:

    - include was updated to add '.next/types/**/*.ts'

✓ Checking validity of types
Collecting page data .TypeError: n.createContext is not a function
at 1410 (/Users/infom/Workspace/falvapp/org/apps/web2/.next/server/chunks/823.js:1:81000)
at t (/Users/infom/Workspace/falvapp/org/apps/web2/.next/server/webpack-runtime.js:1:127)
at 908 (/Users/infom/Workspace/falvapp/org/apps/web2/.next/server/chunks/823.js:1:82414)
at t (/Users/infom/Workspace/falvapp/org/apps/web2/.next/server/webpack-runtime.js:1:127)
at 8205 (/Users/infom/Workspace/falvapp/org/apps/web2/.next/server/app/page.js:1:2178)
at Function.t (/Users/infom/Workspace/falvapp/org/apps/web2/.next/server/webpack-runtime.js:1:127)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async collectGenerateParams (/Users/infom/Workspace/falvapp/org/node_modules/next/dist/build/utils.js:884:17)
at async /Users/infom/Workspace/falvapp/org/node_modules/next/dist/build/utils.js:1100:17
at async Span.traceAsyncFn (/Users/infom/Workspace/falvapp/org/node_modules/next/dist/trace/trace.js:147:20)

Build error occurred
Error: Failed to collect page data for /
at /Users/infom/Workspace/falvapp/org/node_modules/next/dist/build/utils.js:1220:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}
Collecting page data .Warning: command "next build" exited with non-zero status code
`

Generating with the same options, except not enabling App Router will generate an Application that compiles successfully.

Expected Behavior

Generating a new NextJS project can be built.

GitHub Repo

No response

Steps to Reproduce

1. generate a new NextJS project with nx g @nx/next:app my-new-app
2. run npx nx run my-new-app:build

Nx Report

NX   Report complete - copy this into the issue template

Node   : 21.6.1
OS     : darwin-arm64
npm    : 10.2.4

nx (global)        : 18.0.5
nx                 : 18.0.5
@nx/js             : 18.0.5
@nx/jest           : 18.0.5
@nx/linter         : 18.0.5
@nx/eslint         : 18.0.5
@nx/workspace      : 18.0.5
@nx/cypress        : 18.0.5
@nx/devkit         : 18.0.5
@nx/eslint-plugin  : 18.0.5
@nx/nest           : 18.0.5
@nx/next           : 18.0.5
@nx/node           : 18.0.5
@nx/react          : 18.0.5
@nx/react-native   : 18.0.5
@nrwl/tao          : 18.0.5
@nx/vite           : 18.0.5
@nx/web            : 18.0.5
@nx/webpack        : 18.0.5
typescript         : 5.3.3

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[ndcunningham]

Hi, can you provide a sample repo of this?

Your initial comment said you generated nx g @nx/next:app my-new-app but ran the build for web2 is that the same app you generated from the first command?

[fsrajner]

Hello!
Thanks for checking it out, I uploaded a sample repo:

https://github.com/fsrajner/nextjs_sample_error/tree/main/org

This is the create workspace script:
`
xxx@MacMini nextjs_sample_error % npx create-nx-workspace

Need to install the following packages:
create-nx-workspace@18.0.7
Ok to proceed? (y) y

(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠴ idealTree:d2207cf76adb22dc: sill idealTree buildDeps

NX Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Where would you like to create your workspace? · org

✔ Which stack do you want to use? · react
✔ What framework would you like to use? · nextjs
✔ Integrated monorepo, or standalone project? · standalone
✔ Would you like to use the App Router (recommended)? · Yes
✔ Would you like to use the src/ directory? · Yes
✔ Test runner to use for end to end (E2E) tests · cypress
✔ Default stylesheet format · @emotion/styled
✔ Do you want Nx Cloud to make your CI fast? · skip

NX Creating your v18.0.7 workspace.

✔ Installing dependencies with npm
✔ Successfully created the workspace: org.

NX Directory is already under version control. Skipping initialization of git.

———————————————————————————————————————————————————————————————————————————————

NX First time using Nx? Check out this interactive Nx tutorial.

https://nx.dev/react-tutorial/1-code-generation
`

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[DeividZavala]

I got the same error, I just generated a new application with the command npx create-nx-workspace@latest my-app, selected react,nextjs, integrated monorepo, and emotion.

When I try to run the project, I get the same error as mentioned above.

UPDATE:

for my use case I solved the problem by removing the "jsxImportSource":"@emotion/react" property from the tsconfig.json file and since I don't use emotion directly in my project but through chakraUI (followed the installation guide from chakra's web) the error doesn't appear anymore.

I hope this helps.

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[ndcunningham]

The problem here is using the CSS-in-JS lib @emotion. From Next.js it is not fully support as they are working on it:
https://nextjs.org/docs/app/building-your-application/styling/css-in-js
emotion-js/emotion#2928

This is some support that they added but the results may vary based on your environment and use-case.
https://nextjs.org/docs/architecture/nextjs-compiler#emotion

[Bulletninja]

For me removing everything @emotion did not fix the issue, it only worked after I set "strict": false, in tsconfig.json

[github-actions]

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.