Next.js: Slow development with TypeScript

Created on 24 Sep 2019 · 19Comments · Source: vercel/next.js

Bug report

Describe the bug

My problems:

I at least wait 2 - 3 minutes for HMR to refresh content, after code change
I at least wait 1 minute to browse between page transitions (especially dynamic routes)

Context:

I work in a monorepo project
I run a custom express server

Also:

next-i18next
material-ui
styled-components
apollo graphql client
iTerm with 4 watch modes: Apollo Server, CRA app, shared TS project, NextJS app
Chrome with 20+ tabs

What I did so far:

excluded node-modules in tsconfig.json
removed fork-ts-checker-webpack-plugin
added typescript: { transpileOnly: true }

BUG (if it is):

Even though all my efforts, I still see bundled successfully, waiting for typecheck results ...

There can be many factors effecting the speed. Would you suggest anything else?

To Reproduce

I can't really suggest how to reproduce, since it's a very complex project.

Expected behavior

I'd expect a fast development speed.

Screenshots

I can provide if needed...

System information

OS: MacBook Pro (Retina, 13-inch, Late 2013), MacOS Mojave 10.14.6, i5/8GB
Chrome latest

Additional context

next.config.js:

/* eslint-disable @typescript-eslint/no-var-requires */

const path = require('path')
const Dotenv = require('dotenv-webpack')
const withTM = require('next-transpile-modules')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = withTM({
  transpileModules: ['@project/shared'],
  typescript: {
    transpileOnly: true
  },
  webpack: config => {
    config.plugins = config.plugins || []
    config.plugins = config.plugins.filter(plugin => {
      const n = plugin.constructor.name === 'ForkTsCheckerWebpackPlugin'
      const i = plugin instanceof ForkTsCheckerWebpackPlugin
      return !(n || i)
    })
    // config.plugins.push(
    //   new ForkTsCheckerWebpackPlugin({
    //     reportFiles: ['does-not-exist']
    //   })
    // )
    config.plugins.push(new Dotenv({
      path: path.join(__dirname, '.env'),
      systemvars: false
    }))
    return config
  }
})

package.json:

{
  "private": true,
  "name": "@project/web",
  "version": "1.0.0",
  "scripts": {
    "build": "next build && tsc --project tsconfig.server.json",
    "dev": "nodemon",
    "start": "cross-env NODE_ENV=production ts-node --project tsconfig.server.json -r tsconfig-paths/register dist/server"
  },
  "dependencies": {
    "@apollo/react-hooks": "^3.1.0",
    "@date-io/date-fns": "^1.3.9",
    "@project/shared": "1.0.0",
    "@material-ui/core": "^4.4.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/lab": "^4.0.0-alpha.25",
    "@material-ui/pickers": "^3.2.5",
    "@material-ui/styles": "^4.3.3",
    "@zeit/next-css": "^1.0.1",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link-context": "^1.0.19",
    "apollo-link-error": "^1.1.12",
    "apollo-link-http": "^1.5.16",
    "apollo-link-http-common": "^0.2.15",
    "apollo-link-ws": "^1.0.19",
    "apollo-upload-client": "^11.0.0",
    "body-parser": "^1.19.0",
    "body-scroll-lock": "^2.6.4",
    "classnames": "^2.2.6",
    "cookie": "^0.4.0",
    "date-fns": "^2.1.0",
    "dotenv-webpack": "^1.7.0",
    "express": "^4.17.1",
    "formik": "^1.5.8",
    "formik-material-ui": "^0.0.22",
    "graphql": "^14.5.6",
    "graphql-tag": "^2.10.1",
    "https-proxy-agent": "^2.2.2",
    "isomorphic-unfetch": "^3.0.0",
    "lodash": "^4.17.15",
    "material-ui-popup-state": "^1.4.1",
    "next": "^9.0.5",
    "next-compose-plugins": "^2.2.0",
    "next-i18next": "^1.1.2",
    "next-transpile-modules": "^2.3.1",
    "notistack": "^0.9.0",
    "popper.js": "^1.15.0",
    "react": "^16.9.0",
    "react-apollo": "^3.1.0",
    "react-dom": "^16.9.0",
    "react-input-mask": "^2.0.4",
    "react-markdown": "^4.2.2",
    "react-select": "^3.0.4",
    "react-swipeable": "^5.4.0",
    "react-swipeable-views": "^0.13.3",
    "react-swipeable-views-core": "^0.13.1",
    "react-swipeable-views-utils": "^0.13.3",
    "styled-components": "^4.3.2",
    "subscriptions-transport-ws": "^0.9.16",
    "webpack": "^4.40.2",
    "yup": "^0.27.0"
  },
  "devDependencies": {
    "@types/apollo-upload-client": "^8.1.3",
    "@types/body-scroll-lock": "^2.6.1",
    "@types/classnames": "^2.2.9",
    "@types/cookie": "^0.3.3",
    "@types/express": "^4.17.1",
    "@types/lodash": "^4.14.138",
    "@types/node": "^12.7.4",
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "@types/react-input-mask": "^2.0.3",
    "@types/react-select": "^3.0.4",
    "@types/react-swipeable-views": "^0.13.0",
    "@types/recompose": "^0.30.7",
    "@types/styled-components": "^4.1.18",
    "@types/styled-jsx": "^2.2.8",
    "@types/yup": "^0.26.23",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-plugin-styled-components": "^1.10.6",
    "cross-env": "^5.2.1",
    "fork-ts-checker-webpack-plugin": "^1.5.0",
    "nodemon": "^1.19.2",
    "ts-node": "^8.3.0",
    "ts-node-dev": "^1.0.0-pre.42",
    "tsconfig-paths": "^3.8.0",
    "typescript": "^3.6.2"
  }
}

nodemon.json

{
  "watch": [
    "server",
    "static"
  ],
  "exec": "ts-node --project tsconfig.server.json -r tsconfig-paths/register server",
  "ext": "js ts"
}

Source

mehmetnyarar

👍11

Most helpful comment

I found allowJs: true in tsconfig.json makes my project very slow.
After I set it false, It takes less than 1 second.

landvibe on 16 Nov 2019

👍9

All 19 comments

Can you please share your entire project? That'll be the only way we can get this fixed. You can share it in private.

Timer on 24 Sep 2019

@Timer really sorry, it's a commercial project and I can't share.

I'm wondering why "bundled successfully, waiting for typecheck results" message appears despite my efforts. Is there anything else can be done for NextJS to skip type-checking?

I'm not sure if this is a bug or not, since here @kachkaev seems to understand why it appears, but I don't.

If it's not a bug, maybe I should post this to stackoverflow?

mehmetnyarar on 24 Sep 2019

That message is unrelated if you've modified your next.config.js to remove ForkTsCheckerWebpackPlugin -- Next.js isn't performing any type checking.

The message still appearing is just a side effect of you tweaking the Next.js configuration to remove a plugin it expects.

I'll close this issue since it cannot be reproduced without your project.

Timer on 24 Sep 2019

👍1

I'm also experiencing the slow development.
when I edit a common file and refresh my site, It takes about 7~8 seconds.
after some debugging, I found most time is consumed in load-components.js
the two require code takes very long time (my-page.js and _app.js)

FYI, I also use packages like typescript, styled-components, react-i18next...

landvibe on 15 Nov 2019

@landvibe you can try setting { typescript: { ingoreDevErrors: true } } in your next.config.js. Details are in this README section: https://github.com/zeit/next.js#typescript

kachkaev on 15 Nov 2019

👍1

@kachkaev thanks it decreases the time a little. but it still takes more than 7 seconds

landvibe on 15 Nov 2019

I found allowJs: true in tsconfig.json makes my project very slow.
After I set it false, It takes less than 1 second.

landvibe on 16 Nov 2019

👍9

@landvibe but nextjs seems to re-add this property the next time you start the project...

macrozone on 22 Nov 2019

@macrozone I think nextjs only adds it on initial start, and it does not re-add

landvibe on 23 Nov 2019

If you _delete_ the property Next.js will re-add it. You need to explicitly set it to false if you don't want it set to true.

Timer on 23 Nov 2019

👍8

tsconfig skipLibCheck: true works for me.

AliasT on 12 Apr 2020

@AliasT try this new option as well: https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors

kachkaev on 13 Apr 2020

🚀1

@AliasT try this new option as well: https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors

I've been struggling with this issue for months, this seemed to solve my issue though. Now the compile time seems about the same as it would be with CRA.

blomqma on 17 Apr 2020

👍1

@kachkaev

ignoreBuildErrors is amazing.... seriously, my wait time when I run next dev went down from ~30s to 10s, and tests are running in 5s instead of 40s....

that should be activated by default for test and dev.

Thanks a lot!

Journerist on 14 Jun 2020

that should be activated by default for test and dev.

ignoreBuildErrors is only related to production builds. Can you try using next@canary, we recently made some improvements in running typescript checks, it's significantly faster than it was before.

Type checking is disabled in development in the latest Next.js version btw (as we tracked down some massive slowdowns in the solution used to do type checking), compilation takes the same time for typescript and javascript since that change.

timneutkens on 14 Jun 2020

👍2

next@canary

next@canary is sooooo much faster

coolgk on 18 Jun 2020

👀1 👍1

have to switch back to the stable version :( the canary version has problems with rendering by testing-library/react

this.props.headManager.mountedInstances.add(this); mountedInstances is undefined

coolgk on 21 Jun 2020

@coolgk this should be resolved in the latest canary of Next.js v9.4.5-canary.18

ijjk on 23 Jun 2020

👍1

Type checking is disabled in development in the latest Next.js version btw (as we tracked down some massive slowdowns in the solution used to do type checking), compilation takes the same time for typescript and javascript since that change.

Can you point out how to enable back type checking? I've tried adding back the fork-ts-checker-webpack-plugin plugin but no dice. It's pretty misleading to say that Next.js has built-in support for TypeScript but only run typechecks on build...
I only figured it out when I saw the typescript example had a typecheck npm command.