라라벨8.0 tailwindcss 빌드업 에러

라라벨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 ()

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 ()

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 ()

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 " } }

from http://anko3899.tistory.com/478 by ccl(A) rewrite - 2021-01-05 15:59:58