search

ten1seven / what-input

A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
https://ten1seven.github.io/what-input
MIT License
1.35k stars 89 forks source link

Uncaught TypeError: Cannot set property 'whatInput' of undefined #18

Closed tjventurini closed 8 years ago

tjventurini commented 8 years ago

Can't get it to work. Using Foundation 6 and Laravel.

When I open my Site, there is the error "Uncaught TypeError: Cannot set property 'whatInput' of undefined" what happens on line 9 of what-input.js so it should be the "root" variable, which is not available.

Am I doing something wrong or is the error elsewhere?

Thx! :)

ten1seven commented 8 years ago

Hi @venty, I'm not sure how Foundation is including/requiring What Input so let me ask a couple questions. Are you trying to use is in one of your scripts? Or is this just happening on its own? Is it working otherwise (if you inspect the page, do you see a data-whatinput="..." on the <body> after interacting with the page)?

I haven't experienced any issues with line 9 personally so just wanting to figure out how it's set up and how you're using it.

ten1seven commented 8 years ago

Hey @venty, wanted to follow up on this. Are you still having issues with What Input or did you get it resolved?

mhair commented 8 years ago

I am having the same issue with Foundation 6.2rc, but believe it was also happening with 6.1.2. It happens without any interaction, just on page reload. If data-whatinput is supposed to be set on the body, I believe it is browsersync which is over-writing it since this is what I see on the rendered page:

<body class="bg-img"><script type='text/javascript' id="__bs_script__">//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname)); //]]></script>

and there is no mention of whatinput anywhere.

The uncaught type error is refering to this line of the concatenated app.js file which includes what-input.js

if((typeof noGlobal==="undefined"?"undefined":_typeof(noGlobal))===strundefined){window.jQuery=window.$=jQuery;}return jQuery;});;(function(root,factory){if(typeof define==='function'&&define.amd){define([],function(){return factory();});}else if((typeof exports==="undefined"?"undefined":_typeof(exports))==='object'){module.exports=factory();}else {root.whatInput=factory();}})(undefined,function(){'use strict'; /*

ten1seven commented 8 years ago

Is there an example I can look at online? I'm not familiar with how Foundation is bundling the script but if it's not adding an attribute to the body it's failing before it really does anything. I doubt browserSync would blow away all attributes on the body.

mhair commented 8 years ago

No, this is on a local dev server. However, I just noticed that view source shows the body tag as above, but chrome dev tools inspect shows it like this.

<body class="bg-img" data-whatinput="mouse" id="dummybodyid" cz-shortcut-listen="true"

So that's about all I can tell you. If you want to quickly scaffold an example, you can:

npm install --global foundation-cli then... foundation new --framework sites --template zurb then... foundation watch

Of course, you may have to wade through squashing a few other bugs before you get to seeing the whatinput uncaught error, but possibly not. It might be worth it for you since whatinput is a dependency of foundation and will have a lot of use through it.

mhair commented 8 years ago

BTW, this is currently my only error in the console.

ten1seven commented 8 years ago

Oh, so data-whatinput="mouse" means what input is detecting and working. I just followed your steps to set up a test site and it worked smoothly (thanks). With the site up and running, my console is clear and What Input is working correctly.

2016-02-18 02 58 31 pm
mhair commented 8 years ago

Hmm. I'm wondering if it is because I've installed the beta. Could you try: npm install foundation-sites@beta

Per this post: https://github.com/zurb/foundation-sites/releases/tag/v6.2.0-rc.1

And then try it again?

ten1seven commented 8 years ago

Okay, I was finally able to reproduce this error! It has to do with the AMD wrapper throwing an error with Babel and ES2015. I need to dig into the best solution to support current and future syntax but I hope to have a fix for this in a day or two that I can publish and then send the fix to Zurb.

ten1seven commented 8 years ago

@mhair I'm working on a more sustainable fix, but for now you can replace the current version at bower_components/what-input/what-input.js with this: https://raw.githubusercontent.com/ten1seven/what-input/module-wrapper/what-input.js

mhair commented 8 years ago

Hey there, sorry for the late response, Had forgotten to watch my other email account for notifications.

Anyway, your temporary fix did make the prior uncaught exception go away. Now I'm getting a new one with no changes to code that I can think of, but I may be wrong on that. This time it is"Uncaught ReferenceError: require is not defined", however it is refering to line 16349 of my app.js (the foundation concatenated .js) . The line is var gulp = require('gulp');

No idea what that is about, but it is not likely related to your change. Thanks for pursuing the fix on this and following up with Zurb. I believe they've targeted the end of this week for release of 6.2.

ten1seven commented 8 years ago

Yep, What Input uses Gulp for the build precess but Foundation doesn't touch that so it must be something in the Beta. I'll keep this ticket open until I have a more permanent fix for the wrapper issue.

Preen commented 8 years ago

Its not in beta anymore, hoewever the error is still there. https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2

nicktc commented 8 years ago

Having the same issue :-).

ten1seven commented 8 years ago

Thanks for the update. I'm working on getting a fix out asap.

baffleinc commented 8 years ago

+1 for solution! breaking my foundation site too :)

ten1seven commented 8 years ago

Hey everyone, What Input is now at version 2.0.0! The only change is an API-breaking update that changes the module wrapper and fixes the issue with Foundation (and also removes the dependency on specific module loaders going forward).

I've submitted a pull request to Zurb here: https://github.com/zurb/foundation-sites/pull/8279 There's also a reported issue on this at the Foundation Sites repo here: https://github.com/zurb/foundation-sites/issues/8273

Since this issue is resolved on my end, I'm going to close this ticket and encourage you all to add your +1's to the issue over at foundation-sites to encourage them to merge in my pull request asap.

Thanks!

baffleinc commented 8 years ago

Legendary!

gakimball commented 8 years ago

Thanks for working this out, @ten1seven :)

To explain the issue in more detail, Babel's es2015 preset includes a module called modules-commonjs, which by default will convert any top-level reference to this to undefined. So in a typical UMD/AMD wrapper, where you might use this to refer to the Window, it gets converted to undefined instead.

You can avoid this by setting the allowTopLevelThis option to true in your Babel config. However, if you load Babel plugins as a preset, you can't configure individual plugins in the preset. So if you look at our template's .babelrc, it now lists individual plugins within the es2015 preset, just so that we can configure that one that we need to.

As for how Foundation uses what-input, because the library initializes itself, we don't touch it. Although with our current build process, we run everything through Babel, even third-party plugins, which is maybe problematic. There are ways in Gulp to avoid that, but it would make our Gulpfile more complicated.

ten1seven commented 8 years ago

Thanks for the explanation @gakimball!

FynnZW commented 7 years ago

To add to this, for anyone upgrading from Foundation 6.2 --> 6.3 that gets this error: If you are keeping your old gulpfile, because you made custom changes, you will have to add this ignore-statement to babel:

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
 return gulp.src(PATHS.javascript)
   .pipe($.sourcemaps.init())
   // ***new ignore-thing below***
   .pipe($.babel({ignore: ['what-input.js']}))
   .pipe($.concat('app.js'))
   .pipe($.if(PRODUCTION, $.uglify()
     .on('error', e => { console.log(e); })
   ))
   .pipe($.sourcemaps.write('.'))
   .pipe(gulp.dest(PATHS.dist + '/assets/js'))
}
ten1seven commented 7 years ago

Thanks for the tip @FynnZW!

so-rose commented 7 years ago

Thought I'd contribute my experiences - that ignore statement broke my project. I was getting a cryptic error, accompanied by watching my site not run any javascript at all, seemingly with no cause - reverting individual files that worked seconds ago would do nothing. Only reverting my git repository seemed to make it go away, once mysteriously triggered:

Uncaught TypeError: Cannot set property 'whatInput' of undefined
    at what-input.min.js:7
    at what-input.min.js:7

Finding this issue, I thought of adding the ignore statment to my gulpfile, just to try it. But Gulp's (from ZURB template) javascript function already looked like this:

function javascript() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel({ignore: ['what-input.js']})) // This line gives the cryptic error.
    .pipe($.concat('app.js'))
    .pipe($.if(PRODUCTION, $.uglify()
      .on('error', e => { console.log(e); })
    ))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

On a hunch I commented out the ignore line. The error disappeared, and the site then started working again!

Some info for context. My bower:

$ bower list
bower check-new     Checking for new versions of the project dependencies...
foundation-ssg#1.0.0 *project home*
├── angular#1.6.4 (latest is 1.6.6-build.5420+sha.af83c15)
├─┬ angular-route#1.6.4 (latest is 1.6.6-build.5420+sha.af83c15)
│ └── angular#1.6.4 (latest is 1.6.6-build.5420+sha.af83c15)
├─┬ foundation-sites#6.3.1 (latest is 6.4.1)
│ ├── jquery#2.2.4 (3.2.1 available)
│ └── what-input#4.3.0 incompatible with ~4.0.3 (4.0.6 available, latest is 4.3.0)
├── jquery#2.2.4 (latest is 3.2.1)
├─┬ magnific-popup#1.1.0
│ └── jquery#2.2.4 (3.2.1 available)
├─┬ motion-ui#1.2.2 (1.2.3 available)
│ └── jquery#2.2.4 (latest is 3.2.1)
└── what-input#4.3.0 extraneous

I'm on Debian unstable, using a rather old version of npm. The project is a modified ZURB template.

All of which makes chasing bugs hard, but due to the nature of having a fix that seems agnostic of the specifics of my project, perhaps this is relevant to somebody.

FynnZW commented 7 years ago

@so-rose, did you comment out this whole line? .pipe($.babel({ignore: ['what-input.js']}))

If so, then you deactivated Babel completely, which can lead to javascript errors in older browsers. It seems that you're importing what-input.min.js but ignoring what-input.js. Import the normal version (or ignore the minified), then I believe it should work.

so-rose commented 7 years ago

@FynnZW Huh. That works! Thank you so much! The line looks like this now: .pipe($.babel({ignore: ['what-input.js', 'what-input.min.js']}))

I was indeed commenting out the whole line, not knowing that Babel was being deactivated entirely.

I'll try a pull request to the ZURB template - saving a couple megabytes by using already minified assets during development is nice, and shouldn't break, I feel!

spasticninja commented 6 years ago

gulp-babel doesn't support ignore, is this vanilla babel?

ten1seven commented 6 years ago

@eladrin201 yes, this is using babel-core.