I’ve written a simple checkbox web component in Svelte, which I’ve packaged into a bundle using Vite. The bundle process worked fine, and I was able to publish an alpha version to npm, but when it comes to using it, I’m having difficulty in rendering the same component in a React test site setup in CodeSandbox. The link is at https://codesandbox.io/p/devbox/dc687t.

Current:

When I run the CSB demo above, I get nothing returned (apart from the standard React text from the original demo template). Instead, I get a series of errors and warnings, such as this error:

settings.ts:110 EntryNotFound (FileSystemError): File does not exist at ZL.create (https://codesandbox.io/p/assets/vendor-d42495c2.js:696:9586) at yc (https://codesandbox.io/p/assets/vendor-d42495c2.js:696:9693) at https://codesandbox.io/p/assets/vendor-d42495c2.js:961:38356

…or these warnings: “Failed to get latest changelog” and “Failed to execute ‘postMessage’ on ‘DOMWindow'”.

Code used to bundle package:

Below is the code I’ve used to bundle the package:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      input: ["./src/lib/components/Checkbox/Checkbox.svelte"],
    },
  },
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
      },
    }),
  ],
});

Steps taken:

• I’ve successfully managed to install the plugin into the CodeSandbox demo, and can see it in the node_modules folder and in package.json in the demo; it is set with the Svelte customElement tag to make it a web component;
• I’ve added a reference to it from the App.js file, and am passing two props (checked and label);
• tried rebundling the package several times – I have seen some minor issues which I’ve corrected already, and included in the bundle.
• I have the same code running locally as is in the bundle – the former works fine, so I believe the issue is likely to be down to how I’ve bundled it, or am calling it from the bundle.

Desired outcome:

My research tells me I should be able to reference the web component using the format , and adding props where needed (as shown in the CSB demo).

Is anyone able to shed some light on where I’ve messed up please, and help me get back on the right path?