Create an Embeddable Widget with Remix and Vite
I'm looking to create an embeddable widget using remix.js and vite. Specifically, I want to build a script that can be embedded in other websites. Does anyone have resources or a basic example that could help me understand how to do this?
7 Replies
that's easy: you just have to ensure that remix sends the right headers for some page that shows html and done
which headers? well, it depends on what you want to do
Yeah, Actually I have a card component built with remix.js and vite. I created a widget-loader.js file to mount it, but I think there might be a configuration issue with the vite build step I set up. When I try to access it using the script tag: I encounter several errors.
<script src="http://localhost:5174/build/client/card-widget.es.js" ></script>which errors?
btw, is there anywhere where we can read the code and see the errors by ourselves?
The errors are listed below:
Uncaught TypeError: Cannot read properties of undefined (reading 'future')
Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering
vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
tsconfigPaths(),
],
build: {
lib: {
entry: "./app/widget-loader.js",
name: "CustomWidget",
fileName: "custom-widget",
formats: ["es"],
},
rollupOptions: {
// input: "./app/widget-loader.js",
output: {
entryFileNames: custom-widget.[format].js,
chunkFileNames: [name].js,
assetFileNames: [name].[ext],
},
},
},
});this is the type of stuff that can only be debugged when viewing a live version
It’s a locally created app. perhaps I should push the code and then invite you to it
you could deploy it to a free host
like vercel or netlify or something