使用 laravel 微风运行 npm 时出现节点错误

Question

当我运行npm run dev 或npm run watch 时出现此错误，但我没有找到问题所在。它发生在一个全新的 Laravel 8 应用程序中。

当我使用开发命令时似乎会发生这种情况

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: [(...variantsValue),(...extensions)].flat is not a function
    at /var/www/html/smart_recipe/node_modules/tailwindcss/lib/util/resolveConfig.js:219:73
    at baseMergeDeep (/var/www/html/smart_recipe/node_modules/lodash/_baseMergeDeep.js:42:7)
    at /var/www/html/smart_recipe/node_modules/lodash/_baseMerge.js:27:7
    at /var/www/html/smart_recipe/node_modules/lodash/_createBaseFor.js:17:11
    at baseMerge (/var/www/html/smart_recipe/node_modules/lodash/_baseMerge.js:24:3)
    at /var/www/html/smart_recipe/node_modules/lodash/mergeWith.js:36:3
    at /var/www/html/smart_recipe/node_modules/lodash/_createAssigner.js:30:9
    at apply (/var/www/html/smart_recipe/node_modules/lodash/_apply.js:15:25)
    at /var/www/html/smart_recipe/node_modules/lodash/_overRest.js:32:12
    at mergeVariantExtensions (/var/www/html/smart_recipe/node_modules/tailwindcss/lib/util/resolveConfig.js:218:33)
    at resolveVariants (/var/www/html/smart_recipe/node_modules/tailwindcss/lib/util/resolveConfig.js:235:10)
    at resolveConfig (/var/www/html/smart_recipe/node_modules/tailwindcss/lib/util/resolveConfig.js:271:15)
    at /var/www/html/smart_recipe/node_modules/tailwindcss/lib/index.js:77:37
    at /var/www/html/smart_recipe/node_modules/tailwindcss/lib/processTailwindFeatures.js:52:20
    at LazyResult.run (/var/www/html/smart_recipe/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/var/www/html/smart_recipe/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/var/www/html/smart_recipe/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/smart_recipe/node_modules/postcss/lib/lazy-result.js:217:17
    at runLoaders (/var/www/html/smart_recipe/node_modules/webpack/lib/NormalModule.js:316:20)
    at /var/www/html/smart_recipe/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/smart_recipe/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/html/smart_recipe/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Promise.resolve.then.then.catch (/var/www/html/smart_recipe/node_modules/postcss-loader/src/index.js:208:9)
 @ ./resources/css/app.css

Answer 1

我遇到了同样的问题，花了 5 个小时寻找解决方案，但找不到。 经过大量搜索，我遇到了这个

“Tailwind CSS v2.0 不再支持 Node.js 8 或 10。要构建 CSS，您需要确保在本地和 CI 环境中运行 Node.js 12.13.0 或更高版本。”

https://tailwindcss.com/docs/upgrading-to-v2

所以我意识到问题出在我的 Node 版本中，它是 10.x 所以 我从我的 Windows 机器上卸载了 Node 并下载了 LTS 版本（14.x）。 所以考虑更新你的 Node 版本，它会解决这个问题，因为它确实对我有用。 旧节点版本可能没有 Tailwind CSS 2 实现的扁平化功能，这会引发错误。

Answer 2

我在安装 Breeze 后遇到了完全相同的问题......不幸的是，npm 错误消息没有给出真正发生了什么的线索！

感谢@DaniyalGondal，我发现我的节点版本由于 Breeze 附带的顺风 V2 要求（https://tailwindcss.com/docs/upgrading-to-v2）而引发了错误......所以我确实使用：sudo n latest 在 ubuntu20 下升级了我的节点版本

升级后不要忘记重新启动终端并检查您的节点是否已正确升级：node --version

如果节点版本高于 12.13.0，现在 npm run watch 或 npm run dev 应该可以正常工作了！