Closed iamandrewluca closed 2 years ago
Vue files are not supported by default, though I'd be open to tsconfig.include overriding that.
For now, you can add allowJs:true to tsconfig or set loose:true when creating the plugin in Vite config
Thanks, @aleclarson loose: true
did the trick, everything is working fine now.
I failed to add
vite-tsconfig-paths
to a project that also has storybook, even if I configured the right file.After that, I simplified the process and added
vite-tsconfig-paths
to the actual vite configuration. Still did not work.Now I tried a new
vue-ts
repo created with vite, and addedvite-tsconfig-paths
, problem still persists 🤔I tried to configure global aliases like
@/*
or~/*
Even tried with some namespace like
@app/*
all of them fail to resolve import. 🤔In the terminal console, result is pretty much the same 👀
Reproduction repo: https://github.com/iamandrewluca/issue-vite-tsconfig-paths
As a temporary workaround, I added the alias manually to vite configuration, and adjusted
tsconfig.json
paths just for IDE completion.vite.config.ts
```ts import * as path from 'node:path'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '~': path.resolve(__dirname, 'src') }, }, }); ```.storybook/main.js
```js const path = require('node:path'); const { mergeConfig } = require('vite'); module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', ], framework: '@storybook/vue3', core: { builder: '@storybook/builder-vite', }, features: { storyStoreV7: true, }, viteFinal: (config) => mergeConfig(config, { resolve: { alias: { '~': path.resolve(__dirname, '../src') }, }, }), }; ```