Definitelytyped: @types/video.js has no default export

[meikidd]

• [x] I tried using the @types/video.js package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• Authors: @vbortone @scleriot @SWBennett06 @IgelCampus @giofreitas @gjanblaszczyk

I got an error of "@types/video.js/index" has no default export.

Here is my Component file which is following the video.js offical tutorial for react

import * as React from 'react';
import videojs from 'video.js';

export interface Props {
  videoOptions: videojs.PlayerOptions;
}

export default class RecordPlayer extends React.Component<Props> {
  private player?: videojs.Player;
  private videoNode?: HTMLVideoElement;

  constructor(props: Props) {
    super(props);
    this.player = undefined;
    this.videoNode = undefined;
  }
  componentDidMount() {
    this.player = videojs(this.videoNode, this.props.videoOptions).ready(
      function onReady() {
        // console.log('onPlayerReady', this);
      },
    );
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  public render() {
    return (
      <div>
        <div data-vjs-player>
          <video
            ref={(node: HTMLVideoElement) => (this.videoNode = node)}
            className="video-js"
          />
        </div>
      </div>
    );
  }
}

I tried change

import videojs from 'video.js';

into

import * as videojs from 'video.js';

then I got another error

TypeError: __WEBPACK_IMPORTED_MODULE_1_video_js__ is not a function

versions

• typescript version v3.0.1
• @types/video.js version v7.2.1

[pluma]

Have you tried import videojs = require("video.js")? That's how default exports generally work for non-ES modules.

[meikidd]

Hi pluma, when change to import videojs = require("video.js"), it results in another error:

Import assignment cannot be used when targeting ECMAScript modules. 
Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

I have set module field to esnext:

compilerOptions: {
  module: "esnext",
}

since I have set module field to esnext in tsconfig.json file, in my understanding there is no need to import like this import videojs = require("video.js")

[meikidd]

I've created a minimal example for this issue -> https://github.com/meikidd/videojs-issue-28418

[aahmyu]

Any updates on this?

[meikidd]

Hi @aahmyu,
According to the official doc, set compilerOptions.module to "commonjs", then use import videojs = require("video.js") should work, but it doesn't on my side.

I tired all kinds of possibilities, by combining the following:

1. compilerOptions.module

   • "commonjs"
   • "esnext"

2. import

   • import videojs = require("video.js")
   • import videojs from "video.js"
   • import * as videojs from "video.js"

all these didn't work.

And also, I tried to fix it and planned to create a pull request, but my approach can't pass the test case.

Finally, I made a local copy in my project, and modified it into:

declare module 'video.js' {
  function videojs(...): videojs.Player;
  namespace videojs {...}

  export default videojs;
}

and then used /// <reference path="./videojs.d.ts"/> to link it.

[aahmyu]

@meikidd Thanks for your reply. I guess the only solution for now is copying it locally to the project like you did. I hope this get fixed soon because it is DefinitelyBroken for me.

[lewma]

Broken for me too. Last working version for me was v7.0.5. Anything after that does not work.

This is what I'm doing on anything after v7.0.5:
import * as videojs from 'video.js/dist/video.js';

[meikidd]

Thanks @lewma , your comment gave a clue, and then I track the history of this definition. I found this PR introduce a mistake #27515, and I saw @amitbeck also comment on that.

I'll create a new PR to fix this.

[thijstriemstra]

Also running into this issue, fix would be very welcome.

[meikidd]

I am closing it since #28776 has been merged