Slow development with TypeScript #8841

mehmetnyarar · 2019-09-24T19:13:04Z

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

The text was updated successfully, but these errors were encountered:

Timer · 2019-09-24T20:04:28Z

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 · 2019-09-24T20:36:08Z

@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 · 2019-09-24T20:41:41Z

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 · 2019-11-15T04:58:03Z

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 · 2019-11-15T15:43:03Z

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

landvibe · 2019-11-16T14:06:29Z

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

macrozone · 2019-11-22T13:07:27Z

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

landvibe · 2019-11-23T15:02:24Z

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

Timer · 2019-11-23T19:37:27Z

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 · 2020-04-12T14:02:57Z

tsconfig skipLibCheck: true works for me.

kachkaev · 2020-04-13T11:03:50Z

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

blomqma · 2020-04-17T08:49:13Z

@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 · 2020-06-14T10:45:26Z

@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 · 2020-06-14T11:28:11Z

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 · 2020-06-17T23:11:44Z

next@canary

next@canary is sooooo much faster

coolgk · 2020-06-21T20:57:02Z

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 · 2020-06-23T21:24:46Z

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

Keats · 2020-06-30T10:24:48Z

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 · 2022-01-28T09:05:16Z

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.

Timer closed this as completed Sep 24, 2019

This comment has been minimized.

Sign in to view

timneutkens mentioned this issue Jun 21, 2020

next/head causes issue when rendered outside of Next.js #14425

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slow development with TypeScript #8841

Slow development with TypeScript #8841

mehmetnyarar commented Sep 24, 2019

Timer commented Sep 24, 2019

mehmetnyarar commented Sep 24, 2019

Timer commented Sep 24, 2019

landvibe commented Nov 15, 2019

This comment has been minimized.

landvibe commented Nov 15, 2019

landvibe commented Nov 16, 2019

macrozone commented Nov 22, 2019

landvibe commented Nov 23, 2019

Timer commented Nov 23, 2019

AliasT commented Apr 12, 2020

kachkaev commented Apr 13, 2020

blomqma commented Apr 17, 2020

sesigl commented Jun 14, 2020

timneutkens commented Jun 14, 2020

coolgk commented Jun 17, 2020

coolgk commented Jun 21, 2020

ijjk commented Jun 23, 2020

Keats commented Jun 30, 2020

balazsorban44 commented Jan 28, 2022

Slow development with TypeScript #8841

Slow development with TypeScript #8841

Comments

mehmetnyarar commented Sep 24, 2019

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

Timer commented Sep 24, 2019

mehmetnyarar commented Sep 24, 2019

Timer commented Sep 24, 2019

landvibe commented Nov 15, 2019

This comment has been minimized.

landvibe commented Nov 15, 2019

landvibe commented Nov 16, 2019

macrozone commented Nov 22, 2019

landvibe commented Nov 23, 2019

Timer commented Nov 23, 2019

AliasT commented Apr 12, 2020

kachkaev commented Apr 13, 2020

blomqma commented Apr 17, 2020

sesigl commented Jun 14, 2020

timneutkens commented Jun 14, 2020

coolgk commented Jun 17, 2020

coolgk commented Jun 21, 2020

ijjk commented Jun 23, 2020

Keats commented Jun 30, 2020

balazsorban44 commented Jan 28, 2022