vasturiano/3d-force-graph-vr

import ForceGraphVR in js module gives multiple instances of Three.js imported and A-frame <script>in head warnings

Closed this issue · 2 comments

Describe the bug
Running the 'basic' example modified only to move the JavaScript code to a separate ES6 module file, and importing ForceGraphVR from '3d-force-graph-vr', gives warnings:

WebXR emulator extension overrides native WebXR API with polyfill.
A-Frame:warn Put the A-Frame <script> tag in the <head> of the HTML *before* the scene to ensure everything for A-Frame is properly registered before they are used from HTML. 
A-Frame Version: 1.3.0 (Date 2022-02-04, Commit #cc3516ce)
THREE Version (https://github.com/supermedium/three.js): ^0.137.0
WebVR Polyfill Version: ^0.10.12
WARNING: Multiple instances of Three.js being imported.
core:schema:warn Unknown property `model` for component/system `generic-tracked-controller-controls`. 
core:schema:warn Unknown property `model` for component/system `generic-tracked-controller-controls`. 

To Reproduce
Bundle and run:

<head>
  <style> body { margin: 0; } </style>
</head>
<body>
  <div id="3d-graph"></div>
  <script src="./index.js" type="module"></script>
</body>

with

import ForceGraphVR from '3d-force-graph-vr';
// Random tree
    const N = 300;
    const gData = {
      nodes: [...Array(N).keys()].map(i => ({ id: i })),
      links: [...Array(N).keys()]
        .filter(id => id)
        .map(id => ({
          source: id,
          target: Math.round(Math.random() * (id-1))
        }))
    };

    const Graph = ForceGraphVR()
      (document.getElementById('3d-graph'))
        .graphData(gData);

and look at the DevTools console.
Expected behavior
No warnings

Desktop (please complete the following information):

  • OS: MacOs 12.2
  • Browser Chrome with WebXR API Emulator extension
  • Version 98

Additional context
Same behaviour using Firefox with emulator

@micrology thanks for reaching out.

All but one of these warnings are currently inevitable and shouldn't cause any ill side effects besides the message in the console. Let's see:

core:schema:warn Unknown property `model` for component/system `generic-tracked-controller-controls`.

This is a "feature" of Aframe's laser controls, which this component makes use of to handle controller interactions. You'll see it in every piece of code that uses those controls and it's probably just a mismatch in the Aframe source code. Slightly annoying but should be harmless.

WARNING: Multiple instances of Three.js being imported.

This has to do with the fact that Aframe itself packs a whole custom version of ThreeJS inside it. And ThreeJS has an internal check to inform you that there are multiple instances of it imported to the apps dependency tree. It's also unavoidable due to the way it's setup, but as mentioned should be only an informational message.

A-Frame:warn Put the A-Frame <script> tag in the <head> of the HTML *before* the scene to ensure everything for A-Frame is properly registered before they are used from HTML. 

This is the one that can be prevented. You simply need to move the script tag from <body> to <head>, as it is in the example:

<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/3d-force-graph-vr"></script>

All other messages should be informational only, added by deeper dependencies of this module, mainly Aframe and ThreeJS.

Thank you @vasturiano - that is all very reassuring - and thanks also for the hint about moving the script tag.