typescript: using @nuxt/typescript-build causes dead loop (npm only)

@frankier @lights0123

I had the same issue (ERROR When you use this plugin you must install typescript). Was able to resolve it in nuxt.config:

[
      '@nuxt/typescript-build',
      {
        typeCheck: {
          typescript: require.resolve('typescript'),
        },
      },
    ],
]

I get this error:

 ERROR  When you use this plugin you must install typescript.                                                        19:01:42

  at ForkTsCheckerWebpackPlugin.validateTypeScript (/project/node_modules/fork-ts-checker-webpack-plugin/src/index.ts:250:13)
  at new ForkTsCheckerWebpackPlugin (/workspace/node_modules/fork-ts-checker-webpack-plugin/src/index.ts:197:14)
  at WebpackBundler.<anonymous> (/workspace/node_modules/@nuxt/typescript-build/src/index.ts:77:28)
  at WebpackBundler.<anonymous> (/workspace/node_modules/@nuxt/utils/dist/utils.js:1875:29)
  at WebpackClientConfig.extendConfig (/workspace/node_modules/@nuxt/webpack/dist/webpack.js:4884:37)
  at WebpackClientConfig.config (/workspace/node_modules/@nuxt/webpack/dist/webpack.js:4919:45)
  at WebpackClientConfig.config (/workspace/node_modules/@nuxt/webpack/dist/webpack.js:5083:26)
  at WebpackBundler.getWebpackConfig (/workspace/node_modules/@nuxt/webpack/dist/webpack.js:5391:19)
  at WebpackBundler.build (/workspace/node_modules/@nuxt/webpack/dist/webpack.js:5398:12)
  at Builder.build (/workspace/node_modules/@nuxt/builder/dist/builder.js:5643:30)
  at Object._buildDev (/workspace/node_modules/@nuxt/cli/dist/cli-dev.js:106:5)
  at Object.startDev (/workspace/node_modules/@nuxt/cli/dist/cli-dev.js:64:7)
  at Object.run (/workspace/node_modules/@nuxt/cli/dist/cli-dev.js:51:5)
  at NuxtCommand.run (/workspace/node_modules/@nuxt/cli/dist/cli-index.js:2809:7)

I’m using a yarn workspace. The error occurs in the catch statement:

const typescriptPath = options.typescript || require.resolve('typescript');
const tsconfig = options.tsconfig || './tsconfig.json';
const compilerOptions = typeof options.compilerOptions === 'object'
    ? options.compilerOptions
    : {};
let typescript, typescriptVersion;
try {
    typescript = require(typescriptPath);
    typescriptVersion = typescript.version;
}
catch (_ignored) {
    throw new Error('When you use this plugin you must install `typescript`.');
}

The variable typescriptPath is equal to:

{
  configFile: '/workspace/project/tsconfig.json',
  extensions: {
    vue: true
  }
}

The following change makes the build succeed:

- const typescriptPath = options.typescript || require.resolve('typescript');
+ const typescriptPath = require.resolve('typescript');

so this module seems to be passing an object when a string is expected. However, that seems to be because the version of fork-ts-checker-webpack-plugin that yarn decided to install was version 3, even though this project asks for v5 (it installs a separate package, fork-ts-checker-webpack-plugin-v5, that does not exist on npm). This is because I had a vue-cli app in another package, which uses v3. Adding fork-ts-checker-webpack-plugin as a dev dependency to my package fixed the issue.

As this issue is really high edge case and that this module is not responsible of any dependency resolution issue, this is unfortunately not something we can fix, sorry.

Workarounds :

• Not using hoisting
• Try to force the dependencies to resolve the right versions with package.json configuration (https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)

Hi guys.

However this (seems) was an issue with webpack-dev-middleware, i apologizes for this issue. Thanks to the works of @crutch12 and @simplesmiler this should be fixed with v2.13.2 ❤️ Keeping issue open until can confirm it is gone.

@kevinmarrec @shalldie @arkhamvm @jhabdas:

I spend half of day debugging this issue, and I found that it actually a blocker for dev mode. Here is a repro: https://github.com/georgyfarniev/nuxt-typescript-deadloop (typescript branch). I made cleanest repository for reproduction possible, without using 3rd party server or anything else.

Steps to reproduce:

1. Clone repo above, use typescript branch for ts repro example, or master for plain nuxt
2. Execute npm i && npm run dev
3. Open address (localhost:3000)
4. Observe infinite loop bug, same as in OP

I can’t find exact issue, but here is a facts:

1. Following steps of @shalldie (in my case, npm run purge && npm i -S nuxt && npm i -S @nuxt/typescript-build && npm i fixes the problem. Extremely weird.
2. With yarn, everything works fine
3. Presence of @nuxt/typescript-build module breaks even JS version of nuxt, check out repo above in master branch, follow instruction above for master branch also.
4. Everything works fine in production mode, only in dev mode it fails.
5. Either deleting of node_modules/@nuxt/typescript-build or installing dependencies of it’s package.json without @nuxt/typescript-build doesn’t reproduces issue alone.
6. I explored source code of @nuxt/typescript-build and I didn’t find anything suspicious
7. When I did regular install (that reproduces error), added node_modules to git, then did steps described by @shalldie to “fix” it, I saw diff in node_modules about 200K lines long. This is about how undeterministic npm can be.
8. This bug is seems unrelated to lerna, it happens even with standalone package.

So I think it should be considered a blocker and should have appropriate priority. Unfortunately, we cannot use yarn as workaround, because it breaks other packages, and npm are official package manager, so it should work. Thankfully, it works (at least now) with lerna nohoist in our very specific case. It can be an npm bug as well I presume. The further investigation are beyond limits of my mind and time bandwidth.

I’m not sure if it should be duplicated to nuxtjs repo or not, I just provided you all available information and I hope it will help to solve issue.

I’m still getting the same screen as OP.

I’m on:

    "@nuxt/typescript-runtime": "2.0.0",
    "nuxt": "2.14.7",
    "vue": "2.6.12",
    "@nuxt/types": "2.14.7",
    "@nuxt/typescript-build": "2.0.3",
    "fork-ts-checker-webpack-plugin": "5.2.0",
    "typescript": "4.0.3",

I’d love to help figuring this out. But I am not seeing any useful output anywhere.

Nothing in the console. Nothing useful when running with DEBUG=*.

If you can give me some pointers as to where to look for the root cause, I might be able to resolve this.

Thanks.

@kevinmarrec, but it doesn’t work even in unhoisted environments (without lerna). And it’s unclear how to solve it by specifying exact version. This is probably most typical use case for this module. Anyway, I fixed all my problems by migrating back to vue cli from nuxt and totally removing it from my project, especially because how such issues “resolved”.

@arkhamvm @shalldie @kevinmarrec: temporary workaround for this thing, add the following into lerna.json:

 "command": {
    "bootstrap": {
      "hoist": true,
      "nohoist": [
        "@nuxt/typescript-build"
      ]
    }
  }
}

Don’t forget to purge all node_modules and install && bootstrap from scratch, otherwise it may fail to work.

Update: trying to patch @nuxt/loading-screen in order to get more useful debug information. Will keep you updated about progress.