Terser + next 14 build error #21611

cyrus-za · 2024-02-05T15:51:59Z

Current Behavior

I upgrade from nx 17.2.7 to nx 18.0.1 using nx migrate latest and running the migrations.
As part of this migration, my version for nextjs moved from 13.5.2 to 14.0.4

When I try to build my nextjs app I get the following error

Failed to compile.

834.js from Terser
Unexpected token: punc ({) [834.js: 4510,
    26
  ]
    at js_error (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 32780)
    at croak (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 43882)
    at token_error (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 43989)
    at unexpected (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 44055)
    at as_property_name (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 68487)
    at concise_method_or_getset (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 64746)
    at class_ (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 64098)
    at statement (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 46908)
    at _embed_tokens_wrapper (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 45013)
    at block_ (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 56881)

static/media/pdf.worker.b3692421.js from Terser
Unexpected token: punc ({) [static/media/pdf.worker.b3692421.js: 11809,
      26
    ]
    at js_error (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 32780)
    at croak (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 43882)
    at token_error (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 43989)
    at unexpected (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 44055)
    at as_property_name (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 68487)
    at concise_method_or_getset (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 64746)
    at class_ (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 64098)
    at statement (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 46908)
    at _embed_tokens_wrapper (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 45013)
    at block_ (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 56881)

475.js from Terser
Unexpected token: punc ({) [475.js: 135153,
        10
      ]
    at js_error (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 32780)
    at croak (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 43882)
    at token_error (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 43989)
    at unexpected (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 44055)
    at as_property_name (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 68487)
    at concise_method_or_getset (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 64746)
    at class_ (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 64098)
    at statement (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 46908)
    at _embed_tokens_wrapper (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 45013)
    at block_ (/node_modules/.pnpm/next@14.0.4_@babel+core@7.23.9_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/terser/bundle.min.js: 1: 56881)


> Build failed because of webpack errors
   Creating an optimized production build  .Error occurred while trying to run the build command
1

Related:
vercel/next.js#60837

Expected Behavior

build should not fail

GitHub Repo

No response

Steps to Reproduce

nx migrate latest
pnpm i
nx build myApp

Nx Report

see logs

Failure Logs

No response

Package Manager Version

No response

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

No response

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

ndcunningham · 2024-02-09T21:56:25Z

I tried this out and it is working as expected.
Could this be related to your package manager

Could you create a small repro of this so I can take a look?

cyrus-za · 2024-02-12T15:49:47Z

I tried this out and it is working as expected. Could this be related to your package manager

Could you create a small repro of this so I can take a look?

Do you use turbo or webpack? I think it is related to the SWC packages.

I'll try and do a repro

cyrus-za · 2024-02-16T14:42:00Z

This seems to be the issue
vercel/next.js#61549

pnpm why pdfjs-dist
Legend: production dependency, optional only, dev only

dependencies:
react-pdf 7.3.1
└── pdfjs-dist 3.6.172

cyrus-za · 2024-02-16T15:44:27Z

To reproduce this issue, using node 20, do the following:

pnpx create-nx-workspace@latest

>  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? · integrated
✔ Application name · org
✔ 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 · none
✔ Default stylesheet format · css
✔ Do you want Nx Cloud to make your CI fast? · skip

pnpm add react-pdf@7.3.1
Add the following code to next.config.js

{ 
  ...
  transpilePackages: ['react-pdf'],
  swcMinify: false,
  webpack: (config) => {
    config.resolve.alias.canvas = false;
    return config;
  },
  ...
}

Add the following code to app/page.tsx

import 'react-pdf/dist/esm/Page/TextLayer.css'
import {  pdfjs } from 'react-pdf'

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/legacy/build/pdf.worker.js', import.meta.url).toString()

git diff apps/org

npx nx run-many -t build

cyrus-za · 2024-02-19T17:52:44Z

Downgrading to next 14.0.1 fixes it. Upgrading to 14.0.2 breaks it again. I can also see the build logs look completely different, so next must've changed the way they do builds in v14.0.2

ndcunningham · 2024-02-26T22:02:57Z

I am not sure if this is a Nx-related issue.
I can leave this open for more discussion but as it stands I do not think it is caused by Nx.

cyrus-za · 2024-02-27T17:13:54Z

It's a nextjs issue, but nx supports nextjs breaking changes with migrations, so I think it belongs here.

github-actions · 2024-03-13T00:20:14Z

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! 🙏

github-actions · 2024-04-28T00:08:54Z

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.

cyrus-za added the type: bug label Feb 5, 2024

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

ndcunningham self-assigned this Feb 9, 2024

ndcunningham added the blocked: repro needed label Feb 9, 2024

cyrus-za mentioned this issue Feb 19, 2024

Render breaks in nextjs 14.1.0 - ReferenceError: Can't find variable: exports leads to "Failed to load PDF file." wojtekmaj/react-pdf#1699

Open

4 tasks

github-actions bot added the stale label Mar 13, 2024

github-actions bot closed this as completed Mar 28, 2024

github-actions bot added the outdated label Apr 28, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Terser + next 14 build error #21611

Terser + next 14 build error #21611

cyrus-za commented Feb 5, 2024 •

edited

ndcunningham commented Feb 9, 2024 •

edited

cyrus-za commented Feb 12, 2024

cyrus-za commented Feb 16, 2024 •

edited

cyrus-za commented Feb 16, 2024 •

edited

cyrus-za commented Feb 19, 2024

ndcunningham commented Feb 26, 2024

cyrus-za commented Feb 27, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Apr 28, 2024

Terser + next 14 build error #21611

Terser + next 14 build error #21611

Comments

cyrus-za commented Feb 5, 2024 • edited

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Package Manager Version

Operating System

Additional Information

ndcunningham commented Feb 9, 2024 • edited

cyrus-za commented Feb 12, 2024

cyrus-za commented Feb 16, 2024 • edited

cyrus-za commented Feb 16, 2024 • edited

cyrus-za commented Feb 19, 2024

ndcunningham commented Feb 26, 2024

cyrus-za commented Feb 27, 2024

github-actions bot commented Mar 13, 2024

github-actions bot commented Apr 28, 2024

cyrus-za commented Feb 5, 2024 •

edited

ndcunningham commented Feb 9, 2024 •

edited

cyrus-za commented Feb 16, 2024 •

edited

cyrus-za commented Feb 16, 2024 •

edited