PostCSS plugins cannot be resolved when root != cwd #4000
Description
Describe the bug
When running the Vite server with a root other than cwd, PostCSS is unable to find its plugins.
As far as I understand, this happens because postcss-load-config uses import-cwd to load plugins: https://github.com/postcss/postcss-load-config/blob/170ec7735f9c1df2f81b068988d81d351fead0a1/src/plugins.js#L16
Reproduction
I created a repo to make it easy to reproduce: https://github.com/fwouts/vite-postcss-cwd
cd app && yarn && yarn start(running in same directory): Server works fine.
cd runner && yarn && yarn start(running from another directory): PostCSS plugin error.
System Info
System:
OS: macOS 11.4
CPU: (8) x64 Apple M1
Memory: 31.42 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.6.3 - /opt/homebrew/bin/npm
Browsers:
Chrome: 91.0.4472.114
Firefox: 89.0.2
Safari: 14.1.1
npmPackages:
vite: ^2.3.8 => 2.3.8Used Package Manager
yarn
Logs
10:39:02 pm [vite] Internal server error: Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'
Require stack:
- /Users/fwouts/dev/vite-postcss-cwd/runner/noop.js
(@/Users/fwouts/dev/vite-postcss-cwd/app/postcss.config.js)
Plugin: vite:css
File: /Users/fwouts/dev/vite-postcss-cwd/app/index.css
at load (/Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/postcss-load-config/src/plugins.js:28:11)
at /Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/postcss-load-config/src/plugins.js:53:16
at Array.map (<anonymous>)
at plugins (/Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/postcss-load-config/src/plugins.js:52:8)
at processResult (/Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/postcss-load-config/src/index.js:33:14)
at /Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/postcss-load-config/src/index.js:94:14
at resolvePostcssConfig (/Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/vite/src/node/plugins/css.ts:747:35)
at compileCSS (/Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/vite/src/node/plugins/css.ts:538:25)
at TransformContext.transform (/Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/vite/src/node/plugins/css.ts:164:11)
at Object.transform (/Users/fwouts/dev/vite-postcss-cwd/runner/node_modules/vite/src/node/server/pluginContainer.ts:497:20)Workaround
A workaround is to run process.chdir(rootDir) before starting the Vite server.
However in this particular case, it creates more issues (Uncaught SyntaxError: The requested module '/node_modules/.vite/jotai.js?v=4f90dd0c' does not provide an export named 'default') [note this only happens after clearing node_modules/.vite]. Perhaps this is a separate issue?
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.