Live Typescript Checking with Next.JS

user_1676476 0
Viewed 1873

The only way to check for TypeScript errors with Next.JS is to use npm run build (or yarn build).

If you run npm run dev, it won't show you TypeScript errors, which sucks because it would be nicer to see them in the Terminal window while you're developing.

Is there any way to make npm run dev show TS errors?

FYI - I REALLY don't like using my IDE to work with TS errors. Just my personal preference. I prefer to see them in the terminal window with all the other errors.

typescript next.js
3 Answers
user_11685240

You can do something like this if you are using TS4+:

// package.json

{
  "scripts": {
    "dev": "next dev",
    "dev:ts": "yarn dev & yarn ts:watch", // <-- or use concurrently here
                                          // npmjs.com/package/concurrently
    "ts": "tsc --noEmit --incremental",
    "ts:watch": "yarn ts --watch"
  },

  // ...
}

You can also provide custom webpack config like this:

// next.config.js

module.exports = {
  webpack(config, { dev }) {
    if (dev) {
      const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
      config.plugins.push(new ForkTsCheckerWebpackPlugin());
    }
    return config;
  },
};

The feature request is being tracked here.

user_116136220

I ran into the same issue. It turns out I started the project with a .eslintrc and did not specify using with Typescript. So, when I later added TypeScript into the project there were no TS errors.

What I did to fix the issue:

  1. Removed .eslistrc
  2. Launch npx eslint --init making sure I selected using Typescript and To check syntax, find problems, and enforce code style
  3. Run npm run dev and it should be working
user_110613710
Related