create-next-app doesn't work with the default postcss config

[hyperknot]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:13:56 PDT 2022; root:xnu-8020.240.7~1/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.17.1
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.1.0
      eslint-config-next: 13.0.7
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

No point for this, but if really needed I can create one.

To Reproduce

1. Create next app
2. Insert the default PostCSS config from this page: https://nextjs.org/docs/advanced-features/customizing-postcss-config
3. run build

I used this version:

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}

Describe the Bug

Bug 1, you cannot build with the official default config.

Cannot build, error:

Error: Cannot find module 'postcss-flexbugs-fixes'
Require stack:
- node_modules/next/dist/build/webpack/config/blocks/css/plugins.js
- node_modules/next/dist/build/webpack/config/blocks/css/index.js
- node_modules/next/dist/build/webpack/config/index.js
- node_modules/next/dist/build/webpack-config.js
- node_modules/next/dist/build/index.js
- node_modules/next/dist/cli/next-build.js
- node_modules/next/dist/lib/commands.js
- node_modules/next/dist/bin/next

I used the following:

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}

Bug 2: on that page, it mentions that Autoprefixer is used, yet there is no autoprefixer installed in yarn.lock nor is found anywhere in node_modules

Bug 3/Question 1: The official Tailwind example has this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

This is the exact same as in TailwindCSS's documentation. Now if I understand right, using this file disabled the default PostCSS plugins of Next.js. So we shouldn't be using this, but something which merges both configs.

From all the examples, only commerce seems to have a mixed config:
https://github.com/vercel/commerce/blob/main/site/postcss.config.js

Expected Behavior

Should build with default config. Autoprefixer should be installed by default. Recommended Tailwind config should be mixed with default Next config.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[pogran]

i also have problems with tailwindcss

[eldieco]

I just did extensive package updates to go from next v9 up to v12, among a bunch of other package updates and got everything working on my feature branch and merged successfully to the master branch, but when I went to deploy it, the build failed with this error message:

`Error: Cannot find module 'postcss'

with [MY_BASE_PATH]/node_modules/cssnano-preset-simple/dist/index.js at the top of the stack. This is very problematic as I need to get these changes live.

Everything works fine when running npm run dev.

CORRECTION: I'm only on next 11 because I can't update my node version at this time.

[avgupta456]

I believe it is fixed with the latest canary: https://github.com/vercel/next.js/releases/tag/v13.1.1-canary.0

[hyperknot]

I've just tested it, and on next@13.1.2-canary.2, the build is still broken.

I've also tested the autoprefixer on this snippet:

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

And except for the user-select, none of them gets transformed:

.example {
  display: grid;
  transition: all 0.5s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: linear-gradient(180deg, #fff, #000);
}

[hyperknot]

So basically, in a default create-next-app:

• autoprefixer is not installed and broken
• postcss-flexbugs-fixes is not installed
• postcss-preset-env is not installed
• nothing on this page is working: https://nextjs.org/docs/advanced-features/customizing-postcss-config

[hyperknot]

Here are my findings so far:

There is no autoprefixer installed anywhere in node_modules in a Next.js install.

Yet, it's still being applied because now autoprefixer is compiled into swc via swc_css? I'm just guessing here.

What is exactly included in swc? autoprefixer + postcss-flexbugs-fixes + postcss-preset-env are all compiled into swc? Because the moment I customise postcss.config.js I need to install those packages manually!

Also, for Tailwind, what is the correct config from the ones below?

Like in all the examples and in official docs:

plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },

or like in the commerce example:

plugins: [
    'tailwindcss/nesting',
    'tailwindcss',
    'autoprefixer',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ]

[hyperknot]

In my testing I found that the config needs to include the postcss-flexbugs and present-env parts to be identical to the default setup. It means that every Tailwind example, including the official docs should be updated, as

{
    tailwindcss: {},
    autoprefixer: {},
  }

is doing non-default behaviour.

[ZhengRui]

I am having this type of error:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
TypeError: Cannot read properties of undefined (reading '500')
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./src/styles/globals.css
./src/styles/globals.css

very strange, i've tried to install postcss-flexbugs-fixes and postcss-preset-env and put them inside postcss.config.js as above, but doesn't fix the problem.

[Update]: this issue appears after i update tailwindcss from 2 to 3, and it seems I also need to update @tailwindcss/forms. Otherwise it causes the above issue.

[IHIutch]

@ZhengRui This is the same issues I'm having here: #45814