nksaraf
commented
3 months ago i think video.js is a package that shouldn't come in the client. So make it a dynamic lazy import and use it inside a !isServer check.
import "./style.css";
import { isServer } from "solid-js/web";
import { onMount } from "solid-js";
export default function App({ assets, scripts }) {
let videoEl: HTMLVideoElement;
onMount(() => {
if (!isServer) {
import("video.js").then((mod) => {
let videojs = mod.default;
videojs(videoEl, {
controls: true,
});
});
}
});
return (
<html lang="en">
<head>
<link
rel="icon"
href={`${import.meta.env.SERVER_BASE_URL}/favicon.ico`}
/>
{assets}
</head>
<body>
<video ref={videoEl!} src="https://vjs.zencdn.net/v/oceans.mp4" />
{scripts}
</body>
</html>
);
}
knpwrs
Here is an example stackblitz based on an official vinxi example: https://stackblitz.com/edit/github-abrfac?file=app%2Fapp.tsx
Note that the video won't play there because of CORS, but the bug I'm experiencing with vinxi is still present.
When you run
npm run dev(vinxi dev),video.jsis able to load. However, when you runnpm run buildfollowed bynpm start(vinxi buildfollowed byvinxi start), the following is output to the console:I am encountering this issue on a project that I am porting from an old (pre-vinxi) version of solid start --
video.jsworks fine in vite, just not in built vinxi apps.This is the output of
npm why global: