How to use it with webpack?

[franklin-huang]

I'm building a web app that need to encode the video from the webcam. My issue is that webpack cannot build it when I import ffmpeg from 'ffmpeg/ffmpeg-worker-mp4.js'. And eventually, it will run out of memory. Is there any guide that I can run it in react with webpack?

[JHartman5]

I passed --max-old-space-size=8192 to get it to build. I have other problems now, ;-) but this helped me get past this particular issue.

[franklin-huang]

@JHartman5 Thanks for your help.
We decided not to encode the raw data from webcam. Instead we are using MediaStream Recording API to have webm segments, which small enough to send back to the server.

[s-h-a-d-o-w]

@JHartman5
But doesn't that take forever to build? I waited for like 2 minutes and when it was still not done, I killed the process...
It's not really a great dev workflow when after each change, you have to wait minutes for the build process to finish?

[JHartman5]

No, it worked in the normal time for me.

[s-h-a-d-o-w]

Hm, maybe you coincidentally already had things set up in a way that it wasn't a problem?

Personally, I had to use this (for future reference in case someone else stumbles across this):

  module: {
    noParse: /ffmpeg/,
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: [/node_modules/, /ffmpeg/],
      use: [
        'babel-loader',
      ],
    },
  ...

... so that bundling worked. (Without it, webpack's node process would quickly balloon into using gigs of RAM)
Oh yeah - I don't have ffmpeg in my node_modules because... I tried to get Webstorm not to crash because of trying to index the file. So I copied it out of there and excluded only my ffmpeg directory in Webstorm's project window. Which... I thought would keep it from indexing and thus crashing - didn't work. Using VS Code now.

And in my dev environment config this...

new webpack.EvalSourceMapDevToolPlugin({
      exclude: /ffmpeg/
    })

... to prevent the file from ballooning up to ~35 MB.

[Shrekie]

@s-h-a-d-o-w You are amazing thanks

[JerryCjr]

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    noParse: /ffmpeg/,
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: [/node_modules/, /ffmpeg/],
      use: [
        'babel-loader',
      ],
    }]
  }
};

This is my configuration of webpack. And this error occurs when build.

ERROR in bundle.js from Terser
Import statement may only appear at top level [bundle.js:91,0]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! demo5@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the demo5@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chengjinrui/.npm/_logs/2019-08-02T12_00_30_302Z-debug.log

[JerryCjr]

@s-h-a-d-o-w

[florian-milky]

It's important to exclude it from the minification if you have that otherwise your build time will skyrocket