Error while deploying NextJS App on Vercel. I am also using Tailwind Framework

Question

I am trying to deploy my NextJS App on Vercel and I am getting the following errors while deploying. I am also using Tailwind CSS framework. I have no idea what the error is and how to rectify it.

I am guessing the error is somewhere here: 16:20:55.573 HookWebpackError: Expected an opening square bracket. But I am not sure.

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

A quick note for anyone who has the issue using Typescript, the solution from Suleman and Blycuit is correct.

However, for Typescript you should use this line from Suleman

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

Because it contains .ts and tsx.

In my case, the final code in my tailwind.config.js is

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

Answer 2

The command from Suleman works fine for build but for me TailwindCSS completely stop working.

The solution is following this Github comment. Include the following to package.json

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

Then yarn install. This is specifically to yarn and not npm.

Answer 3

I had similar issue i solved adding

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

to my tailwind.config.js

OR

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

after that I was able to build my app