Importing plugin with ES6: videojs_annotation_comments_1.default is not a function

[jyseltz]

Trying to initialize the plugin (v1.1.1 with videojs v6.9.0 and @types/videojs v7.2.5) with with ES6+React using this import code:

import videojs from 'video.js';
import AnnotationComments from 'videojs-annotation-comments';

and this code to register the plugin and initialize the player:

    videojs.registerPlugin('annotationComments', AnnotationComments(videojs));
    this.player = videojs(this.videoNode, videojsOptions);

And I am getting this error:

TypeError: videojs_annotation_comments_1.default is not a function

I believe it may be related to this similar issue with generator-videojs-plugin, related to the plugin using browserify, but I'm not sure. Any ideas?

[jackpope]

Hi @jyseltz thanks for checking out the plugin! The build currently outputs two versions: a browserified script and a CJS module. The main in package.json is set to the CJS module: https://github.com/contently/videojs-annotation-comments/blob/master/package.json#L5

This has allowed us to use Webpack imports and make it work with the code in the README. What are you using to bundle the application?

[jyseltz]

Hi @jackpope thanks for the quick response! I'm using Webpack to bundle, and specifically awesome-typescript-loader to compile. Do you think it would have anything to do with using Typescript?

[jackpope]

Hi @jyseltz sorry to leave you hanging here. Is this still a concern? If so, I'll spend some more time looking into it.

[jyseltz]

Hey @jackpope, thanks for your response

I'm still having trouble loading it. I think the problem may be related to jQuery. If I try to load jquery via the Imports Loader as you mentioned in #44 then the plugin can be imported and registered.

However there still seems to be some problem.. there is no Javascript error, but only the player button and the comments (with broken styles) are loading, and nothing happens if I click on them.

Any ideas? Or is there an easier way to load jQuery that I am overlooking?

Thanks so much for your help!

[eyaylagul]

I follow these problem with Vue.js and ES6/Webpack :)

Now, i solved jQuery problem (i had to include in my project :)). After the comment icon started to appear, but i faced another problem (i think its related to web-animations-js). I couldnt solve yet.

when i clicked to comment icon;

Cannot assign to read only property 'target' of object '[object CustomEvent]'

[jackpope]

Hi @eyaylagul

Glad to hear you got the plugin running with Webpack. Jquery is indeed a peer dependency right now but is misrepresented as such - will fix in an upcoming version.

As for the error you're receiving, the API currently relies upon the videojs event system. In the new version of videojs, the event system requires a dom element target we can't hijack it as our API event emitter anymore. I opened an issue with videojs if you're curious about the details https://github.com/videojs/video.js/issues/6203

I believe the solution will be to include a lightweight event emitter within this plugin so that the API is self reliant. I have an upgrade branch going here and may have some time tomorrow to work on the event system: https://github.com/contently/videojs-annotation-comments/pull/49

For the time being, videojs v6 should work fine with the latest release of videojs-annotation-comments

[Alosies]

Thanks for this awesome plugin.

@eyaylagul I'm also trying to integrate the plugin in a Vuejs & Webpack environment. Were you able to integrate it successfully?

[eyaylagul]

@Alosies Hi, i'm using like that

package.json "video.js": "^6.2.0" "@contently/videojs-annotation-comments": "^1.1.4"

<template>
...
    <video
      ref="player"
      id="video-player"
      class="video-js vjs-default-skin vjs-16-9"
      data-setup='{"fluid": true}'
      controls
    >
        <source :src="src" type="video/mp4">
    </video>
....
</template>
<script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import AnnotationComments from '@contently/videojs-annotation-comments';
import '@contently/videojs-annotation-comments/src/css/annotations.scss';

export default {
...
    async mounted() {
          // Register annotationPlugin
         await videojs.registerPlugin('annotationComments', AnnotationComments(videojs));
          // bound video player to dom element
          this.player = await videojs(this.$refs.player, {});
          // add annotationPlugin with options to video element
          this.annotationPlugin = this.player.annotationComments(annotationPluginOptions);
     }
}
</script>

[Alosies]

@eyaylagul

Thanks a lot for the descriptive answer. It saved me a lot of time. And it worked.

For someone looking for a similar solution in future. I had to add jquery and reference it in the window object for the plugin to use.

So my mounted hook looks more like this.

async mounted() {
    // We import JQuery
    const $ = require("jquery");
    // We declare it globally
    window.$ = $;
    // Register annotationPlugin
    await videojs.registerPlugin(
      "annotationComments",
      AnnotationComments(videojs)
    );
    // bound video player to dom element
    this.player = await videojs(this.$refs.player, {});
    // add annotationPlugin with options to video element
    this.annotationPlugin = this.player.annotationComments(
      annotationPluginOptions
    );
  }

[jackpope]

I'm going to close this as it went in a few different directions. If anyone is still having an import issue as of v2.0.0, please re-open or create a new issue.

[omega1996]

I encountered an issue with the following library versions: vue: 3.2 (script setup, ts) video.js: 8.0.4 videojs-annotation-comments: 2.0.1

The error message that I received is "Uncaught TypeError: videojs.getPlugin is not a function". Async loading seems not to work

[omega1996]

I've tried without vue, just html with cdn <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script> and installed locally <script src="./node_modules/@contently/videojs-annotation-comments/build/videojs-annotation-comments.cjs.js"></script> vesions 1.1.4 and 2.0.1 gives the same result with this code snippet

<script>
      const player = videojs('my-video');
      const pluginOptions = {
          annotationsObjects: [],
          meta: { user_id: null, user_name: null },
          bindArrowKeys: true,
          showControls: true,
          showCommentList: true,
          showFullScreen: true,
          showMarkerShapeAndTooltips: true,
          internalCommenting: true,
          startInAnnotationMode: true
      };
      videojs.registerPlugin('annotationComments', AnnotationComments);
      const pluginInstance = player.annotationComments(pluginOptions);
 </script>

The error message that I received is "Uncaught TypeError: videojs.getPlugin is not a function".