Slow development with TypeScript

[mehmetnyarar]

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"
}

[Timer]

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

[mehmetnyarar]

@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?

[Timer]

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.

[landvibe]

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...

[kachkaev]

@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

[landvibe]

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

[landvibe]

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

[macrozone]

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

[landvibe]

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

[Timer]

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.

[AliasT]

tsconfig skipLibCheck: true works for me.

[kachkaev]

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

[blomqma]

@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.

[sesigl]

@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!

[timneutkens]

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.

[coolgk]

next@canary

next@canary is sooooo much faster

[coolgk]

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

[ijjk]

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

[Keats]

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.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.