Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught ReferenceError: FULLTILT is not defined #46

Open
thathurtabit opened this issue Sep 4, 2017 · 16 comments
Open

Uncaught ReferenceError: FULLTILT is not defined #46

thathurtabit opened this issue Sep 4, 2017 · 16 comments

Comments

@thathurtabit
Copy link

The README.md mentions that FullTilt is bundled with gyronorm.js but when running the page (using the default values) I'm getting the error:

"Uncaught ReferenceError: FULLTILT is not defined"

Sorry if I'm missing something obvious. Thanks.

@dorukeker
Copy link
Owner

Hello,

If I was given $1 every time I miss something obvious, I'd be a millionaire :)

Are you adding manually? or via AMD or Common JS?
Here is a direct copy/paste from README for manual adding

......

For production, add the minified complete version of gyronorm.js which is under the /dist folder.

<script src="<path_to_js_files>/gyronorm.complete.min.js"></script>

If you want to use the unminified version (for instance for development), then you need to add FullTilt manually.

<script src="<path_to_js_files>/fulltilt.min.js"></script>
<script src="<path_to_js_files>/gyronorm.js"></script>

.....

If you add gyronorm.complete.min.js , FULLTILT should come packaged with it.
Is that the case?

Cheers,
Doruk

@thathurtabit
Copy link
Author

Hey @dorukeker, thanks for the response.

I installed via npm:

$ npm install gyronorm --save-dev

This version of gyronorm.js is built on top of the FullTilt project which uses JavaScript Promises. You do not need to install both libraries. FullTilt is bundled with gyronorm.js

And I'm currently using: var GyroNorm = require('gyronorm'); to include / require

But I'm getting: Uncaught ReferenceError: FULLTILT is not defined

Is this down to a problem with the FULLTILT dependency?

@angularsen
Copy link

angularsen commented Sep 10, 2017

I run into the same with webpack following this: #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');

@cthorner
Copy link

Fulltilt is no longer MIT license ( adtile/Full-Tilt#19 ). It looks like Adtile is protecting their patents by making it proprietary under CC Non-Commercial License 4.0 ( http://creativecommons.org/licenses/by-nc/4.0/ ). Which makes this library unusable for commercial use. Also, I think the Adtile license should be mentioned here as well?

@dorukeker
Copy link
Owner

Hi there,
You can use what @angularsen mentioned to use the full version.

The full version of Gyronorm contains FullTilt version 0.5.3, which is MIT license.
They changed the license type after v0.6.0.

Since it is all MIT, do you stil think there is an issue? @cthorner

Cheers,
Doruk

@buesing
Copy link

buesing commented Oct 16, 2017

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!

@dorukeker
Copy link
Owner

@buesing and others I wont have time to update the module for the next couple of weeks. Is that possible some one from the list pics up and send a PR? I am more than glad to merge :)

@marcaaron
Copy link

marcaaron commented Feb 22, 2018

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?

This was referenced Apr 19, 2018
@IanAbildskou
Copy link

I'm in the same position as @marcaaron

@dorukeker
Copy link
Owner

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

I don't have any React experience. So can't really help you out with this unfortunately. Just to give you some context: I build this library years ago to use with an installation. Since then I am almost never working with JS. So not very up-to-date with the (relatively) new frameworks.

I keep this thread open and will try to find some one to help out.

@IanAbildskou
Copy link

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.

@rudin
Copy link

rudin commented Nov 22, 2018

Hi all,
This bug doesn't look React-specific to me. It states that FULLTILT is not defined. By looking at the source code it says: new FULLTILT(... but indeed: where is FULLTILT being defined? Is it a class that has been/should be globally exposed to window?

@dorukeker
Copy link
Owner

Hello All,

I had some feedback from others who have experience in React. Below I list what I understand from their feedbacks. Please note that I might not be using the correct terminology.

As far as i understand when you add a library via React, it searches for any dependency library in NPM. This specific version of FULLTILT is not available on NPM due to licence issues. Therefore react cannot load that version and gives an error.

So for now that is all the info I have. Gyronorm is using FULLTILT library for the maths and calculation of the values that come form the vanilla JS API. The best way would be to re-write that section and remove FULLTILT dependency completely. Though I wont be able to pick this up at least for the coming months.

Anyone up for the task? :-) PR's are always welcome.
Cheers,
Doruk

@ada-ada-ada-art
Copy link

ada-ada-ada-art commented Mar 28, 2019

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.

@IanAbildskou
Copy link

Thanks for the cool fix @jepster-dk !

I found another fix.

I just added the fulltilt.js file to my repo and imported it in my index.js file like:

import FULLTILT from './fulltilt.js';

This was enough to mount it to the window object and make it available for the gyronorm script.

@Imprasna
Copy link

Imprasna commented May 24, 2021

Uncaught ReferenceError: VanillaTilt is not defined
I am getting this error can someone help me get this fixed, when using cdn I get this error in my console and it doesn't work the tilt functionality

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants