npm run dev thrown Unknown error from PostCSS plugin on a vanilla Nextjs app

What version of Next.js are you using?

10.2.0

What version of Node.js are you using?

14.16.1

What browser are you using?

google Chrom Version 90.0.4430.93

What operating system are you using?

Mac OS Catalina 10.15.7

How are you deploying your application?

npm run dev

Describe the Bug

• I created a brand new next js app using the command npx create-next-app
• I then changed director to where the app is located
• I then executed npm run dev
• I see the following error:

> my-app@0.1.0 dev /Users/dev/my-app
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
Unknown error from PostCSS plugin. Your current PostCSS version is 8.2.13, but postcss-preset-env uses 7.0.32. Perhaps this is the source of the error below.
error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!./styles/globals.css
TypeError: Cannot read property 'prefix_exceptions' of undefined
    at Array.map (<anonymous>)

• When I go to http://localhost:3000/ I see the following error in the terminal

Error: Cannot find module ‘/Users/dev/my-app/.next/build-manifest.json’ Require stack:

• /Users/dev/my-app/node_modules/next/dist/next-server/server/load-components.js
• /Users/dev/my-app/node_modules/next/dist/next-server/server/api-utils.js
• /Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js
• /Users/dev/my-app/node_modules/next/dist/server/next.js
• /Users/dev/my-app/node_modules/next/dist/server/lib/start-server.js
• /Users/dev/my-app/node_modules/next/dist/cli/next-dev.js
• /Users/dev/my-app/node_modules/next/dist/bin/next at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15) at Function.mod._resolveFilename (/Users/dev/my-app/node_modules/next/dist/build/webpack/require-hook.js:4:1784) at Function.Module._load (internal/modules/cjs/loader.js:725:27) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at loadComponents (/Users/dev/my-app/node_modules/next/dist/next-server/server/load-components.js:1:1691) at async DevServer.findPageComponents (/Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js:76:257) at async DevServer.renderErrorToHTML (/Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js:138:266) at async DevServer.render (/Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js:74:255) at async Object.fn (/Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js:58:672) at async Router.execute (/Users/dev/my-app/node_modules/next/dist/next-server/server/router.js:25:67) at async DevServer.run (/Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js:68:1042) at async DevServer.handleRequest (/Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js:32:504) { code: ‘MODULE_NOT_FOUND’, requireStack: [ ‘/Users/dev/my-app/node_modules/next/dist/next-server/server/load-components.js’, ‘/Users/dev/my-app/node_modules/next/dist/next-server/server/api-utils.js’, ‘/Users/dev/my-app/node_modules/next/dist/next-server/server/next-server.js’, ‘/Users/dev/my-app/node_modules/next/dist/server/next.js’, ‘/Users/dev/my-app/node_modules/next/dist/server/lib/start-server.js’, ‘/Users/dev/my-app/node_modules/next/dist/cli/next-dev.js’, ‘/Users/dev/my-app/node_modules/next/dist/bin/next’ ] }

Expected Behavior

This is a brand new nextjs app. I have not made any changes. After running npm run dev the app should start.

To Reproduce

1. create a new nextjs app e.g. npx create-next-app
2. got to nextjs app directory
3. run npm run dev

I’ve done the following and still facing the same issue:

• Ive tried npm cache clean --force to clean the cache. I still face the same issues as described above.
• I’ve tried with the latest node version v16.1.0 and still facing the same issues as described above

[timneutkens]

Next.js 12 uses postcss 8 everywhere, so this is probably fixed 👍

[fredlb]

I had this issue as well, same ordeal with vanilla next app via create-next-app. However this only happened when I did this in a nested directory of an already existing JS project:

-root/
-- node_modules/
-- my-next-app/ <-- created by create-next-app
---- node_modules/
---- pages/
---- package.json
-- package.json

This seems to happen regardless of node and npm version. So maybe there is some strange issue where things are trying to resolve outside my-next-app.