Prettier causes deployment failure

Help
1

For some reason, my deployments are failing at the very end. There was little to no code changes between the last successful deployment and the first failing one. It manages to build the different pages anyway, the error occurs upon deploying the output. I think this is an issue on your end.

The project I’m building is in a monorepo. Other apps of the repo deploy fine. I’m using Convex in this one so I have a custom build command to deploy Convex’s functions as well. The issue doesn’t seem to come from there as my functions are correctly deployed and I havn’t changed the command before the deployments started to fail.

image
image1168×176 24 KB

3

After some digging, I have traced the issue to installing Prettier in my app. Deployment went smoothly after removing it. I critically need Prettier for this project. Not only as I write code but because I use it with Monaco editor within my app. Any help would be greatly appreciated!

4

So, no one at Vercel considers that my app not deploying is important? Or do I have to pay a Pro plan for my problem to get some attention?

5

Hey, WKD!

We’re a small community team getting through a backlog of questions, so we appreciate your patience. :slight_smile:

You can stay on the plan you’re on, we’re happy to help you either way.

Could you share what your configuration looks like?

I’d also recommend checking out this thread on how to get better answers:

8

Hey, thank you for the answer.

To be clear, I wasn’t expecting a solution within an hour, but seeing more recent posts than mine getting staff involved while I don’t even get some acknowledgment of my situation was concerning. Sorry if I came out grumpy (I was a little bit).

Now to my issue. I’ve managed to solve it but it raised another thing that I’d like your input on.

For some context: my app is a website builder integrating monaco to let users code directly within it. This is why I need prettier as a prod dependency. The builder also uses tailwind v4, which doesn’t work in the browser out-of-the-box like v3, it has to run in a node environment. I think it is because of them now using lightningcss. So I’ve implemented a script that’s executed as a user saves their code.

// scripts/tailwindcss.js

import tailwindcss from '@tailwindcss/postcss'
import {readFile} from 'fs/promises'
import postcss from 'postcss'

const apexPath = process.argv[2]
const apex = await readFile(apexPath, 'utf-8')

const css = await postcss([
  tailwindcss,
  {
    postcssPlugin: 'remove-comments',
    Once: root => {
      root.walkComments(comment => {
        comment.remove()
      })
    }
  }
])
  .process(apex, {from: apexPath})
  .then(r => r.css)

console.log(css)
9

This way I can execute tailwind v4 at runtime. Doing this, I was getting an error anytime I’d execute the script because any module used in the script was not found. And by “any” I mean @tailwindcss/postcss, postcss, their dependencies and the dependencies of their dependencies (recursively).

After some research, I’ve found that these dependencies are not included because Next.js doesn’t know that I am using this script at runtime and need its dependencies to be available.

Here’s how I use the tailwind script:

export const tailwindCompile = async (p: {
  themeId: string
  usedStyles: string[]
  fonts: string[]
  styles: {path: string; raw: string}[]
  content: {path: string; raw: string}[]
}) => {
  {...implementation...}
  const command = `node scripts/tailwindcss.js "${tmpThemeId}${apexPath}"`
  const output = execSync(command, {encoding: 'utf-8'})
  return output
}
10

I guess Next.js won’t parse that string to detect that I’m using the script there, which is understandable.

That’s how I came across the outputFileTracingIncludes setting of NextConfig, letting me include files to the output bundle of the app on a page-basis.

My previous issue with prettier was that when I’ve first implemented this NextConfig setting, somehow prettier wasn’t found at runtime. So I did add it to the list of files to include and it worked. A couple days ago, for some reason, it stopped working and made my deployments fail. After removing it from there, everything was fine again.

Which leads to my final concern:

I first thought that outputFileTracingIncludes would only need to include @tailwindcss/postcss and postcss to work. But I actually had to download and manually include each dependency.

11

Now my setting looks like this:

outputFileTracingIncludes: {
  '/space/[slug]/design/edit/[theme]': [
    './scripts/tailwindcss.js',
    './node_modules/jiti/**/*',
    './node_modules/postcss/**/*',
    './node_modules/@tailwindcss/postcss/**/*',
    './node_modules/tapable/**/*',
    './node_modules/enhanced-resolve/**/*',
    './node_modules/typescript/**/*',
    './node_modules/picocolors/**/*',
    './node_modules/source-map-js/**/*',
    './node_modules/graceful-fs/**/*',
    './node_modules/tailwindcss/**/*',
    './node_modules/detect-libc/**/*',
    './node_modules/lightningcss/**/*',
    './node_modules/nanoid/non-secure/**/*',
    './node_modules/lightningcss-linux-x64-gnu/**/*',
    './node_modules/enhanced-resolve/**/*',
    './node_modules/@alloc/quick-lru/**/*',
    './node_modules/@tailwindcss/node/**/*',
    './node_modules/@tailwindcss/oxide/**/*',
    './node_modules/@tailwindcss/postcss/**/*',
    './node_modules/@ampproject/remapping/**/*',
    './node_modules/magic-string/**/*',
    './node_modules/@jridgewell/set-array/**/*',
    './node_modules/@jridgewell/resolve-uri/**/*',
    './node_modules/@jridgewell/gen-mapping/**/*',
    './node_modules/@jridgewell/trace-mapping/**/*',
    './node_modules/@jridgewell/sourcemap-codec/**/*',
    './node_modules/@tailwindcss/oxide-linux-x64-gnu/**/*'
  ]
}

And my package.json is now full of these:

"devDependencies": {
  {...otherDependencies},
  "@alloc/quick-lru": "^5.2.0",
  "@ampproject/remapping": "^2.3.0",
  "@jridgewell/gen-mapping": "^0.3.8",
  "@jridgewell/resolve-uri": "^3.1.2",
  "@jridgewell/set-array": "^1.2.1",
  "@jridgewell/sourcemap-codec": "^1.5.0",
  "@jridgewell/trace-mapping": "^0.3.25",
  "@tailwindcss/line-clamp": "^0.4.4",
  "@tailwindcss/node": "^4.1.8",
  "@tailwindcss/oxide": "^4.1.8",
  "@tailwindcss/oxide-linux-x64-gnu": "^4.1.8",
  "@tailwindcss/postcss": "^4.1.8",
  "detect-libc": "^2.0.4",
  "enhanced-resolve": "^5.18.1",
  "graceful-fs": "^4.2.11",
  "jiti": "^2.4.2",
  "lightningcss": "^1.30.1",
  "lightningcss-linux-x64-gnu": "^1.30.1",
  "magic-string": "^0.30.17",
  "nanoid": "^5.1.5",
  "picocolors": "^1.1.1",
  "postcss": "^8.5.4",
  "source-map-js": "^1.2.1",
  "tapable": "^2.2.2",
}
12

So to my final question: is there a better way for me to go about it? I’d need a way to simply tell Next.js to include all the needed dependencies for postcss and @tailwindcss/postcss, without me having to manully include them like this and certainly not directly adding them to my package.json.

Sorry for the reply divided in multiple posts but I was getting an error trying to publish everything in a single post. It looks like there’s a character count cap but nothing indicates when you went past it.