Pruthivi Thejan Posts - Answer Overflow

Pruthivi Thejan

•Created by Pruthivi Thejan on 7/6/2024 in #pages-help

Error while building "Could not resolve "./badge.svelte" from "src/lib/components/ui/badge/index.ts"

I am working on a SvelteKit project with shadcn-svelte and on the components/ui directory all the component exports from index.ts files has this error

15:53:43.541    x Build failed in 1.71s
15:53:43.542    error during build:
15:53:43.542    Could not resolve "./button.svelte" from "src/lib/components/ui/button/index.ts"

15:53:43.541    x Build failed in 1.71s
15:53:43.542    error during build:
15:53:43.542    Could not resolve "./button.svelte" from "src/lib/components/ui/button/index.ts"

and the Svelte component is right there. It works locally and build locally but when pushed to production this error shows up on the build and won't deploy the app. It happened on Cloudflare and I tried deploying to Vercel and the same thing happened. I also noticed that the shadcn-svelte library changed their component names form Uppercase to Lowercase and this might cause the error but I pushed to production after changing the names. Here is my svelte.config.js

import adapter from "@sveltejs/adapter-cloudflare";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config}*/
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      "@/*": "./path/to/lib/*",
    },
  },
  shadcn: {
    componentPath: "./src/lib/components/ui",
  },
};
export default config;

import adapter from "@sveltejs/adapter-cloudflare";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config}*/
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    alias: {
      "@/*": "./path/to/lib/*",
    },
  },
  shadcn: {
    componentPath: "./src/lib/components/ui",
  },
};
export default config;

vite.config.json

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

/** @type {import('vite').UserConfig} */
export default defineConfig({
  plugins: [sveltekit()],
  test: {
    include: ["src/**/*.{test,spec}.{js,ts}"],
  },
});

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

/** @type {import('vite').UserConfig} */
export default defineConfig({
  plugins: [sveltekit()],
  test: {
    include: ["src/**/*.{test,spec}.{js,ts}"],
  },
});

And tsconfig.json

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler",
        "types": ["@cloudflare/workers-types/2023-07-01"]
    },
    "include": ["**/*.ts", "**/*.svelte"]

}

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler",
        "types": ["@cloudflare/workers-types/2023-07-01"]
    },
    "include": ["**/*.ts", "**/*.svelte"]

}

2 replies

Gaming

Programming