I’m working on a Next.js project deployed on Vercel, but my build fails with the following error related to autoprefixer:
<code>Error: Cannot find module 'autoprefixer'
Require stack:
- /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
...
</code>
<code>Error: Cannot find module 'autoprefixer'
Require stack:
- /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
...
</code>
Error: Cannot find module 'autoprefixer'
Require stack:
- /vercel/path0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
...
The issue occurs during the production build process after Prisma generates the client. Below is the relevant part of my package.json:
<code>"dependencies": {
"next": "14.1.4",
"@prisma/client": "^5.16.1",
...
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",
...
}
</code>
<code>"dependencies": {
"next": "14.1.4",
"@prisma/client": "^5.16.1",
...
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",
...
}
</code>
"dependencies": {
"next": "14.1.4",
"@prisma/client": "^5.16.1",
...
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",
...
}
And here is my layout.tsx:
<code>import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";
import { SpeedInsights } from "@vercel/speed-insights/next";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Studio Pinya",
description: "Admininstration panel for Studio Pinya",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>
{children} <SpeedInsights />
</Providers>
</body>
</html>
);
}
</code>
<code>import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";
import { SpeedInsights } from "@vercel/speed-insights/next";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Studio Pinya",
description: "Admininstration panel for Studio Pinya",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>
{children} <SpeedInsights />
</Providers>
</body>
</html>
);
}
</code>
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { Providers } from "./providers";
import { SpeedInsights } from "@vercel/speed-insights/next";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Studio Pinya",
description: "Admininstration panel for Studio Pinya",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<Providers>
{children} <SpeedInsights />
</Providers>
</body>
</html>
);
}
The error seems to be related to a missing autoprefixer module during the build. I’ve tried reinstalling dependencies and clearing the cache, but the issue persists. Any insights on how to resolve this would be greatly appreciated!
I expected the Vercel build process to correctly recognize and use autoprefixer during the production build, without any issues related to missing modules. I anticipated that after clearing the cache and reinstalling dependencies, the build would proceed without errors, especially since it works fine locally.
Thank You
New contributor
yon is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.