Communication from React to Unity (Failed)

[yurivlm]

I'm trying to communicate from React to Unity. Basically, the user presses a button on the browser to load a scene in unity. I tried using the example in the documentation but it doesn't work. The function in unity is not called. Nothing happens.

MenuGame.cs ( Attached to GameObject "GameController or "Square")

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using System.Runtime.InteropServices;
public class MenuGame : MonoBehaviour
{
    
  public void SpawnEnemies (int amount) {
    Debug.Log ($"Spawning {amount} enemies!");
  }

Code React Component.js

import React, { useEffect, useState } from "react";
import Unity, { UnityContext } from "react-unity-webgl";
 
function Component() {

  const unityContext = new UnityContext({
    loaderUrl: `${process.env.PUBLIC_URL}/BuildWebGl11.loader.js`, 
    dataUrl: `${process.env.PUBLIC_URL}/BuildWebGl11.data`, 
    frameworkUrl: `${process.env.PUBLIC_URL}/BuildWebGl11.framework.js`, 
    codeUrl: `${process.env.PUBLIC_URL}/BuildWebGl11.wasm`, 
  });

  const [progression, setProgression] = useState(0);
  const [isGameOver, setIsGameOver] = useState(false);
  const [userName, setUserName] = useState("");
  const [score, setScore] = useState(0);

  useEffect(function () {
    unityContext.on("progress", function (progression) {
    setProgression(progression);
    });
  }, []);

  useEffect(function () {
    unityContext.on("GameOver", function (userName, score) {
      setIsGameOver(true);
      setUserName(userName);
      setScore(score);
    });
  }, []);

  
  function spawnEnemies() {
    unityContext.send("GameController", "SpawnEnemies", 100);
    console.log("Hi");
  }

  function spawnEnemies2() {
    unityContext.send("Square",  "SpawnEnemies", 20);
    console.log("Hi2");
  }
  

  return( 
    <div>
      <p>Loading {progression * 100} percent...</p>
      <button onClick={()=>spawnEnemies()}>Button 1</button>
      <button onClick={()=>spawnEnemies2()}>Button 2</button>
      <Unity unityContext={unityContext}  style={{
        height: 400,
        width: 800,
        border: "2px solid black",
        background: "grey",
      }} />
      {isGameOver === true && <p>{`Game Over! ${userName} ${score} points`}</p>}
    </div>
  );
}
export default Component;

Console:

react_devtools_backend.js:4049 Loading player data from data.unity3d

react_devtools_backend.js:4049 Initialize engine version: 2020.3.0f1 (c7b5465681fb)

react_devtools_backend.js:4049 Renderer: WebKit WebGL

react_devtools_backend.js:4049 Vendor:   WebKit

react_devtools_backend.js:4049 Version:  OpenGL ES 3.0 (WebGL 2.0 (OpenGL ES 3.0 Chromium))

react_devtools_backend.js:4049 GLES:     3

react_devtools_backend.js:4049  EXT_color_buffer_float GL_EXT_color_buffer_float EXT_color_buffer_half_float GL_EXT_color_buffer_half_float EXT_disjoint_timer_query_webgl2 GL_EXT_disjoint_timer_query_webgl2 EXT_float_blend GL_EXT_float_blend EXT_texture_compression_bptc GL_EXT_texture_compression_bptc EXT_texture_compression_rgtc GL_EXT_texture_compression_rgtc EXT_texture_filter_anisotropic GL_EXT_texture_filter_anisotropic EXT_texture_norm16 GL_EXT_texture_norm16 KHR_parallel_shader_compile GL_KHR_parallel_shader_compile OES_texture_float_linear GL_OES_texture_float_linear WEBGL_compressed_texture_s3tc GL_WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb GL_WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info GL_WEBGL_debug_renderer_info WEBGL_debug_shaders GL_WEBGL_debug_shaders WEBGL_lose_context GL_WEBGL_lose_context WEBGL_multi_draw GL_WEBGL_multi_draw OVR_multiview2 GL_OVR_multiview2

react_devtools_backend.js:4049 OPENGL LOG: Creating OpenGL ES 3.0 graphics device ; Context level  <OpenGL ES 3.0> ; Context handle 25484792

react_devtools_backend.js:4049 UnloadTime: 2.500000 ms

react_devtools_backend.js:4049 Input Manager initialize...

react_devtools_backend.js:4049 Hi2
react_devtools_backend.js:4049 Hi
react_devtools_backend.js:4049 Hi2

[jeffreylanters]

Hi, try creating your Unity Context outside of your component. A rerender may cause the reference to your Unity instance to get lost.