[BUG] Importing themes is broken when using npm package

[mkirkeng-leukeleu]

Hey,

we are trying to use the mave player via npm because from a security perspective we prefer that over using the CDN. However we run into the problem that whenever we install the @maveio/components package into our project and then build our projects themes are no longer imported correctly.

I believe that is due to the way the ThemeLoader dynamically imports the themes by file name. This doesn't when creating a new frontend build because most build tooling will chunk and tree shake all the code resulting the themes not being in the /themes/<theme_name>.js files in the dist after a build. We currently use some hacky solutions to copy over the themes into the build output to get it to work.

Our main usecase is running Vue/Nuxt apps sometimes as SPA and sometimes as a server with SSR (build with vite). But as a test we quickly started a blank react project using create-next-app, added @maveio/components, added the simple test code below into the page.tsx.

'use client'

import { Player } from '@maveio/components/react';

function Home() {
  return (
    <>
      <Player embed="ubg502qJu7jOKXP"></Player>
    </>
  );
}

export default Home;

And the same problems shows where the theme can not be loaded as it's not the in build output:

So the player will show up but the controls won't.

[davidvanleeuwen]

Good point @mkirkeng-leukeleu. I think I need to export them in the build and allow for them to be included explicitly, as it'll not be included otherwise.