W
Wasp-lang•5mo ago
wardbox

Configure vite to resolve @ alias to src directory

Tried configuring like this and vscode seems happy with the path resolution but wasp doesn't, what am I missing?
// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
"compilerOptions": {
"target": "esnext",
// We're bundling all code in the end so this is the most appropriate option,
// it's also important for autocomplete to work properly.
"moduleResolution": "bundler",
// JSX support
"jsx": "preserve",
"strict": true,
// Allow default imports.
"esModuleInterop": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"typeRoots": [
// This is needed to properly support Vitest testing with jest-dom matchers.
// Types for jest-dom are not recognized automatically and Typescript complains
// about missing types e.g. when using `toBeInTheDocument` and other matchers.
"node_modules/@testing-library",
// Specifying type roots overrides the default behavior of looking at the
// node_modules/@types folder so we had to list it explicitly.
// Source 1: https://www.typescriptlang.org/tsconfig#typeRoots
// Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
"node_modules/@types"
],
// Since this TS config is used only for IDE support and not for
// compilation, the following directory doesn't exist. We need to specify
// it to prevent this error:
// https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
"outDir": ".wasp/phantom",
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
],
},
}
}
// =============================== IMPORTANT =================================
//
// This file is only used for Wasp IDE support. You can change it to configure
// your IDE checks, but none of these options will affect the TypeScript
// compiler. Proper TS compiler configuration in Wasp is coming soon :)
{
"compilerOptions": {
"target": "esnext",
// We're bundling all code in the end so this is the most appropriate option,
// it's also important for autocomplete to work properly.
"moduleResolution": "bundler",
// JSX support
"jsx": "preserve",
"strict": true,
// Allow default imports.
"esModuleInterop": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"typeRoots": [
// This is needed to properly support Vitest testing with jest-dom matchers.
// Types for jest-dom are not recognized automatically and Typescript complains
// about missing types e.g. when using `toBeInTheDocument` and other matchers.
"node_modules/@testing-library",
// Specifying type roots overrides the default behavior of looking at the
// node_modules/@types folder so we had to list it explicitly.
// Source 1: https://www.typescriptlang.org/tsconfig#typeRoots
// Source 2: https://github.com/testing-library/jest-dom/issues/546#issuecomment-1889884843
"node_modules/@types"
],
// Since this TS config is used only for IDE support and not for
// compilation, the following directory doesn't exist. We need to specify
// it to prevent this error:
// https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
"outDir": ".wasp/phantom",
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
],
},
}
}
import { defineConfig } from 'vite'
import * as path from 'path';

export default defineConfig({
server: {
open: false,
},
resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, 'src') },
],
},
})
import { defineConfig } from 'vite'
import * as path from 'path';

export default defineConfig({
server: {
open: false,
},
resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, 'src') },
],
},
})
2 Replies
kapa.ai
kapa.ai•5mo ago
Hi @wardbox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you are trying to set up a custom Vite configuration to resolve the @ alias to the src directory in your Wasp project. However, Wasp currently does not support custom TypeScript configuration (source (https://github.com/wasp-lang/wasp/issues/835)). The vite.config.ts file you have is correct for setting up the alias in Vite, but Wasp might not be picking it up. Wasp uses Vite to serve the client during development and bundling it for production. If you want to customize the Vite config, you can do that by editing the vite.config.ts file in your project root directory. Wasp will use your config and merge it with the default Wasp's Vite config (source (https://wasp-lang.dev/docs/project/custom-vite-config)). However, the TypeScript configuration you have in your IDE is not affecting the TypeScript compiler used by Wasp. The comment in your TypeScript configuration file states that it is only used for IDE support and does not affect the TypeScript compiler (source (https://github.com/wasp-lang/wasp/issues/1430)). Therefore, while your IDE might be happy with the path resolution, Wasp is not picking it up because it does not yet support custom TypeScript configuration. This is a known issue and the Wasp team is working on it (source (https://github.com/wasp-lang/wasp/issues/835)). In the meantime, you might have to manually resolve your paths or wait for Wasp to support custom TypeScript configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @wardbox, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
wardbox
wardboxOP•5mo ago
@AFly your question in #đŸ’¬general got me curious, looks like there's our answer!
Want results from more Discord servers?
Add your server