NextJS 错误 - HookWebpackError: 应为伪类或伪元素

Question

运行next build时出现以下错误：

HookWebpackError: Expected a pseudo-class or pseudo-element.
    at makeWebpackError (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:308185)
    at /Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:28:105236
    at eval (eval at create (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:34:1)
-- inner error --
Error: Expected a pseudo-class or pseudo-element.
    at /Users/eliot/Developer/eliothertenstein.com/static/css/66780ddc5f37cb3b.css:906:3
    at Root._error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78465)
    at Root.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:124360)
    at Parser.error (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:86811)
    at Parser.expected (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93145)
    at Parser.pseudo (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:89313)
    at Parser.parse (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92668)
    at Parser.loop (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:92233)
    at new Parser (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:78322)
    at Processor._root (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95242)
    at Processor._runSync (/Users/eliot/Developer/eliothertenstein.com/node_modules/next/dist/compiled/cssnano-simple/index.js:190:95749)
caused by plugins in Compilation.hooks.processAssets

（请参阅https://pastebin.com/JLQ2aR2f上的完整错误）

我一直在尝试调试这个问题 ~3 小时，这让我发疯。 如果能帮助我更好地调试next build命令，我将不胜感激？ 我尝试使用--debug标志，但它似乎没有做任何事情。

到目前为止，我知道这是tailwindcss的一个问题（我假设postcss ），因为当我删除我的global.scss的那部分时，程序再次运行（或者实际上在我注释掉整个文件之后，除了 tailwind 它仍然中断，注释掉顺风导致其他问题）。

哦，我试过的其他一些调试：

• 使用正则表达式搜索我的整个项目以查找任何 invliad 顺风类（使用(["'])(.*\b\w+: )(.*)(\1)来定位像md: text-red-600这样的类但不是md:text-red-600 ）
• 重新安装所有node_modules
• 注释掉所有 CSS 文件（这会停止问题！）
• 使用yarn classic和node来运行命令（和npx ），而不是我目前用于开发的yarn v3

任何帮助表示赞赏！

Answer 1

事实证明答案是tailwind.config.js中的一个错误。 我的一个关键帧看起来像这样：

expand: {
 ...
 '80%:': {
   opacity: 0.5,
  },
  ...
},

注意80%之后的双冒号。

我鼓励遇到此问题的每个人检查classNames 、 .css文件以及tailwind.config.js是否有任何额外的冒号。