ERROR in reactPlayerDailyMotion.js from Terser

[IgnusG]

Current Behavior

Building with webpack results in error messages:

    ERROR in reactPlayerDailyMotion.js from Terser
    Unexpected token: punc (:) [reactPlayerDailyMotion.js:3,9]

    ERROR in reactPlayerFacebook.js from Terser
    Unexpected token: punc (:) [reactPlayerFacebook.js:3,9]

    ERROR in reactPlayerFilePlayer.js from Terser
    Unexpected token: punc (:) [reactPlayerFilePlayer.js:3,9]

    ERROR in reactPlayerMixcloud.js from Terser
    Unexpected token: punc (:) [reactPlayerMixcloud.js:3,9]

    ERROR in reactPlayerSoundCloud.js from Terser
    Unexpected token: punc (:) [reactPlayerSoundCloud.js:3,8]

    ERROR in reactPlayerStreamable.js from Terser
    Unexpected token: punc (:) [reactPlayerStreamable.js:3,9]

    ERROR in reactPlayerTwitch.js from Terser
    Unexpected token: punc (:) [reactPlayerTwitch.js:3,9]

    ERROR in reactPlayerVidyard.js from Terser
    Unexpected token: punc (:) [reactPlayerVidyard.js:3,9]

    ERROR in reactPlayerVimeo.js from Terser
    Unexpected token: punc (:) [reactPlayerVimeo.js:3,9]

    ERROR in reactPlayerWistia.js from Terser
    Unexpected token: punc (:) [reactPlayerWistia.js:3,9]

    ERROR in reactPlayerYouTube.js from Terser
    Unexpected token: punc (:) [reactPlayerYouTube.js:3,8]

    ERROR in 12.js from Terser
    Unexpected token: punc (:) [12.js:3,8]

Expected Behavior

Compile

Steps to Reproduce

1. I've installed the new 2.1.1 version (2.0.1 works)
2. Imported ReactPlayer the same way as in example (I don't use any advanced features and let ReactPlayer do all the heavy lifting

import ReactPlayer from 'react-player';

export function VideoPlayer({
  url,
  volume,
  onPlayerStartsPlaying,
}) {

  return (
    <div class="fixed">
      <ReactPlayer
        width="100%"
        height="100%"
        url={url}
        playing
        volume={volume}
        onStart={onPlayerStartsPlaying}
      />
    </div>
  );
}

Environment

No bundle output so no browser or url passed in for testing
webpack: 4.42.1
react-player: 2.1.1

[cookpete]

Try setting ecma: 8 in your terser options – webpack-contrib/terser-webpack-plugin#114 (comment)

[IgnusG]

I've configured the terser-webpack-plugin like this:

  optimization: {
    minimizer: [
      new TerserPlugin({
        include: /\/node_modules\/react-player/,
        terserOptions: {
          ecma: 8
        }
      })
    ]
  },

This worked. Thank you for the tip @cookpete!
Maybe we could include this in the docs for usage in webpack?

[IgnusG]

Realized my bundle size exploded and that the include I configured actually disables terser for everything. Removing it enables minification but setting the terser ecma option still fails with react-player.

[cookpete]

Updating the library to use import() statements seems to have caused more problems than it has solved. I'm tempted to ditch the lazy loading players and bring back single player imports once again.

[cookpete]

@IgnusG Does turning off code splitting fix things? Something like:

  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ]

in your webpack config. I understand it's not desirable but would be good to know if it helps.

[IgnusG]

@IgnusG Does turning off code splitting fix things? Something like:

  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    })
  ]

in your webpack config. I understand it's not desirable but would be good to know if it helps.

Interesting. That does solve the issue. The output is properly minified and react-player is included correctly in the bundle.

[cookpete]

So it's something to do with Terser trying to parse the individual chunks from the dynamically imported players.

I'm trying to figure out what to do about this. I may have to bring back single player imports like import YouTubePlayer from 'react-player/YouTube'

[IgnusG]

For me the dynamic imports "worked" in version 2.0.1 but broke after updating to 2.1.0.
I think this #886 is what's causing terser to trip up.

Oh - #886 (comment)

[cookpete]

Yeah, 2.1.0 tried to "fix" lazy loaded players by no longer transforming import() statements into require() statements (which rendered lazy loading useless). Unfortunately it breaks for any build pipeline that doesn't support import() statements or the chunks they produce (like yours, or this one).

I'm going to release 2.2.0 shortly that reverts the main react-player import to how things were in 2.0.1, which should fix most problems for most users. Then, if your build system supports import() statements you can import from react-player/lazy.

[cookpete]

You should not have this issue in 2.2.0. The lazy loading version with import() statements is now opt-in and imported using react-player/lazy.