Node error when I run npm with laravel breeze

Question

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

Answer 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.