Typescript无法解析上级目录shared文件中的yup模块求助

目录结构 #

• Main/project-root/：包含tsconfig.json、package.json、app.ts等文件，yup等依赖安装在此目录的node_modules中
• Main/shared/：仅存放shared.ts等TS文件，无package.json及任何配置文件

代码示例 #

project-root/app.ts #

import * as yup from 'yup'
import { whatever } from '@shared/shared.ts'

// 业务逻辑代码

export default myexports;

shared/shared.ts #

import * as yup from 'yup'

// 共享逻辑代码

export default mysharedexports;

问题现状 #

app.ts可正常解析yup模块并运行，但shared.ts无法找到yup模块。已尝试添加"rootDirs": ["./", "../shared"]配置，未解决问题。需求是让shared.ts能访问project-root下所有node_modules依赖。

现有配置 #

project-root/tsconfig.json #

{
  "extends": "@quasar/app-vite/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@shared/*": ["../shared/*"],
      "@synced-validation/*": ["src/validation/*"],
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"],
      "validation/*": ["src/validation/*"],
    },
  }
}

@quasar/app-vite/tsconfig-preset 默认配置 #

{
  "compilerOptions": {
    "allowJs": true,
    // `baseUrl` must be placed on the extending configuration in devland, or paths won't be recognized
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    // Needed to address https://github.com/quasarframework/app-extension-typescript/issues/36
    "noEmit": true,
    "resolveJsonModule": true,
    // Avoid cross-os errors due to inconsistent file casing
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "isolatedModules": true,
    "useDefineForClassFields": true,
    // Fix Volar issue https://github.com/johnsoncodehk/volar/issues/1153
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "paths": {
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"]
    }
  },
  // Needed to avoid files copied into 'dist' folder (e.g. a `.d.ts` file inside `src-ssr` folder)
  // to be evaluated by TS when their original files has been updated
  "exclude": ["dist", ".quasar", "node_modules"]
}

解决方案 #

方案1：将shared目录纳入根tsconfig的编译范围 #

修改project-root/tsconfig.json，添加include字段把shared目录包含进来，让TypeScript将其视为项目的一部分，使用根目录的node_modules解析依赖：

{
  "extends": "@quasar/app-vite/tsconfig-preset",
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@shared/*": ["../shared/*"],
      "@synced-validation/*": ["src/validation/*"],
      "src/*": ["src/*"],
      "app/*": ["*"],
      "components/*": ["src/components/*"],
      "layouts/*": ["src/layouts/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"],
      "boot/*": ["src/boot/*"],
      "stores/*": ["src/stores/*"],
      "validation/*": ["src/validation/*"],
    },
  },
  "include": [
    "src/**/*",
    "../shared/**/*"
  ]
}

方案2：为shared目录添加独立tsconfig并继承根配置 #

在Main/shared/下创建tsconfig.json，继承根目录的配置并调整baseUrl指向project-root，确保模块解析路径正确：

{
  "extends": "../project-root/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "../project-root/",
    "paths": {
      "@shared/*": ["./*"]
    }
  },
  "include": ["./**/*"]
}

方案3：配置Vite的模块解析规则（适配Quasar环境） #

因为项目基于Quasar + Vite，需要确保Vite能正确解析shared目录的依赖。在project-root的quasar.config.js（或vite.config.ts）中添加Vite的resolve配置：

const path = require('path');

module.exports = configure(function (ctx) {
  return {
    // 其他配置...
    vite: {
      resolve: {
        alias: {
          '@shared': path.resolve(__dirname, '../shared'),
        },
        // 指定模块查找目录，优先使用根目录的node_modules
        modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
      }
    }
  }
})

内容的提问来源于stack exchange，提问作者Slight