NextJS not showing TypeScript errors on Runtime

[vacom]

Hey I have a NextJS 9.4 project with the default TypeScript config files

When developing in the IDE it shows the errors but running the browser, it continues normally, I would like to provide an error in the browser. For example, CRA has this behavior.

The code example below in the IDE shows an error but the code stills compile and works in the browser. 😓

const mathTest = (number1: number, number2: number) => {
    return number1 + number2;
  };

  console.log("number = ", mathTest(2, "22"))

My tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext", "esnext.intl"],
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

If I run the tsc in the terminal it shows the correct errors and warnings, I need the project to be strict and not let developers continue working in the project with this kind of errors. Can someone help me understand this Nextjs behavior?

The validation works correctly on build but can I have the same experience on dev

[rafaelalmeidatk]

I am not sure if there is a way to enable runtime type errors, but in my experience it is better if your environment doesn't crash with type errors. Sometimes you want to test something and don't care for the types, but if you app keeps giving an error you have to waste a lot of time fixing the types for something you won't even use anyway.

In my TS projects, I create a npm script called type-check that I can run whenever I change something and want to make sure all the codebase is still correct:

"type-check": "tsc --noEmit",

If you want to make sure you aren't merging code with type errors, you can include this command in your CI tasks too, before the build.

[vacom]

Thanks for the suggestion, the validation works well when I build or use CI, that is, it gives the correct errors and does not let it build if there is a problem in the code. What I meant was to have this validation when it is being developed (localhost). For example, if I have an error in the types in the code / IDE the browser should present this error and not let it continue to work. I don't know if I'm clarifying it very well

For example, when I'm using TypeScript with create-react-app the error persists in the browser. I am trying to replicate this same experience in the Nextjs project. From what I saw NextJS does not use the official TS compiler (tsc)

[rafaelalmeidatk]

Yeah I understand what you want to archive, but it is not possible by default. Here is the reason: #12735 (comment)

[vacom]

Thanks for the response, its somehow a little disappointing and confusing but that's what it is. Going to mark as the correct answer.

[kelly-tock]

I am in the middle of setting things up to migrate to Next.js, and will report back, but currently we have https://www.npmjs.com/package/fork-ts-checker-webpack-plugin setup, and it by default is async and will not cause a build error for type errors. this would report in the console while developing as an extra piece of feedback.