[Bug]: Screen share and PDF share images are not loading in next.js

[aldenquimby]

What happened?

When using HMSPrebuilt with next.js, the screenshare images do not load correctly:

Looking at the dom, the images are getting src="[object Object]":

I suspect there is a next.config.js webpack setting I could change to get this working? It would be ideal to either not need that, or have a section on https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart explaining what configuration is necessary

How can we reproduce the bug?

1. Create a next.js app: https://nextjs.org/learn-pages-router/basics/create-nextjs-app/setup
2. Install @100mslive/hms-video-store and @100mslive/roomkit-react
3. Create a page.tsx like this:

export default function Page() {
  return (
    <div style={{ height: '100vh' }}>
      <HMSPrebuilt roomCode="some_valid_room_code" />
    </div>
  );
}

What browsers are you seeing the problem on?

Chrome, Firefox, Safari, Microsoft Edge

[aldenquimby]

Here is the change I had to make to my next.config.js to get 100ms images loading:

  webpack(config) {
    // 100ms images do not work with next-image-loader, they need default webpack asset loader. See https://github.com/100mslive/web-sdks/issues/3438
    const imgLoaderIdx = config.module.rules.findIndex((r) => r.loader === 'next-image-loader');
    config.module.rules[imgLoaderIdx] = {
      oneOf: [
        {
          test: /node_modules\/@100mslive\/.*.(png|svg)$/,
          type: 'asset',
        },
        config.module.rules[imgLoaderIdx],
      ],
    };

    return config;
  },

An alternative that also worked, but comes with additional implications:

  images: {
    disableStaticImages: true,
  },
  webpack(config) {
    config.module.rules.push({
      test: /node_modules\/@100mslive\/.*.(png|svg)$/,
      type: 'asset',
    });
    return config;
  },

I am still not sure what it is about the 100ms images that makes this necessary. Any ideas on that?

Feel free to resolve this bug. It would be great to see something about this mentioned on the prebuilt docs given how widely used next.js is