vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.86k stars 26.86k forks source link

Next with NX using tailwind takes over 20 min to compile #68183

Open nolafs opened 2 months ago

nolafs commented 2 months ago

Link to the code that reproduces this issue

https://github.com/nolafs/Rocket-house-productions/tree/development

To Reproduce

  1. I first notice it after I merged my feature into development branch but it must have been there before because both branches require 20 min + to compile
  2. I only added additional components into my library
  3. I did not change or alter the default setup by NX for Next with tailwind

Current vs. Expected behavior

It is taking around 22 min to compile the project. When removing Tailwind imports such as base, compile time is normal. Removing NX createGlobPatternsForDependencies(__dirname) and importing each library manually seems to fix it as well.

"/Users/olafsiebert/html/rocket_house_productions/libs/shared/features/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html}",
    "/Users/olafsiebert/html/rocket_house_productions/libs/shared/ui/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html}",
    "/Users/olafsiebert/html/rocket_house_productions/libs/shared/layout/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html}"
   // ...createGlobPatternsForDependencies(__dirname),

Here is the output of createGlobPatternsForDependencies

/Users/olafsiebert/html/rocket_house_productions/libs/shared/layout/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html} /Users/olafsiebert/html/rocket_house_productions/libs/shared/hooks/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html} /Users/olafsiebert/html/rocket_house_productions/libs/shared/types/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html} /Users/olafsiebert/html/rocket_house_productions/libs/shared/features/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html} /Users/olafsiebert/html/rocket_house_productions/libs/shared/ui/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html} /Users/olafsiebert/html/rocket_house_productions/apps/kids-guitar-dojo/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html} /Users/olafsiebert/html/rocket_house_productions/libs/shared/util/src/**/*!(*.stories|*.spec).{tsx,ts,jsx,js,html}

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Sat Jul 13 00:57:28 PDT 2024; root:xnu-11215.0.165.0.4~50/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 20.10.0
  npm: 10.2.5
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.5 // Latest available version is detected (14.2.5).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I am running the lastest versions

nolafs commented 2 months ago

I found the solution. I am using Prismic in my project. Prismic does not support monorepos. To make the Slice Machine work, I had to install it inside the application, which creates a node_modules folder. The createGlobPatternsForDependencies helper does not exclude the nested node_modules folder, and Tailwind will process this folder. This is the cause of the 20-minute build time. I came up with a simple hack.

const content = [...createGlobPatternsForDependencies(__dirname)];
const index = content.findIndex((item) => item.includes('apps/kids-guitar-dojo'));
content[index] = content[index].replace('apps/kids-guitar-dojo/', 'apps/kids-guitar-dojo/(!node_modules)');