라라벨8.0 tailwindcss 빌드업 에러

    Asset     Size   Chunks             Chunk Names

/js/app.js  596 KiB  /js/app  [emitted]  /js/app

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: getProcessedPlugins is not a function

    at /Users/wonhochoi/blog/node_modules/tailwindcss/lib/processTailwindFeatures.js:71:83

    at LazyResult.run (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:288:14)

    at LazyResult.asyncTick (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:212:26)

    at LazyResult.asyncTick (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:225:14)

    at /Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:254:14

    at new Promise (<anonymous>)

    at LazyResult.async (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:250:23)

    at LazyResult.then (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:131:17)

    at Promise.resolve.then.then (/Users/wonhochoi/blog/node_modules/postcss-loader/src/index.js:142:8)

    at process._tickCallback (internal/process/next_tick.js:68:7)

    at runLoaders (/Users/wonhochoi/blog/node_modules/webpack/lib/NormalModule.js:316:20)

    at /Users/wonhochoi/blog/node_modules/loader-runner/lib/LoaderRunner.js:367:11

    at /Users/wonhochoi/blog/node_modules/loader-runner/lib/LoaderRunner.js:233:18

    at context.callback (/Users/wonhochoi/blog/node_modules/loader-runner/lib/LoaderRunner.js:111:13)

    at Promise.resolve.then.then.catch (/Users/wonhochoi/blog/node_modules/postcss-loader/src/index.js:208:9)

    at process._tickCallback (internal/process/next_tick.js:68:7)

 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)

Module build failed (from ./node_modules/postcss-loader/src/index.js):

TypeError: Object.entries(...).flatMap is not a function

    at flattenColorPalette (/Users/wonhochoi/blog/node_modules/tailwindcss/lib/util/flattenColorPalette.js:8:83)

    at /Users/wonhochoi/blog/node_modules/tailwindcss/lib/plugins/divideColor.js:27:53

    at plugins.forEach.plugin (/Users/wonhochoi/blog/node_modules/tailwindcss/lib/util/processPlugins.js:69:5)

    at Array.forEach (<anonymous>)

    at _default (/Users/wonhochoi/blog/node_modules/tailwindcss/lib/util/processPlugins.js:63:11)

    at /Users/wonhochoi/blog/node_modules/tailwindcss/lib/processTailwindFeatures.js:60:54

    at LazyResult.run (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:288:14)

    at LazyResult.asyncTick (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:212:26)

    at LazyResult.asyncTick (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:225:14)

    at /Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:254:14

    at new Promise (<anonymous>)

    at LazyResult.async (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:250:23)

    at LazyResult.then (/Users/wonhochoi/blog/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:131:17)

    at Promise.resolve.then.then (/Users/wonhochoi/blog/node_modules/postcss-loader/src/index.js:142:8)

 @ ./resources/css/app.css 2:14-142

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`

npm ERR! Exit status 2

npm ERR! 

npm ERR! Failed at the @ development script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/wonhochoi/.npm/_logs/2020-11-30T19_29_06_154Z-debug.log

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! @ dev: `npm run development`

npm ERR! Exit status 2

npm ERR! 

npm ERR! Failed at the @ dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     /Users/wonhochoi/.npm/_logs/2020-11-30T19_29_06_176Z-debug.log

여기서 자꾸 에러가 되어서 컴파일에러가 발생했다.

node 버전이 v10.15.3

node  버전을 업그레이드하여 해결하였다. v14.15.1

       Asset      Size   Chunks             Chunk Names

/css/app.css  3.74 MiB  /js/app  [emitted]  /js/app

  /js/app.js   594 KiB  /js/app  [emitted]  /js/app

그래도 안된다면 PostCSS 7 호환성 빌드 참고하자

https://tailwindcss.com/docs/installation

package.json

{

"private": true,

"scripts": {

"dev": "npm run development",

"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch": "npm run development -- --watch",

"watch-poll": "npm run watch -- --watch-poll",

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",

"prod": "npm run production",

"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"

},

"devDependencies": {

"axios": "^0.19",

"cross-env": "^7.0",

"laravel-mix": "^6.0.0-beta.14",

"lodash": "^4.17.19",

"postcss": "^8.2.1",

"resolve-url-loader": "^3.1.0",

"vue-template-compiler": "^2.6.12"

},

"dependencies": {

"autoprefixer": "^9.8.6",

"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"

}

}