Compilation error: ERROR in child compilations [laravel]

• Laravel Mix Version: 6.0.39 (npm list --depth=0)

├── @tailwindcss/forms@0.2.1
├── @tailwindcss/typography@0.5.0
├── alpinejs@2.8.2
├── autoprefixer@10.4.2
├── axios@0.21.1
├── global@4.4.0
├── laravel-mix@6.0.39
├── lodash@4.17.21
├── postcss-import@12.0.1
├── postcss@8.4.5
├── puppeteer@10.2.0
└── tailwindcss@3.0.12

• Node Version (node -v): v17.3.0
• NPM Version (npm -v): 8.3.0
• OS: macOS (M1)

Description:

Cant compile

Steps To Reproduce:

In a laravel install: yarn add --dev tailwindcss postcss autoprefixer @tailwindcss/typography

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
	content: [
		"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
		"./storage/framework/views/*.php",
		"./resources/js/**/*.vue",
		"./resources/js/**/*.jsx",
	],
	theme: {
		extend: {
			fontFamily: {
				sans: [
					"Nunito",
					"Inter var",
					"ui-sans-serif",
					"system-ui",
					"-apple-system",
					"BlinkMacSystemFont",
					"Segoe UI",
					"Roboto",
					"Helvetica Neue",
					"Arial",
					"Noto Sans",
					"sans-serif",
					"Apple Color Emoji",
					"Segoe UI Emoji",
					"Segoe UI Symbol",
					"Noto Color Emoji",
					...defaultTheme.fontFamily.sans,
				],
			},
		},
	},

	variants: {
		extend: {
			opacity: ["disabled"],
		},
	},

	plugins: [
		require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
	],
};

// webpack.mix.js
const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Error:

→ yarn dev
yarn run v1.22.17
$ yarn run development

> development
> mix


✖ Mix
  Compiled with some errors in 357.00ms

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading '500')
    at /Users/user/Work/tepui/blog.dev/node_modules/@tailwindcss/forms/src/index.js:28:59
    at registerPlugins (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupContextUtils.js:669:61)
    at createContext (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupContextUtils.js:828:5)
    at Object.getContext (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupContextUtils.js:883:19)
    at /Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:142:53
    at /Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/processTailwindFeatures.js:39:11
    at plugins (/Users/user/Work/others/blog.dev/node_modules/tailwindcss/lib/index.js:20:104)
    at LazyResult.runOnRoot (/Users/user/Work/others/blog.dev/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/user/Work/others/blog.dev/node_modules/postcss/lib/lazy-result.js:393:26)
    at async Object.loader (/Users/user/Work/others/blog.dev/node_modules/postcss-loader/dist/index.js:97:14)
    at processResult (/Users/user/Work/others/blog.dev/node_modules/webpack/lib/NormalModule.js:721:19)
    at /Users/user/Work/others/blog.dev/node_modules/webpack/lib/NormalModule.js:827:5
    at /Users/user/Work/others/blog.dev/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/user/Work/others/blog.dev/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/user/Work/others/blog.dev/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/user/Work/others/blog.dev/node_modules/postcss-loader/dist/index.js:142:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[AiFxApp]

Naturally it would depend on your build… a recent installation I did I came across this same error again and this is how I solved it:

1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 1 warning

npm install autoprefixer@10.4.5 --save-exact

[AiFxApp]

OK -->> I thought to actually remove the package so… npm uninstall @tailwindcss/forms

removed 2 packages, and audited 777 packages in 5s

77 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Then re-install npm install -D @tailwindcss/forms

npm run dev and BANG! No Errors!

THANKS for your direction! 👌