Tailwind in React project - getting “Cannot find module 'autoprefixer'” error during setup

岁酱吖の 提交于 2021-01-05 07:08:38

问题


I'm following the documentation for setting up Tailwind in a React project over on https://tailwindcss.com/docs/guides/create-react-app. I've been following the steps, but when I get to the part where I'm supposed to run npx tailwindcss init in order to generate a tailwind.config.js file, I get the following error:

Cannot find module 'autoprefixer'
Require stack:
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\build.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\commands\index.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli\main.js
- C:\Users\[user]\AppData\Roaming\npm-cache\_npx\16096\node_modules\tailwindcss\lib\cli.js

I've checked that I have autoprefixer in my node_modules folder and tried reinstalling it, but I get the same error. In my package.json, I have the following:

...
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...

as per the documentation. My craco.config.js file is as follows:

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

again, as per the documentation. I've also tried reinstalling the @craco/craco package to no avail, so at this point I'm stuck. Any help would be appreciated.


回答1:


Can you try this:

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

here: https://github.com/tailwindlabs/tailwindcss/issues/2831



来源:https://stackoverflow.com/questions/65179304/tailwind-in-react-project-getting-cannot-find-module-autoprefixer-error-du

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!