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

hyperknot commented 1 year ago

Verify canary release

[X] 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

Create next app
Insert the default PostCSS config from this page: https://nextjs.org/docs/advanced-features/customizing-postcss-config
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 commented 1 year ago

i also have problems with tailwindcss

eldieco commented 1 year ago

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 commented 1 year ago

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

hyperknot commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@ZhengRui This is the same issues I'm having here: https://github.com/vercel/next.js/issues/45814

vercel / next.js