gyronorm.js: Uncaught ReferenceError: FULLTILT is not defined

I managed to get it working in Vue.js (which uses Webpack to load modules, and should be similar to React or Angular). It is by no means a pretty solution, but it might get others to where they need to go.

Step 1

Download v0.5.3 of Fulltilt here, since it seems to be the latest version with a license, which allows commercial use.

Step 2

Remove line 17-22 and 1469-1473 from fulltilt.js, i.e.

(function ( window ) {

// Only initialize the FULLTILT API if it is not already attached to the DOM
if ( window.FULLTILT !== undefined && window.FULLTILT !== null ) {
    return;
}

and

////// Attach FULLTILT to root DOM element //////

window.FULLTILT = FULLTILT;

})( window );

Step 3

Attach this to the end of the file: export default FULLTILT;. Then save the file somewhere locally in your project. For me, that was assets/fulltilt.js.

Step 4

Change line 112 and 116 in lib/gyronorm.js to: var deviceOrientationPromise = new this.FULLTILT.getDeviceOrientation({ 'type': _orientationBase }).then(function(controller) {

and

var deviceMotionPromise = new this.FULLTILT.getDeviceMotion().then(function(controller) {

Step 5

Import FULLTILT and Gyronorm to your project, e.g. like this:

import FULLTILT from '../assets/fulltilt.js';
import GyroNorm from 'gyronorm';

Step 6

After constructing the Gyronorm object and before initializing it, add Fulltilt to the object like this:

var gn = new GyroNorm();
gn.FULLTILT = FULLTILT;

That’s it. You should be able to work with Gyronorm now.

I’m sure there is a smarter way, e.g. by passing Fulltilt to the constructor or, as @dorukeker suggests, to remove the Fulltilt dependency altogether.

I run into the same with webpack following this: https://github.com/dorukeker/gyronorm.js/pull/30

import GyroNorm from 'gyronorm';

    const gn = new GyroNorm();
    gn.init()
      .then(() => {
        gn.start(data => {
        });
      })
      .catch(e => {
      });

Will use the minified distributable meanwhile:

// import GyroNorm from 'gyronorm';
var GyroNorm = require('../libs/gyronorm.complete.js');

That’s cool. Gyronorm seems like a very useful tool. I might spend some time investigating the issue. I’ll keep you posted if I find anything.

Experiencing the same issue atm while trying to incorporate gyronorm into a React app.

import GyroNorm from 'gyronorm' results in: FULLTILT is not defined

const GyroNorm = require ('./gyronorm.complete.min.js') results in: 'define' is not defined & FULLTILT is not defined

simply adding it as a script to the index.html results in: Unexpected use of 'self', FULLTILT is not defined, & '_calibrationValues' is not defined

If I create a simple html site and do a basic script src to ‘gyronorm.complete.min.js’ everything works, but if I attempted to import via either of those two methods or even simply add it to my index.html page directly it breaks during compile. Anyone have any ideas?

I’m also having the same problem (FULLTILT is not defined). Using ES6 import after installing with npm. import GyroNorm from 'gyronorm';. When directly importing gyronorm.complete.js, I get other missing module errors. Also, I would have to manually update and manage the dependencies. Could you update the module so that it properly includes fulltilt or update the README so that it explains how exactly to use this module? Right now, doing what is stated in the README just doesn’t work. Thanks!