Error: The following dependencies are imported but could not be resolved:

[kasir-barati]

Hey @aleclarson,

As you requested I created a reproducible repo. Please follow the instructions in the readme.md.

Here is the error message:

 VITE v4.3.5  ready in 473 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
Error: The following dependencies are imported but could not be resolved:

  express (imported by /home/kasir/projects/node.js.developers.kh/apps/backend/src/main.ts)

Are they installed?
    at file:///home/kasir/projects/node.js.developers.kh/node_modules/.pnpm/vite@4.3.5/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:44152:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///home/kasir/projects/node.js.developers.kh/node_modules/.pnpm/vite@4.3.5/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:43561:38

And here is the result when I run DEBUG=vite-tsconfig-paths pnpm start:frontend:

> node.js.developers.kh@0.0.1 start:frontend /home/kasir/projects/node.js.developers.kh
> pnpm run --filter {apps/frontend} dev

> kasir.barati.github.io@0.0.0 dev /home/kasir/projects/node.js.developers.kh/apps/frontend
> vite

  vite-tsconfig-paths options.root   == undefined +0ms
  vite-tsconfig-paths project root   == /home/kasir/projects/node.js.developers.kh/apps/frontend +1ms
  vite-tsconfig-paths workspace root == /home/kasir/projects/node.js.developers.kh +0ms
  vite-tsconfig-paths projects: [
  '/home/kasir/projects/node.js.developers.kh/tsconfig.json',
  '/home/kasir/projects/node.js.developers.kh/apps/backend/tsconfig.json',
  '/home/kasir/projects/node.js.developers.kh/apps/frontend/tsconfig.json'
] +6ms
  vite-tsconfig-paths config loaded: {
  configPath: '/home/kasir/projects/node.js.developers.kh/tsconfig.json',
  config: {
    compilerOptions: {
      declaration: true,
      removeComments: true,
      emitDecoratorMetadata: true,
      experimentalDecorators: true,
      allowSyntheticDefaultImports: true,
      sourceMap: true,
      incremental: true,
      skipLibCheck: true,
      strictNullChecks: false,
      noImplicitAny: false,
      noImplicitReturns: true,
      noUnusedParameters: true,
      strictBindCallApply: false,
      forceConsistentCasingInFileNames: true,
      noFallthroughCasesInSwitch: true,
      strict: true,
      allowJs: false,
      isolatedModules: true,
      esModuleInterop: true,
      resolveJsonModule: true
    },
    exclude: [ 'node_modules' ]
  }
} +10ms
  vite-tsconfig-paths [!] missing baseUrl and paths: "/home/kasir/projects/node.js.developers.kh/tsconfig.json" +0ms
  vite-tsconfig-paths config loaded: {
  configPath: '/home/kasir/projects/node.js.developers.kh/apps/backend/tsconfig.json',
  config: {
    extends: '../../tsconfig.json',
    compilerOptions: {
      module: 'commonjs',
      target: 'es2017',
      outDir: './dist',
      baseUrl: '/home/kasir/projects/node.js.developers.kh/apps/backend',
      paths: { 'shared/*': [ './src/shared/*' ] },
      composite: true,
      declaration: true,
      removeComments: true,
      emitDecoratorMetadata: true,
      experimentalDecorators: true,
      allowSyntheticDefaultImports: true,
      sourceMap: true,
      incremental: true,
      skipLibCheck: true,
      strictNullChecks: false,
      noImplicitAny: false,
      noImplicitReturns: true,
      noUnusedParameters: true,
      strictBindCallApply: false,
      forceConsistentCasingInFileNames: true,
      noFallthroughCasesInSwitch: true,
      strict: true,
      allowJs: false,
      isolatedModules: true,
      esModuleInterop: true,
      resolveJsonModule: true
    },
    exclude: [
      'node_modules',
      '__tests__',
      'test',
      'jest.config.ts',
      'dist',
      '**/*spec.ts'
    ]
  }
} +1ms
  vite-tsconfig-paths compiled globs: {
  includers: [ /^\.\/((?:[^/]*(?:\/|$))*)([^/]*)$/ ],
  excluders: [
    /^\.\/node_modules\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/__tests__\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/test\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/jest\.config\.ts\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/jest\.config\.ts$/,
    /^\.\/dist\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/((?:[^/]*(?:\/|$))*)([^/]*)spec\.ts$/,
    /^\.\/dist\/((?:[^/]*(?:\/|$))*)$/
  ]
} +3ms
  vite-tsconfig-paths config loaded: {
  configPath: '/home/kasir/projects/node.js.developers.kh/apps/frontend/tsconfig.node.json',
  config: {
    compilerOptions: {
      composite: true,
      module: 'ESNext',
      moduleResolution: 'Node',
      allowSyntheticDefaultImports: true
    },
    include: [ 'vite.config.ts' ]
  }
} +1ms
  vite-tsconfig-paths [!] missing baseUrl and paths: "/home/kasir/projects/node.js.developers.kh/apps/frontend/tsconfig.node.json" +0ms
  vite-tsconfig-paths config loaded: {
  configPath: '/home/kasir/projects/node.js.developers.kh/apps/backend/tsconfig.json',
  config: {
    extends: '../../tsconfig.json',
    compilerOptions: {
      module: 'commonjs',
      target: 'es2017',
      outDir: './dist',
      baseUrl: '/home/kasir/projects/node.js.developers.kh/apps/backend',
      paths: { 'shared/*': [ './src/shared/*' ] },
      composite: true,
      declaration: true,
      removeComments: true,
      emitDecoratorMetadata: true,
      experimentalDecorators: true,
      allowSyntheticDefaultImports: true,
      sourceMap: true,
      incremental: true,
      skipLibCheck: true,
      strictNullChecks: false,
      noImplicitAny: false,
      noImplicitReturns: true,
      noUnusedParameters: true,
      strictBindCallApply: false,
      forceConsistentCasingInFileNames: true,
      noFallthroughCasesInSwitch: true,
      strict: true,
      allowJs: false,
      isolatedModules: true,
      esModuleInterop: true,
      resolveJsonModule: true
    },
    exclude: [
      'node_modules',
      '__tests__',
      'test',
      'jest.config.ts',
      'dist',
      '**/*spec.ts'
    ]
  }
} +1ms
  vite-tsconfig-paths compiled globs: {
  includers: [ /^\.\/((?:[^/]*(?:\/|$))*)([^/]*)$/ ],
  excluders: [
    /^\.\/node_modules\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/__tests__\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/test\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/jest\.config\.ts\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/jest\.config\.ts$/,
    /^\.\/dist\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/((?:[^/]*(?:\/|$))*)([^/]*)spec\.ts$/,
    /^\.\/dist\/((?:[^/]*(?:\/|$))*)$/
  ]
} +0ms
  vite-tsconfig-paths config loaded: {
  configPath: '/home/kasir/projects/node.js.developers.kh/apps/frontend/tsconfig.json',
  config: {
    compilerOptions: {
      noUnusedLocals: true,
      allowJs: false,
      noUnusedParameters: true,
      noImplicitReturns: false,
      skipDefaultLibCheck: true,
      incremental: true,
      experimentalDecorators: true,
      emitDecoratorMetadata: true,
      declaration: true,
      sourceMap: true,
      removeComments: true,
      esModuleInterop: true,
      noImplicitAny: false,
      strictNullChecks: true,
      strictBindCallApply: true,
      strictPropertyInitialization: false,
      alwaysStrict: true,
      noFallthroughCasesInSwitch: true,
      target: 'ESNext',
      useDefineForClassFields: true,
      outDir: './dist',
      baseUrl: '/home/kasir/projects/node.js.developers.kh/apps/frontend',
      lib: [ 'DOM', 'DOM.Iterable', 'ESNext' ],
      skipLibCheck: true,
      allowSyntheticDefaultImports: true,
      strict: true,
      forceConsistentCasingInFileNames: true,
      module: 'ESNext',
      moduleResolution: 'Node',
      resolveJsonModule: true,
      isolatedModules: true,
      noEmit: true,
      jsx: 'react-jsx',
      paths: {
        'components/*': [ './src/components/*' ],
        'pages/*': [ './src/pages/*' ],
        'backend/*': [ '../backend/*' ]
      },
      rootDirs: [ './src', '../backend' ]
    },
    references: [ { path: './tsconfig.node.json' }, { path: '../backend' } ]
  }
} +2ms
  vite-tsconfig-paths compiled globs: {
  includers: [ /^\.\/((?:[^/]*(?:\/|$))*)([^/]*)$/ ],
  excluders: [
    /^\.\/((?:[^/]*(?:\/|$))*)node_modules\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/((?:[^/]*(?:\/|$))*)bower_components\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/((?:[^/]*(?:\/|$))*)jspm_packages\/((?:[^/]*(?:\/|$))*)$/,
    /^\.\/dist\/((?:[^/]*(?:\/|$))*)$/
  ]
} +0ms

  VITE v4.3.5  ready in 496 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help
  vite-tsconfig-paths resolved: {
  id: 'backend/src/main',
  importer: '/home/kasir/projects/node.js.developers.kh/apps/frontend/src/pages/contactUs/contactUsApi.slice.tsx',
  resolvedId: '/home/kasir/projects/node.js.developers.kh/apps/backend/src/main.ts',
  configPath: '/home/kasir/projects/node.js.developers.kh/apps/frontend/tsconfig.json'
} +157ms
  vite-tsconfig-paths resolved: {
  id: 'backend/src/modules/contact-us/contact-us.controller',
  importer: '/home/kasir/projects/node.js.developers.kh/apps/frontend/src/pages/contactUs/contactUsApi.slice.tsx',
  resolvedId: '/home/kasir/projects/node.js.developers.kh/apps/backend/src/modules/contact-us/contact-us.controller.ts',
  configPath: '/home/kasir/projects/node.js.developers.kh/apps/frontend/tsconfig.json'
} +2ms
Error: The following dependencies are imported but could not be resolved:

  express (imported by /home/kasir/projects/node.js.developers.kh/apps/backend/src/main.ts)

Are they installed?
    at file:///home/kasir/projects/node.js.developers.kh/node_modules/.pnpm/vite@4.3.5/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:44152:23
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///home/kasir/projects/node.js.developers.kh/node_modules/.pnpm/vite@4.3.5/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:43561:38

[aleclarson]

Please link to the tsconfig lines that you expected this plugin to resolve express with

[kasir-barati]

Please link to the tsconfig lines that you expected this plugin to resolve express with

https://github.com/kasir-barati/bugs/blob/vite-tsconfig-paths/apps/frontend/tsconfig.json#L39

I never wanted it to resolve express. I just wanted to have access to the backend codes and import things like: import { BACKEND_API_PREFIX } from 'backend/src/main';

I guess it is trying to find express in the frontend dependencies and obviously I have not it there. I am just thinking maybe if I create a new ts file and export that string from that file it won't complain. I'll try and tell you what happened. All in all it would be so lame if the problem resolves because then it will be a hassle to export shared things in a separate file or directory

[aleclarson]

Vite doesn't tree-shake in dev server mode, so you're importing your entire backend into your frontend, hence the attempt to resolve express. It's unrelated to this plugin.

[kasir-barati]

@aleclarson Thanks for the heads up. You're right. Here is the proof: https://github.com/kasir-barati/bugs/commit/c61c819dd6deb2f81f962e16fc5afc170aeba914

BTW just one thing is bugging me, when you told me that "Vite doesn't tree-shake in dev server mode", does it mean that I can hope that it will work in prod?

Dummy question but just to make sure

[aleclarson]

No, because there's a top-level side effect which prevents tree-shaking of backend stuff: https://github.com/kasir-barati/bugs/blob/c61c819dd6deb2f81f962e16fc5afc170aeba914/apps/backend/src/main.ts#L75

Easiest solution is to move the BACKEND_API_PREFIX to its own file

(oh, I see you did that already 😄 )

[kasir-barati]

@aleclarson Suggestion, Update the doc to contains this pseudo issue/bug just to prevent others falls into the same trap :joy:

[aleclarson]

The Vite docs could use a Tree Shaking page that describes common pitfalls. The hard part about this pitfall is it looks like a resolution bug, but it's actually a misunderstanding of Vite's tree-shaking, so the people having this problem would be looking in the wrong place.

But none of that is specifically related to this plugin :)