aleclarson / vite-tsconfig-paths

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

Failed to resolve import in a vue-ts project #60

Closed iamandrewluca closed 2 years ago

iamandrewluca commented 2 years ago

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 added vite-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. 🤔

Here is the commit in which I added vite-tsconfig-paths

npm run dev

In the terminal console, result is pretty much the same 👀

image

Reproduction repo: https://github.com/iamandrewluca/issue-vite-tsconfig-paths

❯ node -v
v16.15.1

❯ npm -v
8.13.2

❯ npx -v
8.13.2

❯ uname -sm
Darwin arm64

❯ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --version
Google Chrome 103.0.5060.53

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') }, }, }), }; ```
aleclarson commented 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

iamandrewluca commented 2 years ago

Thanks, @aleclarson loose: true did the trick, everything is working fine now.