Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2.0.0-beta.1 -> Loading PostCSS Plugin failed #1287

Closed
peterszerzo opened this issue Jan 2, 2021 · 3 comments · Fixed by #1292
Closed

2.0.0-beta.1 -> Loading PostCSS Plugin failed #1287

peterszerzo opened this issue Jan 2, 2021 · 3 comments · Fixed by #1292

Comments

@peterszerzo
Copy link

peterszerzo commented Jan 2, 2021 •
edited
Loading

Describe the bug

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

Reproduction

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 peterszerzo changed the title 2.0.0-alpha.2 -> Loading PostCSS Plugin failed 2.0.0-beta.1 -> Loading PostCSS Plugin failed Jan 2, 2021
@peterszerzo
Copy link
Author

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")
  ],
}

underfin added a commit to rolldown/vite that referenced this issue Jan 2, 2021
@underfin
fix: dynamic load postcss plugin
5ac94ca 
fix vitejs#1287
@underfin underfin mentioned this issue Jan 2, 2021
Merged
yyx990803 added a commit that referenced this issue Jan 2, 2021
@underfin @yyx990803
fix: dynamic load postcss plugin (#1292)
00c7370 
fix #1287

Co-authored-by: Evan You <yyx990803@gmail.com>
aleclarson pushed a commit to aleclarson/vite that referenced this issue Jan 2, 2021
@underfin @yyx990803 @aleclarson
fix: dynamic load postcss plugin (vitejs#1292)
b11e61e 
fix vitejs#1287

Co-authored-by: Evan You <yyx990803@gmail.com>
@tyhyly
Copy link

tyhyly commented Apr 16, 2021 •
edited
Loading

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
Copy link

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:

@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: fix build for dynamic load postcss plugin rolldown/vite
4 participants
@peterszerzo @underfin @mashirozx @tyhyly