[bug]: Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`),

[jarrodwatts]

Describe the bug

When creating a new project with the CLI (without an existing Next.js project) using pnpm I get this error.

Affected component/components

How to reproduce

• Empty directory
• pnpm dlx shadcn@latest init
• pnpm dlx shadcn@latest add button
• Render a button on app/page.tsx
• pnpm run dev

Codesandbox/StackBlitz link

No response

Logs

Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started

Import trace for requested module:
./app/globals.css

System Info

MacOS, Chrome

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[karrtopelka]

Did you find fix or workaround for that?

[jarrodwatts]

@karrtopelka yeah. The instructions are in the error message on how to fix.

npm install --save-dev mini-css-extract-plugin

[DaveyJake]

In case this helps anyone, I added this to my next.config.mjs on CodeSandbox and the issue went away:

const nextConfig = {
  webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
    return config
  }
}

[manask-pradhan]

In case this helps anyone, I added this to my next.config.mjs on CodeSandbox and the issue went away:

const nextConfig = {
  webpack: ( config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
    return config
  }
}

Thanks man, this also worked for me