Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith') at K (amazon-ivs-wasmworker.min.js:208:1)

[kirtesh-airmeet]

Describe the bug After adding the webpack config changes for wasm files, I'm facing the reading startWith of undefined issue as shown in the below screenshot. I'm integrating it with the native HTML5 video element.

To Reproduce Setup on my end https://codesandbox.io/s/ivs-player-6dfhvg?file=/src/IVSPlayer.js:2486-2494

Screenshots

Desktop (please complete the following information):

• OS: [Mac OS]
• Browser [Chrome, Safari, firefox]
• Version [NA]

Please let me know the steps to make it work. I don't want to use the CDN.

[kirtesh-airmeet]

Please share if there is any update.

[johnBartos]

Taking a look, thanks for bringing this up!

[johnBartos]

This isn't an issue inside our SDK - we don't use startsWith anywhere in our codebase. The error is thrown from Emscripten, the library we use to load WASM. I'm guessing that the WASM asset isn't loading correctly. I don't see a Webpack config in your Codesandbox - can you post that please?

[deepakplay]

You need to import amazon-ivs-wasmworker.min.js and a amazon-ivs-wasmworker.min.wasm file as uncompiled versions using file-loader, you need to add a rule to your Webpack configuration. https://github.com/aws-samples/amazon-ivs-player-web-sample/blob/master/webpack.config.js

The following example shows how to do this for the Amazon IVS player:

{
  test: /[\/\\]amazon-ivs-player[\/\\].*dist[\/\\]assets[\/\\]/,
  loader: 'file-loader',
  type: 'javascript/auto',
  options: {
    name: '[name].[ext]',
  },
},

Note that when packaging the IVS player into an react app, you must import the following assets via URL:

amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.wasm amazon-ivs-player/dist/assets/amazon-ivs-wasmworker.min.js These assets must not be re-compiled during packaging and should be imported as-is, untranspiled.

If you're using a React app with react-scripts the webpack.config.js is not loaded by default, you have three options:

1. Copy those files to your react public folder and define the path that file in your code(Recommended):

{
  wasmWorker: createAbsolutePath('/pathtoyour/amazon-ivs-wasmworker.min.js'),
  wasmBinary: createAbsolutePath('/pathtoyour/amazon-ivs-wasmworker.min.wasm'),
}

2. Use react-app-rewired and customize-cra to override the webpack.config.js. To do this, create a config-overrides.js file in the root of your project with the following content:

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /[\/\\]amazon-ivs-player[\/\\].*dist[\/\\]assets[\/\\]/,
    loader: 'file-loader',
    type: 'javascript/auto',
    options: {
      name: '[name].[ext]',
    },
  }),
);

3. Eject your React app and add your rule to webpack.config.js.(not recommended)

[kirtesh-airmeet]

Hi @johnBartos, Sorry, I Can't share the webpack config file. I'm using the same config shared by @deepakplay above to process the IVS wasm files. which is successfully generating the build but when I'm using the IVS player component to view streaming. I'm getting the previously mentioned startsWith error.

Please let me know if there is any other workaround for it.

[oats7777]

Hi @kirtesh-airmeet Have you tried running file-loader on the JS file before executing babel-loader and others? In my case, this method solved the issue