Slow development with TypeScript

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

[landvibe]

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

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