Node error when I run npm with laravel breeze

问题

I have this error when I run npm run dev or npm run watch and I didn't find what is the mess. It's happens in a all fresh Laravel 8 app.

It looks like happen when I use the developement command

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

回答1:

I came across same issue and spent 5 hours on finding solution but could not. After searching alot, I came across this

"Tailwind CSS v2.0 no longer supports Node.js 8 or 10. To build your CSS you'll need to ensure you are running Node.js 12.13.0 or higher in both your local and CI environments."

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

So I realized that issue was in my Node version which was 10.x so I uninstalled Node from my windows machine and downloaded LTS version (14.x). So consider updating your Node version, it will solve the issue as it did work for me. There is possibility that old node versions don't have that flat function that Tailwind CSS 2 has implemented and that's throwing error.

回答2:

I Had the exact same issue after installing Breeze... Unfortunately the npm error message gives no clue of what is really going on !

Thanks to @DaniyalGondal I found out that my node version was raising the error because of tailwind V2 requirements (https://tailwindcss.com/docs/upgrading-to-v2) that comes with Breeze... So I did upgrade my node version using : sudo n latest under ubuntu20

Don't forget to restart your terminal after upgrading and check that your node is correctly upgraded using : node --version

If the node version is above 12.13.0, now npm run watch or npm run dev should work fine !

来源：https://stackoverflow.com/questions/65311936/node-error-when-i-run-npm-with-laravel-breeze