在 Vercel 上部署 NextJS 應用程序時出錯。 我也在使用 Tailwind 框架

Question

我正在嘗試在 Vercel 上部署我的 NextJS 應用程序，但在部署時出現以下錯誤。 我也在使用 Tailwind CSS 框架。 我不知道錯誤是什么以及如何糾正它。

我猜錯誤是在這里的某個地方：16:20:55.573 HookWebpackError: 預期一個左方括號。 但我不確定。

16:20:00.163
Installing dependencies...
16:20:13.951
16:20:13.952
> @fortawesome/fontawesome-common-types@0.2.35 postinstall /vercel/path0/node_modules/@fortawesome/fontawesome-common-types
16:20:13.952
> node attribution.js
16:20:13.952
16:20:14.025
Font Awesome Free 0.2.35 by @fontawesome - https://fontawesome.com
16:20:14.026
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
16:20:14.026
16:20:14.046
16:20:14.046
> core-js-pure@3.15.2 postinstall /vercel/path0/node_modules/core-js-pure
16:20:14.047
> node -e "try{require('./postinstall')}catch(e){}"
16:20:14.047
16:20:14.229
16:20:14.229
> @fortawesome/fontawesome-svg-core@1.2.35 postinstall /vercel/path0/node_modules/@fortawesome/fontawesome-svg-core
16:20:14.229
> node attribution.js
16:20:14.229
16:20:14.304
Font Awesome Free 1.2.35 by @fontawesome - https://fontawesome.com
16:20:14.304
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
16:20:14.304
16:20:14.311
16:20:14.311
> @fortawesome/free-regular-svg-icons@5.15.3 postinstall /vercel/path0/node_modules/@fortawesome/free-regular-svg-icons
16:20:14.311
> node attribution.js
16:20:14.311
16:20:14.385
Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
16:20:14.385
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
16:20:14.385
16:20:14.391
16:20:14.391
> @fortawesome/free-solid-svg-icons@5.15.3 postinstall /vercel/path0/node_modules/@fortawesome/free-solid-svg-icons
16:20:14.392
> node attribution.js
16:20:14.392
16:20:14.466
Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
16:20:14.466
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
16:20:14.466
16:20:14.930
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
16:20:14.931
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
16:20:14.931
16:20:14.934
added 705 packages from 389 contributors in 14.202s
16:20:15.220
16:20:15.221
88 packages are looking for funding
16:20:15.221
  run `npm fund` for details
16:20:15.221
16:20:15.294
Detected Next.js version: 11.0.1
16:20:15.296
Running "npm run build"
16:20:15.576
16:20:15.576
> numverify@0.1.0 build /vercel/path0
16:20:15.576
> next build
16:20:15.576
16:20:16.480
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
16:20:16.639
Attention: Next.js now collects completely anonymous telemetry regarding usage.
16:20:16.639
This information is used to shape Next.js' roadmap and prioritize features.
16:20:16.640
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
16:20:16.640
https://nextjs.org/telemetry
16:20:16.640
16:20:16.690
info  - Checking validity of types...
16:20:18.401
info  - Creating an optimized production build...
16:20:25.101
16:20:25.101
warn - Tailwind is not purging unused styles because no template paths have been provided.
16:20:25.102
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.
16:20:25.102
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
16:20:55.572
Failed to compile.
16:20:55.573
16:20:55.573
HookWebpackError: Expected an opening square bracket.
16:20:55.573
16:20:55.574
16:20:55.574
> Build error occurred
16:20:55.575
Error: > Build failed because of webpack errors
16:20:55.575
    at /vercel/path0/node_modules/next/dist/build/index.js:15:924
16:20:55.575
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
16:20:55.652
npm ERR! code ELIFECYCLE
16:20:55.652
npm ERR! errno 1
16:20:55.656
npm ERR! numverify@0.1.0 build: `next build`
16:20:55.656
npm ERR! Exit status 1
16:20:55.656
npm ERR! 
16:20:55.656
npm ERR! Failed at the numverify@0.1.0 build script.
16:20:55.656
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
16:20:55.663
16:20:55.663
npm ERR! A complete log of this run can be found in:
16:20:55.663
npm ERR!     /vercel/.npm/_logs/2021-07-31T10_50_55_656Z-debug.log
16:20:55.682
Error: Command "npm run build" exited with 1

Answer 1

我有類似的問題，我解決了添加

purge: ['./components//*.{js,ts,jsx,tsx}', './pages//*.{js,ts,jsx,tsx}'],

到我的 tailwind.config.js

或者

purge: ["./src/**/*.html", "./src/**/*.js", "./src/**/*.jsx", "./public/**/*.html"],

之后我就可以構建我的應用程序

Answer 2

來自 Suleman的命令對於構建工作正常，但對我來說 TailwindCSS 完全停止工作。

解決方案是遵循這個 Github 評論。 在package.json包含以下內容

 "dependencies": {
    // ...
 },
 "resolutions": {
   "postcss-focus-within": "^4.0.0"
 },

然后yarn install 。 這是專門針對yarn而不是npm 。

Answer 3

對於使用 Typescript 遇到問題的任何人的快速說明，Suleman 和 Blycuit 的解決方案是正確的。

但是，對於打字稿，您應該使用 Suleman 的這一行

purge: ['./components//*.{js,ts,jsx,tsx}', './pages//*.{js,ts,jsx,tsx}'],

因為它包含.ts和tsx 。

就我而言，我的tailwind.config.js的最終代碼是

module.exports = {purge:[
"./src/**/*.html",
"./src/**/*.js",
"./src/**/*.jsx",
"./public/**/*.html",
"./src/**/*.ts",
"./src/**/*.tsx",],