Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Dismiss Notice

Unity WebGL with ReactJS

Discussion in 'WebGL' started by mlit123, Dec 18, 2020.

  1. mlit123

    mlit123

    Joined:
    Mar 8, 2019
    Posts:
    4
    I'm having some issues trying to get my WebGL working with my React JS application. I get the error in the Web.loader.js file that says:

    "Parsing error: Deleting local variable in strict mode".

    This error occurs once halfway into the file, but it does not allow the build to launch and I'm not sure what to change to allow this to work. The build works fine in my NodeJS server, but whenever I move it to the front-end using React it does not.

    Has anybody else run into this issue? If so, were you able to come up with a solution to allow the build to run in ReactJS? I've been trying to figure this out for the past 2 weeks or so.
     

    Attached Files:

  2. lightmapper

    lightmapper

    Joined:
    Jan 14, 2015
    Posts:
    27
    The problem is your react application is using javascript's strict mode but the loader file is not compatible with strict mode. How are you including unity into your component? Is the loader a static asset or is it included with the other project files?
     
  3. mlit123

    mlit123

    Joined:
    Mar 8, 2019
    Posts:
    4
    I brought the entire build folder along with the Template Data into my react application and have been attempting to call it from the component using the react-unity-webgl npm package. Each time I try to do this I get syntax errors from the webloader. Is there a better way I should be doing this?
     

    Attached Files:

  4. lightmapper

    lightmapper

    Joined:
    Jan 14, 2015
    Posts:
    27
    I've never used that package before, but it looks it should work. Do you have a location in your project where you place static files? Similar to the public folder in create react app: https://create-react-app.dev/docs/u...r/#adding-assets-outside-of-the-module-system . The build folder from Unity should to be outside the "module system"(lingo from the create react app link). The purpose would be so your bundler doesn't pick up the loader thinking its an application file.
     
  5. mlit123

    mlit123

    Joined:
    Mar 8, 2019
    Posts:
    4
    Thank you for that information, I didn't realize this needed to be in the public folder. I do have a new error however, so I'm assuming something else still needs to be adjusted for this to work with react. I get the error:

    "Something went wrong while mouting the UnityInstance TypeError: window.createUnityInstance is not a function".

    I've been going through the npm package to figure out where this is occurring because it seems like something could be off in the package, but I just don't know enough about how it's supposed to be be set up. I attached where it looks like the error is happening in the npm package.
     

    Attached Files:

  6. mlit123

    mlit123

    Joined:
    Mar 8, 2019
    Posts:
    4
    Hi you can disregard my previous post, I just got it to work. Thanks for your help. Turns out the issue was that my files were not in the public folder, and also that I was also not loading them in the correct order in my component.