aleclarson / vite-tsconfig-paths

Support for TypeScript's path mapping in Vite
MIT License
1.23k stars 44 forks source link

Failed to resolve import #114

Closed f1am3d closed 10 months ago

f1am3d commented 1 year ago

Doesn't work

Error:

"Failed to resolve import "x" from "y". Does the file exist?"

// tsconfig
{
"compilerOptions": 
{
    "paths": {
        "": ["./src"],
        "*": ["./src/*"]
    }
}
}
// vite config 
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [
        vue(),
        tsconfigPaths()
    ]
});
mationai commented 1 year ago

Same, another issue says worked for vite v4.2.2, but tried that and the latest vite, both versions didn't work.

Edit: For simple aliases, this library seems not needed. See https://vite-plugin-ssr.com/path-aliases (no need to install that plugin, just shoulds how to config w/o any plugins).

Will need path.resolve, eg:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path' // may need to install '@types/node'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      // ...
    }
  }
})
jackpinto commented 11 months ago

Same here, only works when the alias options are set.

config:

import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    alias: {
      'src/': new URL('./src/', import.meta.url).pathname,
      'boot/': new URL('./src/boot/', import.meta.url).pathname,
      'components/': new URL('./src/components/', import.meta.url).pathname,
      'composable/': new URL('./src/composable/', import.meta.url).pathname
    },
    environment: 'happy-dom',
    globals: true,
    include: [
      'src/**/*.vitest.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
      'test/vitest/__tests__/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
    ],
  },
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    quasar({
      sassVariables: 'src/quasar-variables.scss',
    }),
    // tsconfigPaths(),
  ],
});

Doesn't matter if tsconfigPaths is commented or not.

aleclarson commented 11 months ago

@jackpinto Reproduce in a test repo, thanks

k-paxian commented 10 months ago

@jackpinto @f1am3d Most likely you don't have allowJS: true Here is working demo project https://stackblitz.com/edit/vitejs-vite-89jzdf?file=package.json,vite.config.ts,tsconfig.json,src%2FApp.vue,tsconfig.node.json&terminal=dev

I had a similar issue, and resolved it by allowJS: true

My misleading originally comes from confusion: On one hand I'd like to have a pure TS project w/o any JS allowed to be present in the repository. So my natural intention was to set allowJs to false On the other hand, this compiler flag despite the name *JS in it just literally telling us: "Allow any other file extensions in addition to *.ts" and this plugin also relying on that flag increasing the confusion 🤷

So the open question still: What if we need allowJS to be false? In case we need .ts,.vue files IN but *.js stuff OUT

aleclarson commented 10 months ago

@k-paxian Have you tried loose: true?

jackpinto commented 10 months ago

@k-paxian great, I'll take a look.