"Can't resolve 'videojs'" error when building for production

[lfrost]

I have added the latest versions of Video.js and its YouTube plugin to an Ember 3.19 application.

yarn add --dev video.js
yarn add --dev videojs-youtube

It was working fine until I tried to do a production build (ember build -e production), when I get this error from ember-auto-import.

ERROR in ./node_modules/videojs-youtube/dist/Youtube.js
Module not found: Error: Can't resolve 'videojs' in '.../git/test-videojs-youtube/node_modules/videojs-youtube/dist'
 @ ./node_modules/videojs-youtube/dist/Youtube.js 32:4-34:6
 @ /tmp/broccoli-18605uM7OEtuWfsgR/cache-211-bundler/staging/app.js
 @ multi /tmp/broccoli-18605uM7OEtuWfsgR/cache-211-bundler/staging/l.js /tmp/broccoli-18605uM7OEtuWfsgR/cache-211-bundler/staging/app.js⠋ buildingcleaning up...
Build Error (Bundler)

webpack returned errors to ember-auto-import

I tried creating an empty Ember 3.19 application and adding nothing but these two modules, and a component to import them, and I get the same error. A complete error log is attached. One of the imports is "videojs", which the Ember application has no trouble finding.

If I just needed an alias, I would expect it to be needed for development and production. What is different about a production build that could cause this error?

Thanks. error.dump.acd7611f90cfcf580dd9cb3ba76fbad7.log

[lfrost]

I have this working with the following ember-auto-import configuration.

    const app = new EmberApp(defaults, {
        autoImport : {
            webpack : {
                externals : {
                    videojs : "video.js"
                }
            }
        }

If anyone has any insight into why this is not needed for a development build, I would be interested in hearing it. Thanks.

[ef4]

I think what's happening here is that something in videojs-youtube breaks if you transpile it with babel. It seems to break in such a way that webpack sees require('videojs') instead of require('video.js').

The reason it's different in production is probably this:

https://github.com/ember-cli/ember-new-output/blob/2ec0339c5e1bc7ac5f23efede3dd9929262a1926/config/targets.js#L13

If your app doesn't actually need to support IE11, you can take that out and then you won't have a problem in production.

Or you can tell ember-auto-import not to transpile this particular library:

let app = new EmberApp(defaults, {
    autoImport: {
      skipBabel: [
        {
          package: "videojs-youtube",
          semverRange: "*",
        },
      ],
    },
  });

The only downside of this is that if the authors of videojs-youtube use any new language features that don't work in all your supported browsers, they can break your app. That is why we allow the configuration rule to be limited to a particular semver range -- if you want to be careful you can set semverRange to something stricter than "*", and then the rule won't apply to future versions of the library without you manually reviewing them and updating the rule.

[GCheung55]

I filed a PR to address the issue in videojs-youtube: videojs/videojs-youtube#565