Cloudflare Developers•4mo ago

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"]

}

1 Reply

Pruthivi Thejan•4mo ago

Solved by deleting the ui folder pushing code to error out and creating the ui folder again and installing the components

Gaming

Programming

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