Deploy Failed With Vercel

Technical Questions
1

My Builder.io deploy to Vercel is failing. I’m doing a fresh build as per the QuickStart (Developer Quickstart - Builder.io) and everything is working well on local, but then when I try to deploy to Vercel I get this error:

./src/components/builder.tsx
4:10  Error: 'BuilderContent' is defined but never used.  @typescript-eslint/no-unused-vars

Any ideas what this could be and why it would be fine locally but not on Vercel?

2

Hey @hugue The error you’re encountering, 'BuilderContent' is defined but never used, is a TypeScript linter issue that often surfaces in deployments where certain linting rules are enforced more strictly than in local environments. Here’s how you can resolve this issue:

  1. Remove Unused Imports:

    • If BuilderContent is not used in your builder.tsx file, you can safely remove the import statement to fix the linting error:
    // Remove this import if it's unused
// import { BuilderContent } from '@builder.io/sdk';

  2. Check Linting Configuration:

    • Verify if your .eslintrc configuration in your project is set to treat unused variables as errors. By default, many setups treat these as warnings locally but errors on CI/CD systems to ensure clean code. You can adjust the @typescript-eslint/no-unused-vars rule to be more lenient or to be warnings instead of errors.

  3. Build Script Configuration:

    • Ensure that your build script in package.json is set up properly and isn’t overriding local settings. If you have a CI-specific ESLint configuration, ensure it’s consistent with your development environment.
    {
  "scripts": {
    "build": "next build",
    "lint": "next lint" // Make sure you have linting configured if being enforced
  }
}

  4. Local Lint Check:

    • Run npm run lint or yarn lint locally to see if you get the same errors. Fix any issues locally before pushing back to Vercel for a redeployment.

  5. Ignoring Lint Errors (Temporary Fix):

    • If you need a quick deployment and plan to address the underlying issue later, you can add a comment to temporarily ignore the lint rule. Note, this should be a last resort:
    /* eslint-disable @typescript-eslint/no-unused-vars */
// Your imports and other code
/* eslint-enable @typescript-eslint/no-unused-vars */

Explanation for Difference Between Local and Vercel

The difference might be due to the following reasons:

  • Local Configuration: Your local development environment might be set to tolerate warnings or have a different configuration than what Vercel uses.
  • Vercel’s CI/CD Settings: Vercel could be enforcing stricter linting rules as part of its build process, which are not present or less strict in local development.

Once you’ve made these changes, try re-deploying your application to Vercel. It should help resolve the linting error you are encountering during the deployment.

If this doesn’t resolve your issue, please share your integration code with me to investigate this further.

1 Like
3

Thanks for the thorough reply. Ultimately I was able get this going with the buildercontent removal and them some other minor fixes to page model references. I tried the linting route, but as you noted the differences between local and Vercel were causing issues. npm run lint local came back clean but Vercel was failing.

I guess ultimately I’m most interested in the differences between Vercel and local, as you noted. I will review the Vercel ci/cd settings as my local setup is pretty standard and I’d be surprised if any changes were required that are specific to a nextjs/builder config.

The docs regarding if builderContent is required or not, or why it wouldn’t be, might be a bit light? Maybe I was looking in the wrong place, but I was confused as to why it could be removed (linting aside) as I thought it was needed for the builder UI data to get API’d to the app. Clearly I’m confused with some of the underlying mechanics!

Thanks for the help.