Can't handle directories outsite of `root`

[ylc395]

- myProject
  - src
    - driver
      - view
        - pages
          - index.vue
        - index.html
    - domain
      - service
        - service1.ts
  - tsconfig.json
  - vite.config.ts

my project directory structure is like above. Here is my vite.config.ts:

export default defineConfig({
  root: './src/driver/view',
  plugins: [
    tsconfigPaths({ root: process.cwd() }),
    vue(),
  ],
});

and compilerOptions.paths in tsconfig.json is like this:

{
      "domain/*": ["./src/domain/*"],
      "driver/*": ["./src/driver/*"]
}

in index.vue，import domain/service/service1 not work, since browser report

Uncaught SyntaxError: The requested module '/@id/__vite-browser-external:domain/service/service1.ts' does not provide an export named 'service1'

in console.

It seems that vite thought domain/service/service1 is an external module. I inserted an console.log(id) in node_modules/vite-tsconfig-paths/dist/index.js and DEBUG=vite-tsconfig-paths yarn vite, this is output:

driver/http
  vite-tsconfig-paths resolved: {
  id: 'driver/http',
  importer: '/Users/chenyulu/code/mall-webapp/src/driver/view/main.ts',
  resolvedId: '/Users/chenyulu/code/mall-webapp/src/driver/http/index.ts',
  configPath: '/Users/chenyulu/code/mall-webapp/tsconfig.json'
} +651ms
driver/env
  vite-tsconfig-paths resolved: {
  id: 'driver/env',
  importer: '/Users/chenyulu/code/mall-webapp/src/driver/view/main.ts',
  resolvedId: '/Users/chenyulu/code/mall-webapp/src/driver/env/index.ts',
  configPath: '/Users/chenyulu/code/mall-webapp/tsconfig.json'
} +4ms
domain/repository/BaseRepository
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
  vite-tsconfig-paths resolved: {
  id: 'domain/repository/BaseRepository',
  importer: '/Users/chenyulu/code/mall-webapp/src/driver/env/index.ts',
  resolvedId: '/Users/chenyulu/code/mall-webapp/src/domain/repository/BaseRepository.ts',
  configPath: '/Users/chenyulu/code/mall-webapp/tsconfig.json'
} +135ms
domain/repository/BaseRepository
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
domain/service/HomepageService
plugin-vue:export-helper
__vite-browser-external:domain/service/HomepageService
plugin-vue:export-helper
__vite-browser-external:domain/service/HomepageService
__vite-browser-external:domain/service/HomepageService
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
plugin-vue:export-helper
__vite-browser-external:domain/service/HomepageService

This shows that some import statements were handled correctly but some were not.

[aleclarson]

Can you reproduce in a git repo and share it please

or fork this repo and update ./demo with the reproduction (then open a PR)

[ylc395]

@aleclarson https://github.com/ylc395/vite-plugin-tsconfig-paths-demo

[aleclarson]

It's an issue with .vue importers missing their .ts query string for <script lang="ts"> blocks, so it's not related to your project structure.

For now, you can work around it with loose: true option.