Search code examples
javascriptvue.jsnuxt.jsunity-webgl

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

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:
enter image description here

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.

Solution

  • 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:
    enter image description here