votetake/vue-unity-webgl

The UnityLoader was not defined

AlicanBalik opened this issue · 5 comments

AlicanBalik commented

I am trying to run my WebGL application in Vue.js(version: 2.8.2). unityLoader attribute doesn't see the path somehow. I tried 3 different ways but all of them showed me the same error and I wonder if there is any solution.

The UnityLoader was not defined, please add the script tag to the base html and embed the UnityLoader.js file Unity exported or use "unityLoader" attribute for path to UnityLoader.js.

Things I have tried:

  1. Adding UnityLoader.js in HTML:
    <script type="javascript" src="../assets/games/game1/Build/UnityLoader.js"></script>

  2. Using require() function in Home.vue:
    require('../assets/games/game1/Build/UnityLoader.js');

  3. Adding the script tag in index.html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
  <script type="javascript" src="./assets/games/game1/Build/UnityLoader.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

After adding it in index.html, I got a different error:
GET http://localhost:9292/assets/games/game1/Build/UnityLoader.js net::ERR_ABORTED

Home.Vue with first try:

<template>
  <unity>
    <script type="javascript" src="../assets/games/game1/Build/UnityLoader.js"></script>
    <unity src="../assets/games/game1/Build/game1.json"
           width="1000" height="600" unityLoader="../assets/games/game1/Build/UnityLoader.js"></unity>
  </unity>
</template>
<script>
  import { Unity, Message } from 'vue-unity-webgl';

  require('../assets/games/game1/TemplateData/style.css');

  export default {
    components: {
      Unity,
    },
    name: 'homepage',
    data() {
      return {
        title: 'Homepage',
      };
    },
    methods: {
      onClick() {
        Message('object', 'method', 'param');
      },
    },
  };

</script>
<style scoped>
</style>
KSEIinnovations commented

@AlicanBalik @votetake Were there ever any solutions determined? My issue is the following and can't seem to get it resolved:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

AlicanBalik commented

No, there was no solution and it hasn't been solved.

I tried 3 different approaches as I remember when I was having this issue. If it gets solved, I will use this again.

votetake commented

@AlicanBalik is /assets/ allowed by webpack as public resource?

GET http://localhost:9292/assets/games/game1/Build/UnityLoader.js net::ERR_ABORTED

This problem in your configuration, not in VUE component

ishwara-bhat commented

I had similar issue with Webpack+angular. I had to add the src .js file path in the top-level index.html

<script src="../../assets/Built-WebGL/Build/UnityLoader.js"></script> <script src="../../assets/Built-WebGL/TemplateData/UnityProgress.js"></script>

Ideally the toolchain, webpack config etc should have taken care of this. I do not know if it solves the problem for you.

sknightq commented

@AlicanBalik @ishwara-bhat I had a similar issue, but I resolved it.
If you using vue-cli2.x, you should put the WebGL resources in the static folder.
if you using vue-cli3.x, you should put the WebGL resources in the public folder.
As above, webpack will not deal with these files and only copy files to the root directory of the web.
image
Of course, you can use the default template(public/index.html) without external scripts and set the props of unitywebgl:
image

  • 👍2
  • 👎1