Can not load Web Viewer in my Next.js application

Hi, I am trying to use the HOOPS Web Viewer in my Next.js application. I have a created a HoopsViewer.js component, which looks like this:

import { useEffect } from "react";

const HoopsViewer = () => {
  useEffect(() => {
    // Ensure code runs only in the browser
    if (typeof window === "undefined") {

    const script = document.createElement("script");
    script.src = "/js/hoops/hoops_web_viewer.js";
    script.onload = () => initViewer();

    return () => {
  }, []);

  const initViewer = () => {
    // Check if the Communicator object is available globally
    if (Communicator) {
      const hwv = new Communicator.WebViewer({
        containerId: "viewer",
      console.log("hwv", hwv);

  return (
      <h3>Web Viewer Minimal Example</h3>
          width: "640px",
          height: "480px",
          position: "relative",
          outline: "1px solid black",

export default HoopsViewer;

In the public directory I have created a data folder in which I have pasted the microengine.scs file.
In the public directory I have also created a js/hoops/hoops_web_viewer.js file in which I have pasted the hoops_web_viewer.js file within the SDK’s directory structure.

I see only the box with the black border, but nothing is rendered inside it.

I also do not see a start function in my hwb object when I log it in the console.
What am I doing wrong?
Thanks in advance.

Hello @dayana,

Given the similarities between Next.js and React.js, our recommendation is to view a How-To article on using React with Communicator.


1 Like

Hi, Tino, thanks for your fast reply. The problem is that I have already tried the approach from the above video… It is not working for me. This is the code example:

import microengine from "../assets/microengine.scs";

export default class ViewerManager {
  createViewer(divId) {
    let viewer = new window.Communicator.WebViewer({
      containerId: divId,
      endpointUri: microengine,
    return viewer;

import React from "react";
import ViewerManager from "./ViewerManager";

export default class Hoops extends React.Component {
  constructor() {
    this._hwv = undefined;
    this._viewerManager = new ViewerManager();

  componentDidMount() {
    this._hwv = this._viewerManager.createViewer("canvas");

  render() {
    return (
      <div id="hoops-container">
        <div id="canvas"></div>

I have created also a basic html page with this code to test the functionality in a normal HTML page, but still not working:

<!DOCTYPE html>
<html xmlns="">
    <title>My Viewer</title>
    <style type="text/css">
      #viewer {
        width: 640px;
        height: 480px;
        position: relative;
        outline: 1px solid black;
    <script type="text/javascript">
      window.onload = () => {
        const hwv = new Communicator.WebViewer({
          containerId: 'viewer',
          endpointUri: '/data/microengine.scs',
    <h3>Web Viewer Minimal Example</h3>
    <div id="viewer"></div>

In the simple example below I have created a folder data where I defining microengine.scs, but not working…


Just to clarify for the React approach I have defined the .scs file in assets folder, and I am calling the HoopsViewer component, just showing the black border and no model inside them. Same for the simple HTML page.

Best regards,

Hello @dayana,

In addition to having hoops_web_viewer.js in your js/hoops public directory, please include the following files:

  • engine.wasm
  • engine-wasm.js


Hi, @tino

I have added the engine.wasm and engine-wasm.js files in hoops directory. Now I do not see any errors in console or failing resourses in network tab. The model is still not loading. Can I provide you any other additional data ?

Hello @dayana,

I’m able to run your HoopsViewer.js in my React app (created using Create React App) with very minimal changes:

In your last screenshot, can you confirm that microegine.scs is being served?



Also, are you seeing any messages in the console?

Yes, @tino , after adding the engine.wasm and engine-wasm.js in js/hoops directory and refreshing the page I have this error in the console:

@tino probably this screenshot can also be helpfull

It’s possible that the WASM file is not being served correctly. Perhaps you can check that the MIME type configuration is set (application/wasm).

Now it is working for me also withouth any additional changes. There was a mistake when copiying the .scs file. So I think there is no issue with the library and we can close the issue. Thank you for the support.

Best regards,

1 Like