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

[georgyfarniev]

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:

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.

[kevinmarrec]

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

[georgyfarniev]

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

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

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]

@georgyfarniev Please have a look at : https://github.com/nuxt/nuxt.js/issues/6173

[georgyfarniev]

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]

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

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

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]

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

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

[georgyfarniev]

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

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

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

[ghost]

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.

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

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

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]

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

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]

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]

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]

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]

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]

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

[shalldie]

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.

[shalldie]

@georgyfarniev

Oh, i got it in my project.

 The `order` of the deps which matters!

I solve it by thease steps:

1. rm -rf node_modules, rm package-lock.json
2. npm i nuxt --save , nuxt must install first!
3. npm i @nuxt/typescript-build @nuxt/typescript-runtime --save, another modules install.
4. npm i , other modules should be installed at last......

lerna bootstrap seems hard to handle the order of deps, Hope to help you. 😂😂

[shalldie]

Other thing is that,

additionalExtensions: ['ts'] should be add into nuxt.config.ts's build, without which, it only works well in production after build, failed in development mode.

.ts file can't be found in store directory in 'development'.

You can see it at : https://github.com/nuxt/nuxt.js/blob/92c7f4ed249466870a477798f910c84eb1fdd18d/packages/builder/src/builder.js#L47

[kevinmarrec]

@shalldie additionalExtensions handle store/middleware/plugins TS files, it's later compiled to javascript in final bundles, so no need it in production

[shalldie]

@kevinmarrec OK In my case , i use nuxt with koa + ts-node, it's needed in development.

[arkhamvm]

Still failed after 5 reloads, after adding additionalExtensions: ['ts']. I use .ts for stores and middlewares. How i can get/produce more debug info?

[kevinmarrec]

I don't have any experience using Nuxt programmatic usage (koa, express, ...) and can't really spend lot of time trying to know all the aspects that could make things buggy. As Best practices Nuxt core team recommend to use a separated standalone app with https://github.com/nuxt-community/proxy-module.

Still, this issue isn't related to programmatic usage.

[arkhamvm]

@kevinmarrec i have this problem using proxy-module, if it matters

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
],
axios: {
    proxy: true,
},
proxy: {
    '/fake-api/': {target: baseUrl, pathRewrite: {'^/fake-api/': '/api-fake/'}},
},

[shalldie]

@arkhamvm @kevinmarrec @georgyfarniev

I tried another project just now , it really works for me.

It seems that the order of deps that matters.

Here is how i solve the failed after 5 reloads: https://github.com/nuxt/typescript/issues/145#issuecomment-542366859

[georgyfarniev]

@shalldie it's really weird. wonder how can it affect nuxt... I haven't much time on debugging, but I found that in case of this bug nuxt just trying to reload repeatedly, but build are passing without error. Still need some more time to find out. I hope nuxt team can help us, at least with advice how to debug it properly.

[arkhamvm]

At least, is there a option for downgrade to working version?

[georgyfarniev]

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

[arkhamvm]

@georgyfarniev Sorry, i dont use lerna/hoist, just have the same error =(

[georgyfarniev]

@shalldie if you execute npm i inside actual package, then lerna hoisting doesn't make sense.

[georgyfarniev]

@georgyfarniev Sorry, i dont use lerna/hoist, just have the same error =(

That's interesting. Can you please provide minimal reproduction? For me it fails only with lerna. Did you tried to purge node_modules and package-lock.json?

[shalldie]

@georgyfarniev

I just met the same error failed after 5 reloads too，i don't use lerna。

[georgyfarniev]

@georgyfarniev

I just met the same error failed after 5 reloads too，i don't use lerna。

Please provide minimal reproduction repository. It will help us to find issue faster and fix it for users.

In my case, it's reproducible only with lerna, tried and retried million times :)

[shalldie]

@georgyfarniev Okay, after work tonight.

[shalldie]

@georgyfarniev @kevinmarrec

I open a new issue about Programmatic mode, Failed to show Nuxt.js app after 5 reloads: https://github.com/nuxt/typescript/issues/152

There's a repository with two branches to show how i get the error, and the way works for me to fix it.

[arkhamvm]

@shalldie Yours order of install really fix the problem, I'm completely bewildered, I never thought about the order in which npm packages were installed.

[georgyfarniev]

@shalldie usage with custom server are not recommended as mentioned by @kevinmarrec. However, nuxt exposes API for this purpose and therefore supports this. Also your case can be useful to debug my initial problem, as it may have same reason. I will take a look on your example.

[georgyfarniev]

@shalldie I confirmed that it works when I follow your instruction. That's extremely weird, it doesn't even changes package.json, only package-lock.json. Weirdest bug I ever seen in my life. I do not give any promises, but I will try spend more time on debugging it this weekend.

First, I will try to build it without nodemon and ts-node and run. I think problem is related to nodemon or tsnode, but I have no idea how installation order may affect it. I need to look at the part that are responsible for sending reload push request to client. Everything seems clear on client side, so I suspect it dev server related issue, 99% sure.

UPDATE: even without nodemon and ts-node it fails to reload, I just tried to start built application.

[georgyfarniev]

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

[kevinmarrec]

Thanks @georgyfarniev for the hard efforts and your time, I'm gonna ask help to other core team members about what can be the possible reason why it wouldn't wort with npm but works with yarn.

One of the hardest-to-debug bugs I've ever seen with Nuxt though 😱

[georgyfarniev]

@kevinmarrec thanks for reply. Let me know if I can help. I asked NPM guys, because same repro works well with yarn, so maybe npm bug as well: https://npm.community/t/weird-bug-with-npm-and-nuxt-js/10580