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 === "undef…

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 . Thanks, Tino

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 = …

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 Thanks, Tino

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 ? [image]

Hello @dayana , I’m able to run your HoopsViewer.js in my React app (created using Create React App ) with very minimal changes: [image] In your last screenshot, can you confirm that microegine.scs is being served? Thanks, Tino

@dayana , 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: [image]

@tino probably this screenshot can also be helpfull [image]

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).

Can not load Web Viewer in my Next.js application

Visualization Solutions HOOPS Visualize Web

dayana April 16, 2024, 2:50pm 11

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,
Dayana

Topic		Replies	Views
How-to: Communicator ESM with Next.js and TypeScript HOOPS Visualize Web code , sample , webviewer , learn , knowledge-base , faq , how-to	17	495	February 17, 2025
Web Viewer: Can only load the default model HOOPS Visualize Web webviewer	2	94	July 26, 2024
Cannot load scs file in the web viewer Help webviewer	2	951	March 1, 2022
How-To: Using React.js with HOOPS Communicator HOOPS Visualize Web code , webviewer , knowledge-base , how-to	4	1824	September 5, 2023
Failed to load scs file in the web viewer Help code , webviewer	14	1458	February 28, 2022

Can not load Web Viewer in my Next.js application

Related topics