import out of nuxt project is not working even after setting paths in tsconfig.json

[hnviradiya]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.15.1
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: npm@8.11.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Following is my directory structure

-shared
    --foo.ts
-web-ui (nuxt project)
    --pages
        --index.vue
        --index.ts
    --tsconfig.json

My nuxt tsconfig is as below.

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "paths": {
      "~shared/*": ["../shared/*"]
    },
    "rootDirs": [".", "../shared"]
  }
}

My nuxt index.vue is as below

<template>
  <div>
    <h1>Welcome to the homepage {{ foo }}</h1>
  </div>
</template>

<script src="./index.ts" setup lang="ts" />

My index.ts is as below.

import { useFoo } from '~shared/foo'

const foo = useFoo;

I am getting below error.

[plugin:vite:import-analysis] Failed to resolve import "~shared/foo" from "pages\index.ts?macro=true". Does the file exist?
C:/Projects/GitLab/legal-disco-typescript/web-ui/pages/index.ts:1:0
1  |  import { useFoo } from "~shared/foo";
   |                          ^
2  |  const foo = useFoo;
3  |
    at formatError (file:///C:/Projects/GitLab/my-project-typescript/web-ui/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:40862:46)
    at TransformContext.error (file:///C:/Projects/GitLab/my-project-typescript/web-ui/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:40858:19)
    at normalizeUrl (file:///C:/Projects/GitLab/my-project-typescript/web-ui/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:37595:33)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async TransformContext.transform (file:///C:/Projects/GitLab/my-project-typescript/web-ui/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:37728:47)
    at async Object.transform (file:///C:/Projects/GitLab/my-project-typescript/web-ui/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:41111:30)
    at async loadAndTransform (file:///C:/Projects/GitLab/my-project-typescript/web-ui/node_modules/vite/dist/node/chunks/dep-4da11a5e.js:37373:29
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

Describe the bug

File import out of nuxt project not working even after setting paths in tsconfig.json

Additional context

Have raised issue on stackoverflow as well.
https://stackoverflow.com/questions/74244503/nuxt-3-tsconfig-path-is-not-working-from-parent-directory

Logs

No response

[danielroe]

Instead, you should define any aliases in your Nuxt config file.

See https://v3.nuxtjs.org/guide/concepts/typescript#nuxttsconfigjson