Build fails after upgrading to Next.js 14 (webpack issues) - Works fine in dev mode #57535
Replies: 20 comments 30 replies
-
|
Hey @MartinXPN could add some piece of code causing this issue? |
Beta Was this translation helpful? Give feedback.
-
|
Hey @vignesh-gupta I tried running |
Beta Was this translation helpful? Give feedback.
-
|
I'm also having this issue and here's the minimal repo for reproducing the problem: https://github.com/mikeborozdin/next14-firebase-admin-issue Just run: npm i
npm run buildAll worked fine in Next 13 with the experimental server actions. |
Beta Was this translation helpful? Give feedback.
-
|
experimental: { |
Beta Was this translation helpful? Give feedback.
-
|
Happens to me too. I also use Firebase and Firebase admin packages. Have been using latest Next 13 in production since May and it's been working great. |
Beta Was this translation helpful? Give feedback.
-
|
Could you try to turn of swcMinify and see if the issue persists? |
Beta Was this translation helpful? Give feedback.
-
|
That changed the errors a bit to following:
|
Beta Was this translation helpful? Give feedback.
-
|
My next.config.js file looks like this: const withNextIntl = require('next-intl/plugin')(
// This is the default (also the `src` folder is supported out of the box)
'./i18n.js'
);
module.exports = withNextIntl({
pageExtensions: ["tsx", "js"],
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
config.module.rules.push(
...[
{
test: /\.yml$/,
type: "json",
use: "yaml-loader",
},
{
test: /\.svg$/,
use: "@svgr/webpack",
},
]
);
return config;
},
experimental: {
serverActions: true,
},
swcMinify: false
});
// Next bundle analyzer
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer(module.exports, {}) |
Beta Was this translation helpful? Give feedback.
-
|
Could you try to remove either of the rules you are pushing? |
Beta Was this translation helpful? Give feedback.
-
|
I don't think it's caused by the rules. I've posted my |
Beta Was this translation helpful? Give feedback.
-
|
Hey, has there been any updates on this? I'm running into the same sort of issues, specifically with Prisma & their serverless drivers. The issue I've currently got: |
Beta Was this translation helpful? Give feedback.
-
|
I tried reproducing this on a smaller project but with no luck so far. I've tried integrating Below are the details of the crashing project (the one that is not possible to build). Here is my {
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/css": "^11.11.0",
"@emotion/react": "^11.11.0",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^3.3.2",
"@matejmazur/react-katex": "^3.1.3",
"@mui/icons-material": "^5.14.15",
"@mui/material": "^5.14.15",
"@mui/x-date-pickers": "^6.16.3",
"@mui/x-tree-view": "^6.0.0-beta.0",
"@sentry/nextjs": "^7.75.1",
"@svgr/webpack": "^8.1.0",
"ace-builds": "^1.31.0",
"algoliasearch": "^4.20.0",
"axios": "^1.6.0",
"clipboard-copy": "^4.0.1",
"cookies-next": "^4.0.0",
"encoding": "^0.1.13",
"endent": "^2.1.0",
"firebase": "^10.5.2",
"firebase-admin": "^11.11.0",
"firebaseui": "^6.1.0",
"katex": "^0.16.9",
"moment": "^2.29.4",
"next": "^14.0.0",
"next-firebase-auth-edge": "^0.9.0",
"notion-client": "^6.16.0",
"notion-types": "^6.16.0",
"prismjs": "^1.29.0",
"react": "^18.2.0",
"react-ace": "^10.1.0",
"react-calendar-heatmap": "^1.9.0",
"react-countdown": "^2.3.5",
"react-dom": "^18.2.0",
"react-drag-drop-files": "^2.3.10",
"react-hook-form": "^7.47.0",
"react-hotkeys-hook": "^4.4.1",
"react-intersection-observer": "^9.5.2",
"react-markdown": "^9.0.0",
"react-multi-split-pane": "^0.3.3",
"react-notion-x": "^6.16.0",
"react-slick": "^0.29.0",
"react-spring": "^9.7.3",
"recharts": "^2.9.0",
"sharp": "^0.32.6",
"slick-carousel": "^1.8.1",
"superjson": "^2.2.0",
"typescript": "^5.2.2",
"use-async-effect": "^2.2.7",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/node": "^20.8.9",
"@types/prismjs": "^1.26.2",
"@types/react": "^18.2.33",
"@types/react-calendar-heatmap": "^1.6.5",
"@types/react-dom": "^18.2.14",
"@types/react-slick": "^0.23.11",
"eslint": "^8.52.0",
"eslint-config-next": "^14.0.0"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
}
}Here is my {
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [{"name": "next"}],
},
"include": [
"next-env.d.ts", ".next/types/**/*.ts", "middleware.ts",
"src/**/*", "app/**/*", "@types/**/*", "server/**/*"
],
"exclude": ["node_modules", "**/*.spec.ts", "lib"]
}And here is my const {withSentryConfig} = require('@sentry/nextjs');
module.exports = withSentryConfig({
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"]
});
return config;
},
images: {
remotePatterns: [{
protocol: 'https',
hostname: '**.notion.so',
}, {
protocol: 'https',
hostname: '**.amazonaws.com',
}, {
protocol: 'https',
hostname: '**.googleapis.com',
}],
domains: ['flagcdn.com'],
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 60 * 60, // cache for 1h
}
},
// Injected content via Sentry wizard below
{
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options
// Suppresses source map uploading logs during build
silent: true,
org: process.env.SENTRY_ORG,
project: process.env.SENTRY_PROJECT,
},
{
// For all available options, see:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
// Upload a larger set of source maps for prettier stack traces (increases build time)
widenClientFileUpload: true,
// Transpiles SDK to be compatible with IE11 (increases bundle size)
transpileClientSDK: true,
// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
tunnelRoute: '/monitoring',
// Hides source maps from generated client bundles
hideSourceMaps: true,
// Automatically tree-shake Sentry logger statements to reduce bundle size
disableLogger: true,
}); |
Beta Was this translation helpful? Give feedback.
-
|
@icyJoseph I'm also having this problem and this is the minimal codebase that shows the problem - https://github.com/mikeborozdin/next14-firebase-admin-issue Just run: npm i
npm run build |
Beta Was this translation helpful? Give feedback.
-
|
Seems like I found the root cause but not sure how to fix it yet. useEffect(() => {
if (!id)
return;
return startTransition(async () => {
const data = await fetchData(id);
console.log('fetched data:', data);
setData(data);
});
}, [id]);
After removing this |
Beta Was this translation helpful? Give feedback.
-
|
Right, transitions should not have async work within them. Await the promise, and then call the transition. 
|
Beta Was this translation helpful? Give feedback.
-
|
I tried to remove the |
Beta Was this translation helpful? Give feedback.
-
|
You'll always get an error... What I do is, I maintain the default server state of my page.tsx. This allows me to fetch all necessary data I need using async/await. Then client actions goes into the different components that needs it. In other words, my page.tsx are all server compatible, you won't find any state call, eventually listener, and the likes there. |
Beta Was this translation helpful? Give feedback.
-
|
HI, I had same problem and just fix it reinstalling some npm packages. In my case I uninstall next14 and clerk (pnpm uninstall next @clerk/nextjs) and reinstall them (pnpm i next @clerk/nextjs). That did the trick for me. Hope it helps. |
Beta Was this translation helpful? Give feedback.
-
|
thanks for the suggestion, but after using I will try removing routes as @icyJoseph suggests to isolate where the issue is coming from. |
Beta Was this translation helpful? Give feedback.
-
|
I removed node_modules and the error was still there. I did uninstall and reinstall, then it got fixed. |
Beta Was this translation helpful? Give feedback.
-
|
I'm having this same issue. (EDIT: using |
Beta Was this translation helpful? Give feedback.
-
|
Sweet! Now we just have to look at the difference between that and the previous canary. I'm out of the office, could you generate one from the released tab and post it here? |
Beta Was this translation helpful? Give feedback.
-
|
Apologies if I'm misunderstanding the ask, but here's the diff between v13.5.6-canary.7 and .8: v13.5.6-canary.7...v13.5.6-canary.8 |
Beta Was this translation helpful? Give feedback.
-
|
I'm also having this issue and here's the minimal repo for reproducing the problem: https://github.com/mikeborozdin/next14-firebase-admin-issue Just run: npm i
npm run buildAll worked fine in Next 13 with the experimental server actions. |
Beta Was this translation helpful? Give feedback.
-
|
I faced the same issue and it seems like the problem is direct importing the server action in a I'm using firebase-admin to validate user in a server action: "use server";
import config from "@/config"
import admin from "firebase-admin";
import {initializeApp} from "firebase-admin/app";
import {getAuth} from "firebase-admin/auth";
export async myServerAction(payload) {
const app = initializeApp({
credential: admin.credential.cert({
projectId: config.project_id,
clientEmail: config.client_email,
privateKey: config.private_key,
}),
});
const firebaseAuth = getAuth(app);
// the rest of the logic
}Doesn't work: "use client";
import {myServerAction} from "@/server-actions"
export function MyForm() {
const handleSubmit=async()=>{
// handle loading state, etc...
const payload = {};
const response = await myServerAction(payload);
// handles response
}
return <form>
{/* input fields */}
<button type="button" onClick={()=>handleSubmit()}>Submit</button>
</form>
}I tried to pass the server action into client component via props (instead of directly importing it) and it worked. My solution: "use client";
export function MyForm({myServerAction}) {
const handleSubmit=async()=>{
// handle loading state, etc...
const payload = {};
const response = await myServerAction(payload);
// handles response
}
return <form>
{/* input fields */}
<button type="button" onClick={()=>handleSubmit()}>Submit</button>
</form>
}I'm not sure what I'm doing is correct, but it works for now. |
Beta Was this translation helpful? Give feedback.
-
|
Fantastic! This worked for me too! Thanks a bunch @jengkhaw95 ! |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me as well. Thank you so much! |
Beta Was this translation helpful? Give feedback.
-
|
Considering it's been in the docs for a while to be imported into client components (https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components) it does not seem like intended behavior. |
Beta Was this translation helpful? Give feedback.
-
|
This work for me as well. I noticed that only server actions that imported firestore-admin and that were used in a component with 'use client' caused an error. |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me as well. Thank youuuu |
Beta Was this translation helpful? Give feedback.
-
|
Same problem here. Does anybody have a better solution than to go over every async function painstakingly?
|
Beta Was this translation helpful? Give feedback.
-
|
What?
…On Thu, 9 Nov 2023 at 23:20, Wojciech Bandzerewicz ***@***.***> wrote:
Same problem here. Does anybody have a better solution than to go over
every async function painstakingly?
—
Reply to this email directly, view it on GitHub
<#57535 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AVPN23637VWDJTBWQCUTKLLYDVCJHAVCNFSM6AAAAAA6RZHXVGVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TKMRXGE3DE>
.
You are receiving this because you commented.Message ID: <vercel/next.
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Running build complains about |
Beta Was this translation helpful? Give feedback.
-
|
I've run into this same issue with firebase-admin and have had to work around it a few times now. I also found moving the action to a nearby location can also seem to fix the webpack issue. Same directory, relative import seems fine Different parent, path import is no bueno Don't have time to really dig into the why here but it's another data point. |
Beta Was this translation helpful? Give feedback.
-
|
Doesn't seem to fix for me |
Beta Was this translation helpful? Give feedback.
-
|
Hey everyone, Been dealing with the same issue. I had this issue with I also made sure that my Do yourself a favour and try this before going to change all imports (as per the comment from @akwirick - value your development time!). |
Beta Was this translation helpful? Give feedback.
-
|
I solved this problem with For me, when server action includes When I removed it by replaced |
Beta Was this translation helpful? Give feedback.
-
|
That seemed to solve it for me as well |
Beta Was this translation helpful? Give feedback.
-
|
As a workaround, dynamic import solved the issue in my case. "use server";
import { ... } from "firebase-admin/app";
export function doSomething() {
...
};↓ "use server";
export async function doSomething() {
const { ... } = await import("firebase-admin/app");
...
}; |
Beta Was this translation helpful? Give feedback.
-
|
I don't know if this will help, but in my case, I was able to Build by setting const path = require("path");
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "standalone",
reactStrictMode: true,
experimental: {
outputFileTracingRoot: path.join(__dirname, "../../"),
esmExternals: false,
},
};
module.exports = nextConfig; |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me as well. Do you have a pointer to what could be the unintended side effects of setting this to false? I couldn't find much information about this flag. |
Beta Was this translation helpful? Give feedback.
-
As I read this, maybe the bundle size will be larger. However, I am not sure about those other points either. ref: #27876 |
Beta Was this translation helpful? Give feedback.
-
|
That did the trick for me as well even though it does not feel like it is the right way. |
Beta Was this translation helpful? Give feedback.
-
|
Hello my seniors, pls could anyone help me resolve this issue? I built a simple portfolio website and tried deploying on vercel but I had these logs : |
Beta Was this translation helpful? Give feedback.
-
|
Getting the same issue but this is how it looks: it happens when i include a component that is calling server actions from inside a |
Beta Was this translation helpful? Give feedback.
-
|
I digged a little bit and found that adding next.config.js file -> |
Beta Was this translation helpful? Give feedback.
-
|
The solution to anyone coming across this later is that you are probably accidentally importing a server action in a client component. (Most likely you are incrementally switching to the app directory from the pages directory. For me this was caused by including a server action in my |
Beta Was this translation helpful? Give feedback.
-
|
I just uninstalled symbol-observable from webpack and all works fine now.
|
Beta Was this translation helpful? Give feedback.
-
|
If you have Dockerfile, the issue is this |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
Seems like there is an issue with the latest version of Next.js. It fails to build with a webpack error.
Seems like this might be an issue with
firebase-adminand Next.js working together.Here is the full error log:
Is there any way to fix this?
Beta Was this translation helpful? Give feedback.
All reactions