Vite: Vite, TypeScript, Tailwind v2, PostCSS@^7 compat build error

[cmwhited]

Describe the bug

Getting an error when running yarn dev during Dep Optimization phase of vite:

[vite] Optimizable dependencies detected:
@tailwindcss/aspect-ratio, @tailwindcss/forms, @tailwindcss/typography, autoprefixer, postcss, vue

[vite] Dep optimization failed with error:
Could not load path (imported by node_modules/postcss/lib/input.js): ENOENT: no such file or directory, open 'path'
[Error: Could not load path (imported by node_modules/postcss/lib/input.js): ENOENT: no such file or directory, open 'path'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: 'path',
  watchFiles: [
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/postcss.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/vue/dist/vue.runtime.esm-bundler.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/autoprefixer.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@tailwindcss/aspect-ratio/src/index.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@tailwindcss/forms/src/index.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@tailwindcss/typography/src/index.js',
    '\x00commonjsHelpers.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@vue/shared/dist/shared.esm-bundler.js',
    '\x00node-resolve:empty.js',
    '\x00\x00node-resolve:empty.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/declaration.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/declaration.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/stringify.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/stringify.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/comment.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/comment.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/processor.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/processor.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/at-rule.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/at-rule.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/vendor.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/vendor.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/parse.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/parse.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/list.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/list.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/rule.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/rule.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/root.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/root.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/prefixes.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/prefixes.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/browsers.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/browsers.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/info.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/info.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/data/prefixes.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/data/prefixes.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@tailwindcss/typography/src/utils.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@tailwindcss/typography/src/utils.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@tailwindcss/typography/src/styles.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/@tailwindcss/typography/src/styles.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/tailwindcss/plugin.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/tailwindcss/plugin.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/tailwindcss/defaultTheme.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/tailwindcss/defaultTheme.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/merge.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/merge.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/uniq.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/castArray.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/castArray.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/uniq.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/mini-svg-data-uri/index.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/mini-svg-data-uri/index.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/node.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/node.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/stringifier.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/stringifier.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/lazy-result.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/lazy-result.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/container.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/container.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/parser.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/parser.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/input.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/input.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/resolution.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/resolution.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/declaration.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/declaration.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/processor.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/processor.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/transition.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/transition.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/supports.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/supports.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/selector.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/selector.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/at-rule.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/at-rule.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/value.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/value.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/utils.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/utils.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/postcss/lib/postcss.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/isPlainObject.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/lodash/isPlainObject.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/placeholder-shown.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/placeholder-shown.js?commonjs-proxy',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/placeholder.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/placeholder.js',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/fullscreen.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/fullscreen.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/filter.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/filter.js?commonjs-proxy',
    '/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/flex.js',
    '\x00/home/chriswhited/dev/chriswhited/lift-tracker/node_modules/autoprefixer/lib/hacks/flex.js?commonjs-proxy',
    ... 438 more items
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduction

1. Created a new Vue3, TypeScript, app using npx create-vite-app <my-project> --template vue-ts
2. cd into directory, ran yarn to install deps.
3. Followed TailwindCSS documentation to add Tailwind v2 to the app with PostCSS@^7-compat, as described in the tailwind installation docs here.
4. Ran npm tailwindcss init -p to generate the tailwind.config.js and postcss.config.js.
5. Installed the @tailwindcss/{forms,typography,aspect-ratio} plugins, added to plugins array in tailwind.config.js.
6. Ran yarn dev, got error above.

Here is the repo.

System Info

• required vite version: 1.0.0-rc.13
• required Operating System: Pop!_OS 20.10, MacOS Big Sur v11.0.1
• required Node version: 14.14.0
• Optional:
  
  
  
  • npm/yarn version: 1.22.5
  
  
  • Installed vue version (from yarn.lock or package-lock.json): 3.0.4
  
  
  • Installed @vue/compiler-sfc version: 3.0.4
  
  

Logs (Optional if provided reproduction)

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

[sampullman]

I get the same error with the following dependencies:

[vite] Optimizable dependencies detected:
autoprefixer, postcss-nested, vue, vue-i18n

• vite version: 1.0.0-rc.13
• Operating System: MacOS Catalina 10.15.7
• Node version: 12.14.1

[sampullman]

Seems like the following did the trick for me, along with resetting my node environment:

npm i -S [email protected]
npm i -S [email protected]
npm i --save-dev path

[cmwhited]

Installing path as a devDependency also worked for me and I am not longer getting the error. Thanks @sampullman for the response. Much appreciated.