Web-components not rendering.
I have an app built with Remix/Vite, that uses web-components for several keys elements on the page (eg: logo, graphics, buttons). None of the elements render when the app is deployed on Pages, but everything works as expected locally with wrangler dev. So far as I can tell the issue appears to be that the web-components' js files are not being imported correctly. The web-components are wrapped in a React component that uses suspense and lazy to only load the files on the client. My debugging shows that is functioning correctly.
The files all appear in the "Assets uploaded" section of the CF-Dashboard. There are two versions of each one with a random hash and one without.
The hashed-file code looks like this (file: web-component-logo_SOmEhAsh.js)
And the file appears in the browser network tab after it is called by the client. The other file doesn't ever appear in network tab (so is never loaded, and I assume the source of the problem)
Not sure if this is an issue with CF-Pages or Remix/Vite.
1 Reply
I solved my own issue. The solution was to load the scripts using Remix-Utils' externalScripts. Initially I was importing the scripts using lazy inside the React wrapper component.