Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
georgyfarniev opened this issue Oct 10, 2019 · 94 comments · Fixed by #464
Closed

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

georgyfarniev opened this issue Oct 10, 2019 · 94 comments · Fixed by #464
Labels
bug Something isn't working build The issue or pull request is related to `build` package help wanted Extra attention is needed wontfix This will not be worked on

Comments

@georgyfarniev
Copy link

georgyfarniev commented Oct 10, 2019

Describe the bug
When I run nuxt app using nuxt-ts in hoisted lerna monorepo, it causes weird behavior: when I open serve address, see 5 continuous reloads and this message:
image

To Reproduce
Steps to reproduce the behavior:

  1. Clone repository https://github.com/georgyfarniev/nuxt_lerna_repro
  2. Run npm i && npm run bootstrap
  3. Run cd repro && npm run dev
  4. Open localhost:7005
  5. See error described above

Expected behavior
Working correctly with hoisted lerna monorepo.

Additional context
Reproducible in both Windows 10 and Node 12, as well as Arch Linux with Node 12.
Please pay attention to lerna.json, as hoisted mode are enabled there.

Also, it's probably nuxt-ts issue, because everything works well with plain nuxt

This bug is a critical blocker for us, since we cannot use our applications written in nuxt+typescript using our lerna setup which is vital for us, so I will keep monitoring this issue and I'm ready to provide any possible assistance with fixing it.

@georgyfarniev georgyfarniev changed the title using nuxt-ts in hoisted monorepo causes dead loop [BLOCKER!] using nuxt-ts in hoisted monorepo causes dead loop Oct 10, 2019
@georgyfarniev georgyfarniev changed the title [BLOCKER!] using nuxt-ts in hoisted monorepo causes dead loop using nuxt-ts in hoisted monorepo causes dead loop Oct 10, 2019
@kevinmarrec
Copy link
Contributor

kevinmarrec commented Oct 10, 2019

@georgyfarniev Couldn't reproduce it with your steps.
Worth mentionning I did npm i inside repro repository before runing npm run dev.

So it means this is something to do with your lerna setup then ? (if it's supposed to download repro dependencies with the bootstrap command)

@kevinmarrec
Copy link
Contributor

image

@georgyfarniev
Copy link
Author

@kevinmarrec you have to do npm install and npm run bootstrap only in root of repository, not in repro dir. It is enabling learna hoisting. Then go to repro dir and execute npm run dev.

@georgyfarniev
Copy link
Author

georgyfarniev commented Oct 10, 2019

@kevinmarrec yes, it reproducible only in hoisted lerna monorepository. I will try yo downgrade nuxt and nuxt typescript tomorrow to find out where regression was introduced and I will try to pin point into change that causes it unless you do it before me. It’s night here, in Indonesia.

Spent all day debugging it being sure it weird dependency collisions in our big monorepo, as it happened before with webpack, babel and similar stuff 😁

@kevinmarrec
Copy link
Contributor

Also, it's probably nuxt-ts issue, because everything works well with plain nuxt

Couldn't make it work with nuxt (i.e. without TypeScript), sounds more likely a more globally bug, not TypeScript one.

@kevinmarrec
Copy link
Contributor

kevinmarrec commented Oct 10, 2019

@georgyfarniev Please have a look at :
nuxt/nuxt#6173

@georgyfarniev
Copy link
Author

georgyfarniev commented Oct 10, 2019

Also, it's probably nuxt-ts issue, because everything works well with plain nuxt

Couldn't make it work with nuxt (i.e. without TypeScript), sounds more likely a more globally bug, not TypeScript one.

I will double check my claim later, maybe I missed something out because my mind was messed up by end of the day after hardcore debugging session 😁. Thanks for Very quick reply to this issue. Strong,y appreciate it.

P. S checking your link

@georgyfarniev
Copy link
Author

@kevinmarrec I cannot reproduce issue with plain js version of nuxt, and advice to update enhanced-resolve didn't worked for me. I pushed update into repo in issue description that demonstrates it. Please pull, delete all node_modules and do npm i && npm run bootstrap && cd reprojs && npm run dev (all starting from repo root). I just double checked it and js use-case worked well for me, ts - not. Looks similar but probably different issue, unless I lost my sanity debugging frontend build toolchain :D

@kevinmarrec
Copy link
Contributor

@georgyfarniev Indeed it works for reprojs but then I did :

  1. Replace reprojs by repro in lerna.json
  2. npm run bootstrap
  3. cd repro
  4. npm run dev

And it works with TypeScript one

@kevinmarrec
Copy link
Contributor

Well it seems to be random OR I don't understand, probably something about node_modules caches, now it doesn't work anymore.

The issue is that I don't really know how to debug it...

@georgyfarniev
Copy link
Author

@kevinmarrec i would try with older version of nuxt-ts and nuxt to see if it will fail also. Then do “binary search” strategy between two git revisions where it work and where it doesn’t work.

@kevinmarrec
Copy link
Contributor

@georgyfarniev Did it ever use to work with nuxt-ts ?

@georgyfarniev
Copy link
Author

georgyfarniev commented Oct 10, 2019

@kevinmarrec it worked before. I forgot to mention that it broke up when we updated package-lock.json.

Makes sense to downgrade nuxt-ts in provided example and see if it will work.

Another approach is to simply find out how to get more verbose information from nuxt than it provides in image above. It’s question to nuxt developers probably.

It’s definitely not a dependency collision, because monorepo in example has only one module inside. Probably something won’t getting resolved in hoisted setup.

@georgyfarniev
Copy link
Author

georgyfarniev commented Oct 11, 2019

@kevinmarrec interesting fact, I did following:

  1. Removed @nuxt/typescript-build from buildModules
  2. Removed @nuxt/typescript-build from package.json inside repro directory
  3. Deleted all node_modules and executed npm i && npm run bootstrap (it's important to delete node_modules in this step!)
  4. Started npm run dev innside repro dir, and whoops, everything works!

But it only works if I also delete node_modules and delete @nuxt/typescript-build from package.json as well. Any ideas?

UPD1: So removing @nuxt/typescript-build from packages fixes issue, but simple deleting it (rm -rf node_modules/@nuxt/typescript-build) doesn't help. What could that mean? Obviously, it's not @nuxt/typescript-build causes issue, but it's dependencies. So I coped it's dependencies to my package.json and bootstrapped with them and without @nuxt/typescript-build, and surprisingly, it worked for me. What a mystery! I triple checked it

@georgyfarniev
Copy link
Author

@kevinmarrec also it works fine in production mode, only dev server have this dead loop

@ghost
Copy link

ghost commented Oct 11, 2019

Using the repro steps I was able to see this issue. Here's a GIF of development, noting there are no errors in the console.

repro

@kevinmarrec Interested in hearing what debugging approaches might work best to tackle an issue like this given there are no errors. Should I set-up a debugging environment in an IDE and get a debugger in Node?

@kevinmarrec
Copy link
Contributor

@georgyfarniev Really weird, you can confirm that just removing the TypeScript module from nuxt.config doesn't fix the problem ? That you need to remove all the dependencies ?

May be related to TypeScript version shipped by @nuxt/typescript-build ?

@jhabdas Well, I succeeded to reproduce on my computer as well but looks like some magic random bug hard to debug x). I think it's something to do with @nuxt/loading-screen somehow, cause I don't really have clues what's doing the refresh of the page unless this Nuxt feature :/

@kevinmarrec
Copy link
Contributor

kevinmarrec commented Oct 11, 2019

But overall I'd say it's npm dependencies crazy hell, could you try Lerna with yarn worskspaces to see if it's reproducible as well ?

@georgyfarniev
Copy link
Author

@kevinmarrec,

Really weird, you can confirm that just removing the TypeScript module from nuxt.config doesn't fix the problem ? That you need to remove all the dependencies ?

Yes. I tried to simply remove it from nuxt.config, but it has no effect, instead I have to even remove it from package.json and purge node_modules and reinstall (npm i && npm run bootstrap). I even modified installed module with console message to ensure that it aren't called, and I confirmed that this module has nothing to do in runtime.

But overall I'd say it's npm dependencies crazy hell, could you try Lerna with yarn worskspaces to see if it's reproducible as well ?

Good idea, I will try it later. But we cannot use yarn instead of npm, because so many things will break up accidentally (tried). We have very big monorepo so far. I rather spend time to migrate on pnpm, but problem with webpack loaders resolution blocks me.

Yes, npm dependencies is real hell and I spend a lot of time to fix related issues instead of being productive, because some people use a lot of small packages as left-pad or isobject. That's why we started to create something like standard library for NodeJS (WIP).

Can you please try to investigate further to fix this bug? I will try to reproduce it with yarn and help you as much as possible. But you know internals much better than me and I have close deadline now :(

@kevinmarrec
Copy link
Contributor

Thanks for the infos

Can you please try to investigate further to fix this bug? I will try to reproduce it with yarn and help you as much as possible. But you know internals much better than me and I have close deadline now :(

Well, if you have close deadline, consider asking your company (if it's a company project) to pay a Nuxt consulting (https://otechie.com/nuxt). It seems a bug that needs hours to debug and really specific to your company needs (npm hoist) and there are (probably) existing solutions like yarn workspaces. So I think it sounds relevant to get consulting for that.

@kevinmarrec
Copy link
Contributor

FYI: Even if I'm more likely the TypeScript guy, the issue doesn't sound really tied to it, so any core team member could be able to give some help through consulting.

@kevinmarrec
Copy link
Contributor

Still I'll try to dive into it again when I've some time, can't promise any fix soon, as I said it sounds really hard to debug :/

@georgyfarniev
Copy link
Author

FYI: Even if I'm more likely the TypeScript guy, the issue doesn't sound really tied to it, so any core team member could be able to give some help through consulting.

It might not be related with typescript, but related to module from this repository, that's why I submitted it here.

@georgyfarniev
Copy link
Author

Thanks for the infos

Can you please try to investigate further to fix this bug? I will try to reproduce it with yarn and help you as much as possible. But you know internals much better than me and I have close deadline now :(

Well, if you have close deadline, consider asking your company (if it's a company project) to pay a Nuxt consulting (https://otechie.com/nuxt). It seems a bug that needs hours to debug and really specific to your company needs (npm hoist) and there are (probably) existing solutions like yarn workspaces. So I think it sounds relevant to get consulting for that.

By deadline I mean that I lack of time for investigation , not that it directly related to nuxt. But good to know about that service, thanks.

I will try to investigate bug tomorrow morning,it makes me very curious after all. I will try to get more debug output from nuxt. I would like to understand why it happens.

@georgyfarniev
Copy link
Author

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

@shalldie
Copy link

I met this too.

I use typescript + nuxt-property-decorator + nuxt@2.10 + ts-node + koa.

It works well on production after build, but has wrong with development mode. 😿😿

I've tried several days, waiting for your response.

@kevinmarrec
Copy link
Contributor

kevinmarrec commented Oct 23, 2019

@georgyfarniev Nice, I still think it's even deeper and tied to nested dependency of ts-loader, keep it up, you're getting closer 😁

@georgyfarniev
Copy link
Author

@kevinmarrec it's enhanced-resolve. If I replace ts-loader with it, it broke build in same way. Keep going.

@kevinmarrec
Copy link
Contributor

nuxt/nuxt#6173 (comment) ^^
#145 (comment)

Dunno

@kevinmarrec kevinmarrec added the build The issue or pull request is related to `build` package label Oct 23, 2019
@georgyfarniev
Copy link
Author

@kevinmarrec the most interesting thing is that I have same version of enhanced-resolve in both cases (with only nuxt dependency and with @nuxt/typescript-build). It’s latest version. I will try downgrading it.

@ChrisKader
Copy link

Hello all, I found exact package that causes this problem: it's ts-loader. BUT, it broke build ONLY if it is a dependency of a dependency, e.g., if we will add ts-loader directly, it will not break build, but if it is part of @nuxt/typescript-build, then it breaks it.

I took sources of @nuxt/typescript-build, and disassembled it piece by piece until I was left with only package.json file with ts-loader as dependency. I even tried to rename @nuxt/typescript-build to other name, no result.

I hope this information was useful, keeping working on it.

I said the same thing and was told I was incorrect.

@georgyfarniev
Copy link
Author

georgyfarniev commented Oct 24, 2019

@ChrisKader, I apologize for telling that you was incorrect, because your solution doesn't work in our case, but our issue was caused by same module.

Updating to latest enhanced-resolve doesn't help at all. And another weird fact: when I replace @nuxt/typescript-build with enhanced-resolve of latest stable version (4.1.1), it breaks build also. But when I install it from master it works, until I add @nuxt/typescript-build as dep :)

See detailed examples here (each section represents dependencies):

Works (enhanced-resolve removed one of it's deps (memory-fs) in this version, but should not be relevant, since it already presented):

 "enhanced-resolve": "webpack/enhanced-resolve#master",
 "nuxt": "^2.10.1"

Doesn't work (enhanced-resolve from github repo mixed with @nuxt/typescript-build):

 "@nuxt/typescript-build": "^0.3.2",
 "enhanced-resolve": "webpack/enhanced-resolve#master",
 "nuxt": "^2.10.1"

Doesn't work (latest stable version):

 "enhanced-resolve": "^4.1.1",
 "nuxt": "^2.10.1"

Also, for second example, I just checked that version of enhanced-resolve that actually ends up in node_modules are same as in current master. e.g. 5.0.0-beta.3

@michalzaq12
Copy link

Also works

"dependencies": {
   "nuxt": "^2.10.2",
},
"devDependencies": {
   "@nuxt/typescript-build": "^0.3.2"
}

@kevinmarrec
Copy link
Contributor

kevinmarrec commented Dec 8, 2019

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 :

@georgyfarniev
Copy link
Author

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

@haexhub
Copy link

haexhub commented Jun 22, 2020

Hi,
is there any progress with this issue, cause I'm running in a similar problem. I tried to get nuxtjs working with adonisjs and I'm stucked in a build loop. (tried on Windows 10 and Manjaro)

I made a simple repo.

Can someone confirm this issue?

@pi0
Copy link
Member

pi0 commented Jun 26, 2020

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
Copy link
Contributor

Is there anyone that can confirm something has been indeed fixed around this ?

@lights0123
Copy link

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.

@frankier
Copy link

I had the same problem as @lights0123 with yarn.

@ebeloded
Copy link

@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'),
        },
      },
    ],
]

@moltar
Copy link

moltar commented Oct 19, 2020

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.

@IGassmann
Copy link
Contributor

IGassmann commented Nov 25, 2020

For people encountering @lights0123 issue on Yarn, I've fixed in the following way:

  1. Add fork-ts-checker-webpack-plugin as a dev dependency into your Nuxt project's package.json.
  2. Edit your root package.json as follow:
-  "workspaces": [
-    "packages/*"
-  ],
+  "workspaces": {
+    "packages": ["packages/*"],
+    "nohoist": [
+      "**/fork-ts-checker-webpack-plugin",
+      "**/fork-ts-checker-webpack-plugin/**"
+    ]
+  },
  1. Delete root node_modules directory.
  2. Run yarn
  3. Run your Nuxt project.

@mikedidomizio
Copy link

I encountered this error and the fix for me was:
yarn add typescript fork-ts-checker-webpack-plugin -D

Nothing above seemed to work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working build The issue or pull request is related to `build` package help wanted Extra attention is needed wontfix This will not be worked on
Projects
None yet
Development

Successfully merging a pull request may close this issue.