Trying to use @vidstack/react with WebPacker.

[adeeb1]

I have a Ruby on Rails 6.1.3 project running webpacker. I use React on the frontend. I am trying to replace Plyr with Vidstack and am running into an issue with the import. When webpack tries to compile, I get this error message:

ERROR in ./app/javascript/src/video_player/new_video_player.tsx
Module not found: Error: Can't resolve '@vidstack/react' in '/home/user/app/javascript/src/video_player'

I followed the installation guide here and installed the Vidstack React library using yarn:

yarn install @vidstack/react@next

I've imported it as the installation guide states. Here's my code:

import React, {
  createRef,
  forwardRef,
  useEffect,
  useImperativeHandle,
  useState,
} from "react";

import { MediaPlayer, MediaProvider } from '@vidstack/react';
import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';

import '@vidstack/react/player/styles/default/theme.css';
import '@vidstack/react/player/styles/default/layouts/video.css';

const VideoPlayer = forwardRef((props, ref) => {
  return (
    <div id="player">
      <MediaPlayer id="player" title="Amazing video" src="youtube/7cEEw6tibOs">
        <MediaProvider />
        <DefaultVideoLayout icons={defaultLayoutIcons} />
      </MediaPlayer>
    </div>
  );
});

export default VideoPlayer;

Is there something I'm missing?

[mihar-22]

It seems like WebPacker is no longer maintained or supported based on the README. Other alternatives are mentioned such as Turbo and Stimulus. WebPacker most likely doesn't support Node package exports.

[adeeb1]

Thank you! For any others in this situation, I'm considering following this migration guide.