修复PostCSS Webpack错误 ruleSet rules oneOf...等等等等

138 阅读2分钟

我的Bootcamp的一些学生遇到了一个问题,我无法以任何方式进行复制。

Next.js项目中运行npm run dev ,他们出现了这个错误:

rest-api git:(main) npm run dev

> rest-api@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/flaviocopes/dev/bootcamp/rest-api/.env
wait  - compiling...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css
Error: Cannot find module 'tailwindcss'

在最后一行tailwindcss ,但也出现了autoprefixer

或者,这个错误也是。Error: Your custom PostCSS configuration must export a plugins key.

这不是一个很有帮助的错误!

经过多次调试,问题的原因被发现了。

出现错误的项目并没有安装Tailwind CSS,但是在之前的几周,我们使用了Tailwind。

发生的情况是这样的。

他们在父文件夹里有一个postcss.config.js 文件。或者在他们路径中的另一个父文件夹中,而不仅仅是直接的父文件夹。也许是他们的主文件夹。

类似这样的东西:

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

重要提示:在他们现在的项目中,没有配置PostCSS

如果你安装了PostCSS,那就没有问题。只有当你在当前的项目根文件夹中没有postcss.config.js

但是Next.js的工具化看到父文件夹中有一个postcss.config.js 文件,并执行它。

引起了这个错误:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/globals.css

还有一件事!⚠️ ✋

在一月底,我将组织网络开发训练营

这是一个为期10周的同学会在线课程,我将指导你成为一名Web开发人员。

这不仅仅是 "一个课程"。它是我每年组织一次的大型活动。

我们将从零开始,学习网络开发的基础知识,HTML,CSS,JavaScript,Tailwind,Node.js,然后我们将学习React,JSX,如何使用PostgreSQL,Astro,Next.js,Prisma等等

在前10周结束时,你将知道如何创建网站和网络应用程序,我将为你解锁Bootcamp的第二阶段:你将获得Bootcamp毕业生专属的大量项目,所以你可以按照我的指示建立像带有认证的私人区域,克隆Twitter YouTube Reddit等流行网站,创建电子商务网站,等等。

因为一旦你掌握了基础知识,你只能通过在真正的、令人兴奋的项目上工作来学习。