Trouble With Webpack

[homerlex]

I'm trying to compile with webpack following the following example: https://github.com/kbumsik/opus-media-recorder#simple-javascript-example-webpack

I have also added the following to my webpack.config: https://github.com/kbumsik/opus-media-recorder/tree/master/example/webpack#webpackconfigjs

When I try to compile I get the following errors. Why is it trying to use "fs"?

ERROR in ./node_modules/opus-media-recorder/WebMOpusEncoder.js
Module not found: Error: Can't resolve 'fs' in '/home/project/my-project/node_modules/opus-media-recorder'
 @ ./node_modules/opus-media-recorder/WebMOpusEncoder.js 9:5995-6008
 @ ./node_modules/opus-media-recorder/encoderWorker.js

ERROR in ./node_modules/opus-media-recorder/OggOpusEncoder.js
Module not found: Error: Can't resolve 'fs' in '/home/project/my-project/node_modules/opus-media-recorder'
 @ ./node_modules/opus-media-recorder/OggOpusEncoder.js 9:5995-6008
 @ ./node_modules/opus-media-recorder/encoderWorker.js

[richard-llmnn]

@homerlex Hey, I think I found a working solution. Instead of importing .../encoderWorker import import EncoderWorker from '.../encoderWorker.umd The second part is to pass the MediaRecorder into the EncoderWorker. Long story short, here are my code:

// my imports
import OpusMediaRecorder from 'opus-media-recorder';
import EncoderWorker from 'worker-loader!opus-media-recorder/encoderWorker.umd';
import OggOpusWasm from 'opus-media-recorder/OggOpusEncoder.wasm';
import WebMOpusWasm from 'opus-media-recorder/WebMOpusEncoder.wasm';

window.MediaRecorder = OpusMediaRecorder;

// and then your function/method that have to use following code
  const media = await navigator.mediaDevices.getUserMedia({audio:true})
  const options = {
      bitsPerSecond: this.bitrate,
      mimeType: "audio/ogg;codecs=opus"
  }
  this.recorder = new MediaRecorder(media, options, {
      encoderWorkerFactory: _ => new EncoderWorker(window.MediaRecorder),
      OggOpusEncoderWasmPath: OggOpusWasm,
      WebMOpusEncoderWasmPath: WebMOpusWasm
  })

I hope I could help you :)

[homerlex]

Thanks @richard-llmnn - I will try your suggestion when I have the chance.

[kshart]

Another solution to the problem, add to webpack.config.js

  node: {
      fs: "empty"
  }

For nuxt2, add to nuxt.config.js

  build: {
    extend (config, context) {
      if (context.isClient) {
        config.node = {
          fs: 'empty'
        }
      }
    }
  }