nuxt: IDE types are broken after upgrade to 3.6.0 when using Docker (and WSL Webstorm)

Environment

Operating System: Linux
Node Version: v18.16.1
Nuxt Version: 3.6.1
Nitro Version: 2.5.1
Package Manager: yarn@3.6.0
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

https://github.com/daniluk4000/nuxt-3.4.2-docker-error

Run docker-compose up
Open app.vue with IDE and look at the imports
Run sudo yarn dev (as Docker probably broke file system perms if you are not Mac user)
Look at the fixed imports (using VS Code or non-WSL Webstorm)

Describe the bug

Before Nuxt 3.5.3 update tsconfig paths were generated relatively to current directory

But after Nuxt 3.6.0 update it now has absolute paths

And breaks IDE as Docker has different folder names inside of it:

Additional context

This also breaks Webstorm when using with WSL, it can’t resolve imports as well even without using docker for me.

It would be so good, if this was made for some reason, to optionally opt-out and use relative paths.

Logs

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 20
Comments: 25 (17 by maintainers)

Commits related to this issue

Upgrade deps, add https://github.com/nuxt/nuxt/issues/21827 issue — committed to daniluk4000/nuxt-3.4.2-docker-error by daniluk4000 a year ago

Most upvoted comments

Sollution offered by @JoakimFFCG requires many manual actions and can become broken with every Nuxt/random plugin update.

Therefore I’ve made my own small plugin for restoring relative paths in dev mode: https://www.npmjs.com/package/nuxt-tsconfig-relative-paths

Please enjoy, report any bugs and feel free to use it as workaround (until Nuxt Team fixes this).

daniluk4000 on Jul 6, 2023

Sollution offered by @JoakimFFCG requires many manual actions and can become broken with every Nuxt/random plugin update.

Therefore I’ve made my own small plugin for restoring relative paths in dev mode: https://www.npmjs.com/package/nuxt-tsconfig-relative-paths

Please enjoy, report any bugs and feel free to use it as workaround (until Nuxt Team fixes this).

Thanks @daniluk4000 for the module! That fixed it for now but would be happy if the Nuxt team could fix it in Nuxt directly.

hermanndettmann on Jul 20, 2023

I have the same problem, failed to update, rolled back to 3.5.3

Blacknife on Jul 1, 2023

We are having the same problem. Does anybody have a workaround?

szhorvath on Jul 1, 2023

@daniluk4000 Hi! Thanks for your plugin. It works but as you said only in dev mode. We use a project with a layer in subfolder for local development and before nuxt dev we run nuxt prepare for that layer. The plugin does not work in this case because of the dev check. Do you have any concerns about removing this check?
if (!nuxt.options.dev) {
  return;
}
I tried your solution without it. And everything seems to work as expected. Building with typecheck works without type errors.

Seems like I didn’t think about prepare command. Will deploy a fix later today 😃

daniluk4000 on Jul 7, 2023

We are having the same problem. Does anybody have a workaround?

Didn’t find any, had to rollback as well.

daniluk4000 on Jul 1, 2023

I have the same problem, failed to update, rolled back to 3.5.3

Same issue, bro.

ornis1 on Jul 1, 2023

This also breaks the auto-imports in vscode, as it suggests incorrect paths, for example import { Foo } from 'enums/foo' instead of the correct import { Foo } from '~/enums/foo'.
For just TypeScript Types/Interfaces, this doesn’t have any impact, but any other import will result in an Failed to resolve import "enums/foo" from "components\Bar.vue" error in build and dev mode.

invalidoperation on Jul 20, 2023