Closed f1am3d closed 10 months 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'),
// ...
}
}
})
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.
@jackpinto Reproduce in a test repo, thanks
@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
@k-paxian Have you tried loose: true
?
@k-paxian great, I'll take a look.
Doesn't work
Error:
"Failed to resolve import "x" from "y". Does the file exist?"