Skip to content

GuideEnvironment

Bundlers

Bundler requirements for Video.js package exports, CSS, and wrapper libraries

Before the browser runs your application, a bundler such as Vite combines its imports into files the browser can load. Your bundler must understand the import paths published by Video.js packages.

Package exports

Each Video.js package has an exports field in its package.json. This field lists the import paths that applications and libraries can use, such as @videojs/react/video and @videojs/react/live-video.

If an older bundler reports that one of these paths is missing or not exported, upgrade the bundler before adding an alias that bypasses the package’s public API.

Vite compatibility

Use Vite 4.1 or later; Video.js has been tested through Vite 8. Earlier versions can’t resolve exported stylesheets such as @videojs/react/video/skin.css.

React skins ship their stylesheet as a separate export: an application that renders VideoSkin from @videojs/react/video also imports @videojs/react/video/skin.css, so this limitation applies to every React application that uses a packaged skin.

Externalize Video.js in a wrapper library

You can skip this section when building an application.

If you publish a library that expects its users to install Video.js separately, leave Video.js out of your library’s bundle. Rollup calls a dependency left out of the bundle external.

Rollup’s array form matches only the exact package name, so external: ['@videojs/react'] misses imports such as @videojs/react/video.

Match the package name and everything below it instead:

const videojsPeers = ['@videojs/react'];

export default {
  external(id) {
    return videojsPeers.some(
      (packageName) => id === packageName || id.startsWith(`${packageName}/`)
    );
  }
};

Add every @videojs/* package your library imports directly to videojsPeers and list it in peerDependencies.

Related pages

Guides