Unity WebGL Build Won't Even Appear in Nuxt/Vue App - Could not find a declaration file for module 'unity-webgl'

Question

I am making a WebGL app that is supposed to work in Nuxt/Vue. I built the app in Unity Editor for WebGL and it works perfectly in Firefox when I open the index.html file. I tried to import the data into the view page video-game.vue. The code of this file is below:

<template>
  <v-layout column justify-center align-center>
    <v-row>
      <v-col>
        <h2>This is The Secret Authenticate Route</h2>
      </v-col>
    </v-row>

    <v-row style="margin-bottom: 20px">
      <v-col>
        <Unity :unity="unityContext" width="800px" height="600px" />
      </v-col>
    </v-row>
  </v-layout>
</template>

<script>
import UnityWebgl from 'unity-webgl'

const Unity = new UnityWebgl({
  loaderUrl: '~/Build/look-away-webGLbuild1-uncomp.loader.js',
  dataUrl: "~/Build/look-away-webGLbuild1-uncomp.data",
  frameworkUrl: "~/Build/look-away-webGLbuild1-uncomp.framework.js",
  codeUrl: "~/Build/look-away-webGLbuild1-uncomp.wasm"
})

export default {
  name: 'VideoGamePage',
  middleware: "login",
  components: {
    Unity: UnityWebgl.vueComponent
  },
  data() {
    return {
      unityContext: Unity,
      loading: true,
    };
  },

  created() {},

  methods: {},
};
</script>

<style scoped>
</style>

It didn't work, the page was blank:

I looked in my Web console and I found this error:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Nuxt>
         <VMain>
           <VApp>
             <DefaultLayout> at layouts/default.vue
               <Root>

Also when I run the app, before I even get to the affected page, I get this warning in my webconsole:

./pages/video-game.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/video-game.vue?vue&type=script&lang=js&) 22:16-26"export 'UnityWebgl' was not found in 'unity-webgl'./pages/video-game.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/video-game.vue?vue&type=script&lang=js&) 32:11-21"export 'UnityWebgl' was not found in 'unity-webgl'

I noticed this error in my vscode terminal when I hover over the import line for unity-webgl

Could not find a declaration file for module 'unity-webgl'. '/Users/<myusername>/path/to/app/appFrontend/node_modules/unity-webgl/dist/UnityWebgl.min.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/unity-webgl` if it exists or add a new declaration (.d.ts) file containing `declare module 'unity-webgl';`Vetur(7016)

Btw maybe it's worth noting that I'm using Google Chrome.

What's the problem? What is the proper way to display this Unity game in a Nuxt/Vue app? Keep in mind this works perfectly in the default index.html export.

When you `open the index.html`? You're not using `npm run dev`? Do you have a [repro]? It's highly unlikely that it's working on a browser and not the other. — kissu, Apr 01 '22 at 04:19
When I open index.html I'm not doing any commands. I'm just double clicking index.html and it opens in Firfox and plays. This is the code for the index.html file which Unity builds by defaulthttps://drive.google.com/file/d/1RHsjrkzVsWXp-AD6IUksYePuijFehy2D/view?usp=sharing . I will get back to you with a minimal reproducible sample. — ChristianOConnor, Apr 01 '22 at 04:25
You're not supposed to double click a file in modern frontend. You should use either Webpack, Vite or alike (with a server running). Also, how could you use `import UnityWebgl from 'unity-webgl'` in a non-NPM context? You do load something from a CDN (not recommended). I don't even see how this could work in Firefox tbh. How are you even using Nuxt here? — kissu, Apr 01 '22 at 04:32
This is a tetris demo game https://drive.google.com/file/d/1_oUK0ums3UAW7AmR4z3yKi6lkxbhhAGS/view?usp=sharing. It works perfectly if you just double click the `index.html` file and open it in Firefox. This is a link to a new basic nuxt/vue app I made that attempts to run this tetris game if you click the "VideoGamePage" option from the dropdown menu on the upper left: https://drive.google.com/file/d/1_t68lrClWQ33muGmNAMtj1XQr5bqBlSx/view?usp=sharing. I get the same web console errors as my original app. This is a minimal reproduction of the problem. — ChristianOConnor, Apr 01 '22 at 10:38
I will not click on some random zipped file. Please either post it on Github or host it on Codesandbox or alike. Also, the risky flags are here because you're not running an HTTP server hence why you should use Webpack. There is an issue still? Alright, let's start from working with Webpack tho, running the `index.html` will not do it while working with Nuxt. — kissu, Apr 01 '22 at 15:04

ChristianOConnor · Accepted Answer · 2022-04-02T00:25:41.367

The fix was to move the "Build" folder into "static." Don't forget to change the path of the game files in the UnityWebgl creation like this:

const Unity = new UnityWebgl({
  loaderUrl: '/Build/look-away-webGLbuild1-uncomp.loader.js',
  dataUrl: '/Build/look-away-webGLbuild1-uncomp.data',
  frameworkUrl: '/Build/look-away-webGLbuild1-uncomp.framework.js',
  codeUrl: '/Build/look-away-webGLbuild1-uncomp.wasm',
})

Also the developer that spotted this fix pointed out that if you don't change ssr: true, to ssr: false, in nuxt.config.js, the window parameter in the look-away-webGLbuild1-uncomp.loader.js will be underfined. This makes it so that when you refresh the page you get this error:

Unity WebGL Build Won't Even Appear in Nuxt/Vue App - Could not find a declaration file for module 'unity-webgl'

1 Answers1