WaspW
Wasp•11mo ago
vance_solar

Custom Aliases don't work after migrating from 0.15 to 0.16

I recently upgraded to Wasp v0.16 because I wanted to take advantage of the custom aliases. I installed shadcn using this guide, and got it working after swapping out the import paths and such as suggested. The problem is every time I add a new shadcn component the paths get written incorrectly and I have to go fix it.

So I tried switching back to using aliases and Wasp just fails to compile with errors like Cannot find module '@/lib/utils' or its corresponding type declarations. The aliases are recognized by VSCode without any problems so I'm not sure why wasp is failing on this. Below are my settings

main.wasp
app OpenSaaS {
  wasp: {
    version: "^0.16.0"
  },
...

tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "strict": true,
    "esModuleInterop": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "typeRoots": [
      "node_modules/@testing-library",
      "node_modules/@types"
    ],    
    "composite": true,
    "skipLibCheck": true,
    "outDir": ".wasp/out/user",
    "rootDir": "../", //allow importing of shared dir
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src"
  ],
}


components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.cjs",
    "css": "index.css",
    "baseColor": "gray",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
Gist
Using ShadCN with Wasp 0.12+
Using ShadCN with Wasp 0.12+. GitHub Gist: instantly share code, notes, and snippets.
Was this page helpful?