Wasp•16mo ago

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') },
    ],
  },
})

19 Replies

kapa.ai•16mo 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?

wardboxOP•16mo ago

@AFly your question in #💬general got me curious, looks like there's our answer!

enlightenmental•6mo ago

@kapa.ai How would someone manually resolve paths to correct this issue?

kapa.ai•6mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, there are a few ways to manually resolve path issues in Wasp projects: 1. Use resolveProjectPath helper The most recommended approach is to use the resolveProjectPath helper that Wasp provides. This helper bridges the gap between where users define paths in their config files (project root dir) and where the web app is actually running (.wasp/out/web-app).

const { resolveProjectPath } = require('wasp/dev');

// In your vite.config.ts
import { defineConfig } from 'vite';
import * as path from 'path';
import { resolveProjectPath } from 'wasp/dev';

export default defineConfig({
  server: {
    open: false,
    fs: {
      // Allow serving files from one level up from the package root
      allow: [resolveProjectPath('./src')]
    }
  },
  resolve: {
    alias: [
      { find: '@', replacement: resolveProjectPath('./src') },
    ],
  }
})

const { resolveProjectPath } = require('wasp/dev');

// In your vite.config.ts
import { defineConfig } from 'vite';
import * as path from 'path';
import { resolveProjectPath } from 'wasp/dev';

export default defineConfig({
  server: {
    open: false,
    fs: {
      // Allow serving files from one level up from the package root
      allow: [resolveProjectPath('./src')]
    }
  },
  resolve: {
    alias: [
      { find: '@', replacement: resolveProjectPath('./src') },
    ],
  }
})

This helper is mentioned in the Tailwind setup docs and is crucial for any path definitions in the Vite config file Improve our docs on resolveProjectPath helper. 2. Use relative imports instead of aliases Until Wasp fully supports custom TypeScript configuration, you could use relative imports (e.g., ../../components/Button) instead of alias-based imports (@/components/Button). 3. Follow the new project structure Since Wasp 0.12.0, the project structure has changed. The server/client code separation is no longer necessary, and you can organize your code however you want inside the src directory. All external imports in your Wasp file must have paths starting with @src Migration from 0.11.X to 0.12.X. If you're still having issues with path resolution, you might need to wait for better TypeScript configuration support in Wasp, as this is a known issue that the team is working on. I hope this helps with your path resolution issues! LyricL: I notice that the knowledge sources don't provide a complete solution for the user's specific issue with the @ alias. Let me revise my answer to be more accurate about what's possible with the current state of Wasp. Based on the knowledge sources, there are a few ways to handle path resolution issues in Wasp projects: 1. Use resolveProjectPath helper for config files The resolveProjectPath helper is primarily used for resolving paths in configuration files like tailwind.config.js or vite.config.ts. This helper bridges the gap between where users define paths in their config files and where the web app is actually running.

// In your vite.config.ts
import { defineConfig } from 'vite';
import * as path from 'path';
import { resolveProjectPath } from 'wasp/dev';

export default defineConfig({
  server: {
    open: false,
    fs: {
      // Allow serving files from one level up from the package root
      allow: [resolveProjectPath('./src')]
    }
  },
  resolve: {
    alias: [
      { find: '@', replacement: resolveProjectPath('./src') },
    ],
  }
})

// In your vite.config.ts
import { defineConfig } from 'vite';
import * as path from 'path';
import { resolveProjectPath } from 'wasp/dev';

export default defineConfig({
  server: {
    open: false,
    fs: {
      // Allow serving files from one level up from the package root
      allow: [resolveProjectPath('./src')]
    }
  },
  resolve: {
    alias: [
      { find: '@', replacement: resolveProjectPath('./src') },
    ],
  }
})

This approach is documented in several places and has helped users with similar issues GitHub Gist solution. 2. Use relative imports instead of aliases Until Wasp fully supports custom TypeScript configuration, you could use relative imports (e.g., ../../components/Button) instead of alias-based imports (@/components/Button). 3. Use Wasp's standard import paths In Wasp 0.12.0+, you can use @src to refer to your source directory. This is the officially supported way to reference your source files in Wasp. The issue with custom path aliases like @ is that Wasp doesn't yet fully support custom TypeScript configuration, which is a known limitation that the team is working on. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @enlightenmental, 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?

enlightenmental•6mo ago

@kapa.ai show me a code example of tsconfig.json configured to resolve @src imports and how @src would be used in a project based on a standard directory structure (e.g. /src/component/file.tsx)

kapa.ai•6mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, I can show you how to configure tsconfig.json for @src imports in a Wasp project and how to use these imports in your code. In Wasp, the @src alias is the standard way to reference files in your source directory. Here's how a typical tsconfig.json would be configured:

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"]
    },
    "outDir": ".wasp/phantom"
  }
}

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@src/*": ["./src/*"]
    },
    "outDir": ".wasp/phantom"
  }
}

Now, let's see how you would use the @src alias in your code with a standard directory structure: Directory Structure

.
├── main.wasp
├── package.json
├── src
│   ├── components
│   │   └── Header.tsx
│   ├── pages
│   │   └── MainPage.tsx
│   ├── server
│   │   ├── queries.ts
│   │   └── actions.ts
│   └── Root.tsx
└── tsconfig.json

.
├── main.wasp
├── package.json
├── src
│   ├── components
│   │   └── Header.tsx
│   ├── pages
│   │   └── MainPage.tsx
│   ├── server
│   │   ├── queries.ts
│   │   └── actions.ts
│   └── Root.tsx
└── tsconfig.json

Example Usage in Wasp File

app MyApp {
  title: "My app",
  client: {
    rootComponent: import Root from "@src/Root.tsx",
  }
}

page MainPage {
  component: import { MainPage } from "@src/pages/MainPage"
}

query getTasks {
  fn: import { getTasks } from "@src/server/queries.js",
}

action createTask {
  fn: import { createTask } from "@src/server/actions.js",
  entities: [Task]
}

app MyApp {
  title: "My app",
  client: {
    rootComponent: import Root from "@src/Root.tsx",
  }
}

page MainPage {
  component: import { MainPage } from "@src/pages/MainPage"
}

query getTasks {
  fn: import { getTasks } from "@src/server/queries.js",
}

action createTask {
  fn: import { createTask } from "@src/server/actions.js",
  entities: [Task]
}

Example Usage in React Components

// src/pages/MainPage.tsx
import Header from "@src/components/Header";

export function MainPage() {
  return (
    <div>
      <Header />
      <h1>Main Page</h1>
    </div>
  );
}

// src/pages/MainPage.tsx
import Header from "@src/components/Header";

export function MainPage() {
  return (
    <div>
      <Header />
      <h1>Main Page</h1>
    </div>
  );
}

// src/Root.tsx
export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  );
}

// src/Root.tsx
export default function Root({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  );
}

According to the knowledge sources, Wasp moved from using @client, @server, and @shared aliases in version 0.11.x to using @src in version 0.12.0+ Migration from 0.11.X to 0.12.X. This change allows for more flexible code organization within the src directory. The @src alias is automatically set up by Wasp and points to the src directory in your project root. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @enlightenmental, 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?

miho•6mo ago

@sodic you might want to chime in

enlightenmental•6mo ago

@kapa.ai I've adjusted tsconfig.json to define the @src alias and prevent IDE errors

    
"paths": {
      "@src/*": ["./src/*"]
    }

    
"paths": {
      "@src/*": ["./src/*"]
    }

I'm also using imports that are relative to the app /src/ directory. File Path: /myApp/app/src/components/logo/Logo.tsx Import Statement: import { Logo } from '@src/components/logo/Logo'; [WASP] Error Message: error TS2307: Cannot find module '@/components/logo/Logo' or its corresponding type declarations. Any ideas on where I should troubleshoot?

kapa.ai•6mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I notice there's a discrepancy between your import statement and the error message. You're using @src/components/logo/Logo in your import, but the error is looking for @/components/logo/Logo (notice the missing "src"). This suggests there might be a mismatch between how you've configured your paths in tsconfig.json and how Wasp is interpreting them. Here are some troubleshooting steps: 1. Check your import statement: Make sure you're consistently using @src/ and not mixing with @/ in your imports. 2. Verify your tsconfig.json: Ensure your paths configuration is correct:

   "paths": {
     "@src/*": ["./src/*"]
   }

   "paths": {
     "@src/*": ["./src/*"]
   }

Not:

   "paths": {
     "@/*": ["./src/*"]
   }

   "paths": {
     "@/*": ["./src/*"]
   }

3. Remember tsconfig.json limitations: As mentioned in the knowledge sources, the tsconfig.json file in Wasp is primarily for IDE support and doesn't affect the TypeScript compiler used by Wasp GitHub Issue #835. This means your IDE might be happy with the paths, but Wasp's compiler might not recognize them. 4. Use Wasp's standard import paths: In Wasp 0.12.0+, @src is the officially supported way to reference your source files. Make sure you're using this consistently in both your .wasp file and your TypeScript/JavaScript files. 5. Check for circular imports: Ensure you're not creating a circular dependency by importing the file into itself. 6. File extension: Try adding the file extension in your import: import { Logo } from '@src/components/logo/Logo.tsx'; If you're still having issues, you might need to use relative imports until Wasp fully supports custom TypeScript configuration, which is a known limitation that the team is working on. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @enlightenmental, 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?

enlightenmental•6mo ago

@kapa.ai sorry - that was a typo. Corrected error message: error TS2307: Cannot find module '@src/components/logo/Logo' or its corresponding type declarations.

kapa.ai•6mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thanks for the correction. Now I understand the issue better. The error message is consistent with your import statement, which suggests there's a problem with how Wasp is handling the @src alias. Here are some troubleshooting steps based on the knowledge sources: 1. Check file existence and exports: Make sure the file /myApp/app/src/components/logo/Logo.tsx exists and properly exports a Logo component. 2. Self-import issue: It appears you're trying to import Logo from the same file that defines it. This creates a circular reference. If this is the case, you shouldn't need to import the component into its own file. 3. Import syntax: If you're importing from another file, make sure your export/import syntax matches:

   // In Logo.tsx
   export const Logo = () => { /* ... */ }
   
   // When importing
   import { Logo } from '@src/components/logo/Logo';

   // In Logo.tsx
   export const Logo = () => { /* ... */ }
   
   // When importing
   import { Logo } from '@src/components/logo/Logo';

4. Wasp's tsconfig limitations: As mentioned in the knowledge sources, Wasp doesn't yet fully support custom TypeScript configuration GitHub Issue #835. The tsconfig.json file is primarily for IDE support and doesn't affect the TypeScript compiler used by Wasp. 5. Try relative imports: Until Wasp fully supports custom path aliases, you might need to use relative imports:

   // If importing from another component
   import { Logo } from '../../components/logo/Logo';

   // If importing from another component
   import { Logo } from '../../components/logo/Logo';

6. Check main.wasp imports: Make sure any imports in your main.wasp file use the @src prefix correctly:

   component: import { MainPage } from "@src/MainPage"

   component: import { MainPage } from "@src/MainPage"

The current state of TypeScript configuration in Wasp is a known limitation, and the team is working on improving it. For now, using relative imports might be the most reliable approach. LyricL: I notice I'm repeating some information from previous answers. Let me focus on new insights that might help solve this specific issue. Based on the error message, it seems Wasp's compiler can't find the module at the specified path. This could be because: 1. File extension: Try including the file extension in your import:

   import { Logo } from '@src/components/logo/Logo.tsx';

   import { Logo } from '@src/components/logo/Logo.tsx';

2. Index file approach: If Logo is defined in an index.tsx file within the logo folder, try:

   import { Logo } from '@src/components/logo';

   import { Logo } from '@src/components/logo';

3. Case sensitivity: Ensure the casing in your import matches the actual file name (Logo.tsx vs logo.tsx). If none of these solutions work, you might need to stick with relative imports for now until Wasp improves its TypeScript configuration support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @enlightenmental, 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?

enlightenmental•6mo ago

🤨

Filip•6mo ago

Hey @enlightenmental thanks for asking. Turns out I just answered an alias-related question yesterday. Here's what's up: https://discord.com/channels/686873244791210014/1267098295327653908/1368668646532059286 Sorry for your troubles and thanks for the patience. P.S. I can see from the tsconfig that you're using an old version of Wasp. You might want to update that: https://wasp.sh/docs/migration-guides/migrate-from-0-15-to-0-16. We have new cool stuff (not aliases yet unfortunately 🥲)

How would someone manually resolve paths to correct this issue?

What did you mean by manually resolve paths? Maybe I can help you out

enlightenmental•6mo ago

@Filip Just read your other posts - thank you. re: manually resolving - I meant how to get the IDE to ignore showing errors in files that ARE importing correctly. e.g. import { type AuthUser } from 'wasp/auth'; throws an error - even though it works fine. (I'm running Cloud9 IDE on AWS + EC2, etc... unconventional I know) Also - if ts path aliases are not an option, does that mean @src as a WASP-based alias does not work either?

Filip•5mo ago

Hmm, it's weird that you're getting errors for this. What does it say? Do you mind sharing the project (or a minimum example)? @src in JS source files doesn't resolve to anything, yes. It's only a special thing used in the Wasp file (if that was your question, if not, please correct me :))

enlightenmental•5mo ago

Thanks. Ignore the IDE issues - That's on me

Filip•5mo ago

Yeah, sometimes the TS language requires explicit restarting. This is a problem outside of Wasp too. There's an extension that can do it for you, I think @Vinny (@Wasp) mentioned he uses it

genyus•5mo ago

'twas me 🙂 https://discord.com/channels/686873244791210014/1340323401553940520/1341078788662104144

Filip•5mo ago

Oh, that's right! Sorry for taking your credit 😅

Gaming

Programming

Configure vite to resolve @ alias to src directory

Did you find this page helpful?