Ignore build errors in vercel

Unanswered

Egyptian Mau posted this in #help-forum

Egyptian MauOP

2024-01-23T04:14:57.000Z

Hello, i need to force deploy in Vercel, even though next build is erroring. I understand this isn't recommended, but I need to do so in my case. Is there a way to do this?

I've tried setting CI=false . I've also tried creating a custom script that runs next build and then deterministically return exit(0) , but vercel still fails on the build step. I've also tried running npm run build --silent and that didn't seem to work. Any help would be great.

19 Replies

@Egyptian Mau Hello, i need to force deploy in Vercel, even though `next build` is erroring. I understand this isn't recommended, but I need to do so in my case. Is there a way to do this? I've tried setting `CI=false` . I've also tried creating a custom script that runs `next build` and then deterministically return `exit(0)` , but vercel still fails on the build step. I've also tried running `npm run build --silent` and that didn't seem to work. Any help would be great.

joulev

2024-01-23T04:15:56.000Z

say you can ignore build errors, and next build fails. what do you do now? since the build fails you cannot next start to serve the app because the output .next folder is not a full valid build

Egyptian MauOP

2024-01-23T04:16:53.000Z

is there a reason why running npm run dev works fine?

i understand your point though.

linesofcode

2024-01-23T04:18:56.000Z

In next config

typescript.ignoreBuildErrors

Set that to true

And try again

Egyptian MauOP

2024-01-23T04:22:01.000Z

that did not work for me

/** @type {import('next').NextConfig} */
const nextConfig = {
    typescript: {
        ignoreBuildErrors: true
    }
}

module.exports = nextConfig

@joulev say you can ignore build errors, and next build fails. what do you do now? since the build fails you cannot `next start` to serve the app because the output `.next` folder is not a full valid build

Egyptian MauOP

2024-01-23T04:26:24.000Z

i think you are correct. I ran next start and that fails because there are no build files. if i run next dev, that works fine. I see the build error in the console, but the app still operates fine.

@Egyptian Mau that did not work for me

joulev

2024-01-23T04:27:48.000Z

i think instead of trying to suppress ts errors, just... fix those ts errors? or use plain javascript

what is the ts error exactly? posting here then we might be able to help

Egyptian MauOP

2024-01-23T04:30:46.000Z

Got it. I am seeing ReferenceError: window is not defined. The issue is arising because I am importing EmailEditor from react-email-editor. To overcome this, i used a dynamic import, shown below:

const DesignEditor = dynamic( () => { return import("./edit-design-view"); }, { ssr: false } );

this fixed it in terms of getting rid of the build errors, but then the functionality of the component was not working correctly.

@Egyptian Mau Got it. I am seeing `ReferenceError: window is not defined`. The issue is arising because I am importing `EmailEditor` from `react-email-editor`. To overcome this, i used a dynamic import, shown below: `const DesignEditor = dynamic( () => { return import("./edit-design-view"); }, { ssr: false } );` this fixed it in terms of getting rid of the build errors, but then the functionality of the component was not working correctly.

joulev

2024-01-23T04:32:37.000Z

this is not a ts error. the way you did here is correct and is the way to do here, see https://nextjs-faq.com/browser-api-client-component. you might want to [use the loading prop](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#adding-a-custom-loading-component) to render a fallback when the component gets loaded

your react-email-editor is not compatible with server-side rendering, hence the error. you have to use next/dynamic here, your fix is correct

@Egyptian Mau /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true } } module.exports = nextConfig

joulev

2024-01-23T04:33:54.000Z

if you enabled this, disable it now because (1) it is not relevant to the error you have and (2) it is harmful in the long run

@joulev this is not a ts error. the way you did here is correct and is the way to do here, see https://nextjs-faq.com/browser-api-client-component. you might want to [use the `loading` prop](<https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#adding-a-custom-loading-component>) to render a fallback when the component gets loaded

Egyptian MauOP

2024-01-23T04:37:34.000Z

thank you for the helpful docs. i'll see if i can get it working. The react email editor was rendering with the dynamic import, but some of the functionality was broken, so i need to figure that part out.

@Egyptian Mau thank you for the helpful docs. i'll see if i can get it working. The react email editor was rendering with the dynamic import, but some of the functionality was broken, so i need to figure that part out.

joulev

2024-01-23T04:39:42.000Z

interesting. i have no experience with that library so cant offer help here, but you can try looking up the error/problem in the library's bug tracker on github

Egyptian MauOP

2024-01-24T03:17:43.000Z

In case someone needs it, the solution was to downgrade the version of react-email-editor to 1.7.7 - https://github.com/unlayer/react-email-editor/issues/364.