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

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

Closed
daniluk4000 opened this issue Jun 27, 2023 · 25 comments · Fixed by #22410 or #22633
Closed

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

daniluk4000 opened this issue Jun 27, 2023 · 25 comments · Fixed by #22410 or #22633

Comments

@daniluk4000
Copy link
Contributor

daniluk4000 commented Jun 27, 2023

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

  1. Run docker-compose up
  2. Open app.vue with IDE and look at the imports
  3. Run sudo yarn dev (as Docker probably broke file system perms if you are not Mac user)
  4. 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

image

But after Nuxt 3.6.0 update it now has absolute paths

image

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

image

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

@danielroe danielroe added the types label Jun 27, 2023 — with Volta.net
daniluk4000 added a commit to daniluk4000/nuxt-3.4.2-docker-error that referenced this issue Jun 27, 2023
@szhorvath
Copy link

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

@Blacknife
Copy link

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

@ornis1
Copy link

ornis1 commented Jul 1, 2023

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

Same issue, bro.

@daniluk4000
Copy link
Contributor Author

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

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

@JoakimFFCG
Copy link

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

Add a tsconfig.json file in your project root directory. If you extend .nuxt/tsconfig.json and override the path options with relative paths it should work like before 3.6.0:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "~~": [
        "."
      ],
      "~~/*": [
        "./*"
      ],
      "@@": [
        "."
      ],
      "@@/*": [
        "./*"
      ],
      "assets": [
        "./assets"
      ],
      "assets/*": [
        "./assets/*"
      ],
      "public": [
        "./public"
      ],
      "public/*": [
        "./public/*"
      ],
      "#app": [
        "./node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "./node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "./node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "pinia": [
        "./node_modules/pinia/dist/pinia"
      ],
      "#vue-router": [
        "./.nuxt/vue-router"
      ],
      "#imports": [
        "./.nuxt/imports"
      ],
      "#build": [
        "./.nuxt"
      ],
      "#build/*": [
        "./.nuxt/*"
      ],
      "#components": [
        "./.nuxt/components"
      ]
    }
  }
}

@daniluk4000
Copy link
Contributor Author

daniluk4000 commented Jul 4, 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).

@darthf1
Copy link

darthf1 commented Jul 6, 2023

Would be great if this can be considered more as just minor :)

Because this breaks the dev experience for us, we downgraded to 3.5. However, now we have this issue popping up again which breaks navigation.

@daniluk4000
Copy link
Contributor Author

Would be great if this can be considered more as just minor :)

Because this breaks the dev experience for us, we downgraded to 3.5. However, now we have this issue popping up again which breaks navigation.

You can try using my plugin for now. That's how we've managed to upgrade.

@Vanger888
Copy link

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

@daniluk4000
Copy link
Contributor Author

@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 :)

@joel-wenzel
Copy link
Contributor

@daniluk4000 Thanks for plugin, doesnt seem to work if srcDir is specified in nuxt.config though

@daniluk4000
Copy link
Contributor Author

@daniluk4000 Thanks for plugin, doesnt seem to work if srcDir is specified in nuxt.config though

Didn't think about that case as well.

Can you please submit an issue there? https://github.com/daniluk4000/nuxt-tsconfig-relative-paths

@danielroe danielroe added this to the 3.7 milestone Jul 20, 2023
@invalidoperation
Copy link

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.

@hermanndettmann
Copy link

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.

@misaon
Copy link
Contributor

misaon commented Aug 10, 2023

@danielroe I have a similar problem. Why is the .nuxt folder and its dt.ts so inconsistent? Some places are relative imports, some places are absolute. WebStorm can't handle absolute paths in WSL2, so Nuxt 3 is unusable in that environment. It would make much more sense to me if all imports were relative. 😞

.nuxt/types/nitro-imports.d.ts
image

Copy link
Member

danielroe commented Aug 10, 2023

I believe this is already resolved on the edge channel (see linked PR above).

@misaon
Copy link
Contributor

misaon commented Aug 10, 2023

I believe this is already resolved on the edge channel (see linked PR above).

@danielroe It's much better, but there are still bugs 😞
Could the rest of the generation be fixed to make Nuxt 3.7.0 beautiful? ❤️

Some paths are still left with the absolute path:

.nuxt/types/middleware.d.ts:

import type { NavigationGuard } from 'vue-router'
export type MiddlewareKey = string
>>> declare module "/home/xxx/Projects/upscore/node_modules/.pnpm/nuxt3@3.7.0-28194570.99375d68_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/pages/runtime/composables" {
  interface PageMeta {
    middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  }
}

.nuxt/types/layouts.d.ts:

// ...
>>> declare module "/home/xxx/Projects/upscore/node_modules/.pnpm/nuxt3@3.7.0-28194570.99375d68_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/pages/runtime/composables" {
  interface PageMeta {
    layout?: MaybeRef<LayoutKey | false> | ComputedRef<LayoutKey | false>
  }
}

.nuxt/types/nitro-imports.d.ts:

// ...
>>> export { defineCachedFunction, defineCachedEventHandler, cachedFunction, cachedEventHandler, useRuntimeConfig, useStorage, useNitroApp, defineNitroPlugin, nitroPlugin, defineRenderHandler, getRouteRules, useAppConfig, useEvent } from '/home/xxx/Projects/upscore/node_modules/.pnpm/nitropack-edge@2.6.0-28193343.8c0473c/node_modules/nitropack-edge/dist/runtime';
export { appendCorsHeaders, appendCorsPreflightHeaders, appendHeader, appendHeaders, appendResponseHeader, appendResponseHeaders, assertMethod, callNodeListener, clearResponseHeaders, clearSession, createApp, createAppEventHandler, createError, createEvent, createRouter, defaultContentType, defineEventHandler, defineLazyEventHandler, defineNodeListener, defineNodeMiddleware, deleteCookie, dynamicEventHandler, eventHandler, fetchWithEvent, fromNodeMiddleware, getCookie, getHeader, getHeaders, getMethod, getProxyRequestHeaders, getQuery, getRequestHeader, getRequestHeaders, getRequestHost, getRequestPath, getRequestProtocol, getRequestURL, getResponseHeader, getResponseHeaders, getResponseStatus, getResponseStatusText, getRouterParam, getRouterParams, getSession, getValidatedQuery, handleCacheHeaders, handleCors, isCorsOriginAllowed, isError, isEvent, isEventHandler, isMethod, isPreflightRequest, isStream, isWebResponse, lazyEventHandler, parseCookies, promisifyNodeListener, proxyRequest, readBody, readFormData, readMultipartFormData, readRawBody, readValidatedBody, removeResponseHeader, sanitizeStatusCode, sanitizeStatusMessage, sealSession, send, sendError, sendNoContent, sendProxy, sendRedirect, sendStream, sendWebResponse, serveStatic, setCookie, setHeader, setHeaders, setResponseHeader, setResponseHeaders, setResponseStatus, splitCookiesString, toEventHandler, toNodeListener, toPlainHandler, toWebHandler, unsealSession, updateSession, useBase, useSession, writeEarlyHints } from 'h3';
export { buildAssetsURL as __buildAssetsURL, publicAssetsURL as __publicAssetsURL } from '../../node_modules/.pnpm/nuxt3@3.7.0-28194570.99375d68_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/core/runtime/nitro/paths';
export { defineAppConfig } from '../../node_modules/.pnpm/nuxt3@3.7.0-28194570.99375d68_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/core/runtime/nitro/config';

.nuxt/tsconfig.server.json:

{
  "compilerOptions": {
    ...
    "paths": {
      "#imports": [
        "./types/nitro-imports"
      ],
      "#paths": [
        "/home/xxx/Projects/upscore/node_modules/.pnpm/nuxt3@3.7.0-28194570.99375d68_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/core/runtime/nitro/paths"
      ],
      "~": [
        "/home/xxx/Projects/upscore"
      ],
      "~/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "@": [
        "/home/xxx/Projects/upscore"
      ],
      "@/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "~~": [
        "/home/xxx/Projects/upscore"
      ],
      "~~/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "@@": [
        "/home/xxx/Projects/upscore"
      ],
      "@@/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "assets": [
        "/home/xxx/Projects/upscore/assets"
      ],
      "assets/*": [
        "/home/xxx/Projects/upscore/assets/*"
      ],
      "public": [
        "/home/xxx/Projects/upscore/public"
      ],
      "public/*": [
        "/home/xxx/Projects/upscore/public/*"
      ],
      "#color-mode-options": [
        "/home/xxx/Projects/upscore/.nuxt/color-mode-options"
      ],
      "vue-i18n": [
        "/home/xxx/Projects/upscore/node_modules/vue-i18n/dist/vue-i18n"
      ],
      "@intlify/shared": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/shared/dist/shared"
      ],
      "@intlify/message-compiler": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/message-compiler/dist/message-compiler"
      ],
      "@intlify/vue-router-bridge": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/vue-router-bridge/lib/index"
      ],
      "@intlify/vue-i18n-bridge": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/vue-i18n-bridge/lib/index"
      ],
      "vue-i18n-routing": [
        "/home/xxx/Projects/upscore/node_modules/vue-i18n-routing/dist/vue-i18n-routing"
      ],
      "#i18n": [
        "/home/xxx/Projects/upscore/node_modules/.pnpm/@nuxtjs+i18n@8.0.0-rc.2_vue@3.3.4/node_modules/@nuxtjs/i18n/dist/runtime/composables"
      ],
      "pinia": [
        "/home/xxx/Projects/upscore/node_modules/.pnpm/pinia@2.1.6_typescript@5.1.6_vue@3.3.4/node_modules/pinia/dist/pinia"
      ]
    }
  },
  "include": [
    "/home/xxx/Projects/upscore/.nuxt/types/nitro-nuxt.d.ts",
    ...
  ]
}

@danielroe danielroe reopened this Aug 10, 2023
@misaon
Copy link
Contributor

misaon commented Aug 15, 2023

@danielroe I just tested and unfortunately it still doesn't work properly... 😞

Nuxt 3.7.0-28201370.c8cba7a0 with Nitro 2.6.0-28201391.6af6fd1

.nuxt/types/middleware.d.ts: OK
.nuxt/types/layouts.d.ts: OK
.nuxt/tsconfig.server.json: OK (unjs/nitro#1560 (comment))
.nuxt/types/nitro-imports.d.ts: BAD (unjs/nitro#1560 (comment))
.nuxt/tsconfig.json: BAD (worked, now it doesn't work again):

// Generated by nuxi
{
  "compilerOptions": {
    ...
    "baseUrl": "/home/xxx/Projects/upscore",
    ...
    "paths": {
      "~": [
        "/home/xxx/Projects/upscore"
      ],
      "~/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "@": [
        "/home/xxx/Projects/upscore"
      ],
      "@/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "~~": [
        "/home/xxx/Projects/upscore"
      ],
      "~~/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "@@": [
        "/home/xxx/Projects/upscore"
      ],
      "@@/*": [
        "/home/xxx/Projects/upscore/*"
      ],
      "assets": [
        "/home/xxx/Projects/upscore/assets"
      ],
      "assets/*": [
        "/home/xxx/Projects/upscore/assets/*"
      ],
      "public": [
        "/home/xxx/Projects/upscore/public"
      ],
      "public/*": [
        "/home/xxx/Projects/upscore/public/*"
      ],
      "#app": [
        "/home/xxx/Projects/upscore/node_modules/.pnpm/nuxt3@3.7.0-28201370.c8cba7a0_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/app"
      ],
      "#app/*": [
        "/home/xxx/Projects/upscore/node_modules/.pnpm/nuxt3@3.7.0-28201370.c8cba7a0_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/app/*"
      ],
      "vue-demi": [
        "/home/xxx/Projects/upscore/node_modules/.pnpm/nuxt3@3.7.0-28201370.c8cba7a0_@types+node@18.17.1_eslint@8.46.0_typescript@5.1.6/node_modules/nuxt3/dist/app/compat/vue-demi"
      ],
      "#color-mode-options": [
        "/home/xxx/Projects/upscore/.nuxt/color-mode-options.mjs"
      ],
      "vue-i18n": [
        "/home/xxx/Projects/upscore/node_modules/vue-i18n/dist/vue-i18n"
      ],
      "@intlify/shared": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/shared/dist/shared"
      ],
      "@intlify/message-compiler": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/message-compiler/dist/message-compiler"
      ],
      "@intlify/vue-router-bridge": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/vue-router-bridge/lib/index"
      ],
      "@intlify/vue-i18n-bridge": [
        "/home/xxx/Projects/upscore/node_modules/@intlify/vue-i18n-bridge/lib/index"
      ],
      "vue-i18n-routing": [
        "/home/xxx/Projects/upscore/node_modules/vue-i18n-routing/dist/vue-i18n-routing"
      ],
      "#i18n": [
        "/home/xxx/Projects/upscore/node_modules/.pnpm/@nuxtjs+i18n@8.0.0-rc.2_vue@3.3.4/node_modules/@nuxtjs/i18n/dist/runtime/composables"
      ],
      "pinia": [
     "/home/xxx/Projects/upscore/node_modules/.pnpm/pinia@2.1.6_typescript@5.1.6_vue@3.3.4/node_modules/pinia/dist/pinia"
      ],
      "#vue-router": [
        "/home/xxx/Projects/upscore/.nuxt/vue-router"
      ],
      "#imports": [
        "/home/xxx/Projects/upscore/.nuxt/imports"
      ],
      "#build": [
        "/home/xxx/Projects/upscore/.nuxt"
      ],
      "#build/*": [
        "/home/xxx/Projects/upscore/.nuxt/*"
      ],
      "#components": [
        "/home/xxx/Projects/upscore/.nuxt/components"
      ]
    }
  },
  "include": [
    "./nuxt.d.ts",
    "../**/*",
    "../**/*",
    "/home/xxx/Projects/upscore",
    "/home/xxx/Projects/upscore/*",
    "/home/xxx/Projects/upscore",
    "/home/xxx/Projects/upscore/*",
    "/home/xxx/Projects/upscore",
    "/home/xxx/Projects/upscore/*",
    "/home/xxx/Projects/upscore",
    "/home/xxx/Projects/upscore/*"
  ],
  ...
}

@danielroe
Copy link
Member

@misaon Would you provide a reproduction?

@misaon
Copy link
Contributor

misaon commented Aug 15, 2023

@danielroe
Copy link
Member

Ahhh. Partly the issue for testing on the edge channel is that we hadn't updated nuxi-ng to use the new feature yet: nuxt/cli#74.

I've now done that and updated nuxi resolution in your repo - things are looking good but still welcome your review: https://stackblitz.com/edit/github-jz8qdt?file=package.json

@misaon
Copy link
Contributor

misaon commented Aug 15, 2023

@danielroe Perfect.

Now tsconfig.json is fine! The only problem that persists for me is one line in .nuxt/types/nitro-imports.d.ts, namely:

export { defineCachedFunction, defineCachedEventHandler, cachedFunction, cachedEventHandler, useRuntimeConfig, useStorage, useNitroApp, defineNitroPlugin, nitroPlugin, defineRenderHandler, getRouteRules, useAppConfig, useEvent } from '/home/xxx/Projects/upscore/node_modules/.pnpm/nitropack-edge@2.6.0-28201478.6430ded/node_modules/nitropack-edge/dist/runtime';

In your reproduction it is generated with a relative path (#21827 (comment)), but on my WSL2 it generates with an absolute path. It's strange, all other imports are fine. Is there a problem somewhere?

@misaon
Copy link
Contributor

misaon commented Aug 15, 2023

@danielroe Sorry, your reproduction is wrong too:

export { defineCachedFunction, defineCachedEventHandler, cachedFunction, cachedEventHandler, useRuntimeConfig, useStorage, useNitroApp, defineNitroPlugin, nitroPlugin, defineRenderHandler, getRouteRules, useAppConfig, useEvent } z '/home/projects/github-jz8qdt/node_modules/.pnpm/nitropack-edge@2.6.0-28201478.6430ded/node_modules/nitropack-edge/dist/runtime';

@misaon
Copy link
Contributor

misaon commented Aug 15, 2023

We can probably keep this issue closed, nitro-imports.d.ts is probably correct to address here: unjs/nitro#1560

@daniluk4000
Copy link
Contributor Author

For anyone there who installed my module: please remove it when upgrading to Nuxt 3.7.

In newest version of module I have also added warnings for that and disabled module for Nuxt 3.7.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment