2.0.0-beta.1 -> Loading PostCSS Plugin failed

[peterszerzo]

Describe the bug

Same error as in #1267, opening this as indicated by the discussion in that issue.

Reproduction

• start a new project with vite@2.0.0-beta.1: npm init @vitejs/app example-project --template vue-ts.
• follow the Tailwind installation instructions.
• npm run dev

System Info

• required vite version: 2.0.0-beta.1
• required Operating System: MacOS 10.15.7
• required Node version: 14.15.3
• Optional:
  • npm/yarn version: 6.14.9
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.5
  • Installed @vue/compiler-sfc version: 3.0.5

Logs (Optional if provided reproduction)

1. Run vite or vite build with the --debug flag.
2. Provide the error log here.

[vite:css] Loading PostCSS Plugin failed: Could not dynamically require "/Users/psz/Documents/projects/nlx/example-project/node_modules/tailwindcs
s/lib/index.js". Please configure the dynamicRequireTargets option of @rollup/plugin-commonjs appropriately for this require call to behave p
roperly.

(@/Users/psz/Documents/projects/example-project/postcss.config.js)
file: /Users/psz/Documents/projects/example-project/src/index.css
error during build:
Error: Loading PostCSS Plugin failed: Could not dynamically require "/Users/psz/Documents/projects/example-project/node_modules/tailwindcss/li
b/index.js". Please configure the dynamicRequireTargets option of @rollup/plugin-commonjs appropriately for this require call to behave prope
rly.

(@/Users/psz/Documents/projects/example-project/postcss.config.js)
    at load (/Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:25681:11)
    at /Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:25706:16
    at Array.map (<anonymous>)
    at plugins (/Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:25705:8)
    at processResult (/Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:25770:14)
    at /Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:25831:14
    at async loadPostcssConfig (/Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:29823:39)
    at async compileCSS (/Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:29713:27)
    at async Object.transform (/Users/psz/Documents/projects/example-project/node_modules/vite/dist/node/chunks/dep-9e7f6786.js:29534:48)
    at async ModuleLoader.addModuleSource (/Users/psz/Documents/projects/example-project/node_modules/rollup/dist/shared/rollup.js:18319:30)

[peterszerzo]

Found a solution in postcss.config.js - instead of

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

using this instead works:

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ],
}

[tyhyly]

my solutions as below:
npm 7.10.0
vite 2.1.5

npm init @vitejs/app
Ok to proceed? (y) y
✔ Project name: · vite2.x-project
✔ Select a framework: · vue
✔ Select a variant: · TypeScript

and after exec commands:
cd vite2.x-project
npm install
npm run dev

I got the error:
[vite] Internal server error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

and I create a file postcss.config.js
// cotents in postcss.coinfg.js

module.exports = {
  autoprefixer: {}
}

[mashirozx]

Tried the javascript vue3 vite starter vite project, below works

module.exports = {
  autoprefixer: {}
}

But with the same config, the Typescript Vue3 start vite project throws this error

[plugin:vite:css] Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
Require stack: