Uncaught TypeError: Cannot set property '[any AMD]' of undefined

问题

Example scrollmagic module, but it happens with others too. I suspect it is for Babel but not sure.

How can we reproduce this bug?

1. Git clone https://github.com/zurb/foundation-zurb-template projectname

2. Install:

   • npm install gsap --save-dev
   • bower install scrollmagic --save-dev

3. Add text line config.yml:

   • "node_modules/gsap/src/uncompressed/TweenMax.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/ScrollMagic.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators.js"
   • "bower_components/scrollmagic/scrollmagic/uncompressed/plugins/jquery.ScrollMagic.js"

4. npm start

What happened instead?

In console Google Chrome: Uncaught TypeError: Cannot set property 'ScrollMagic' of undefined

Google Chrome:

Firefox:

回答1:

I found the problem but not solve it. - 1 Answer of Stackoverflow

When using Babel 6 and babel-preset-es2015 (or Babel 5), Babel by default assumes that files it processes are ES6 modules. The thing that is causing you trouble is that in an ES6 module, this is undefined, whereas in the "script" case, this varies depending on the environment, like window in a browser script or exports in CommonJS code.

The problem is that I have files in ES6 and others not. Would have to separate files here? How?

// Combine JavaScript into one file
// In production, the file is minified
function javascript() {
  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .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'));
}

Why wrong? Explanation...

Change the file javascript.

Change this to undefined

Besides this:

} else if (typeof exports === 'object') {

}(this, function () {
    "use strict";

    var ScrollMagic = function () {

to

} else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {


})(undefined, function () {
    "use strict";

    var ScrollMagic = function ScrollMagic() {

Code fragment:

Before doing so:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory();
    } else {
        // Browser global
        root.ScrollMagic = factory();
    }
}(this, function () {
    "use strict";

    var ScrollMagic = function () {

After doing so:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
        // CommonJS
        module.exports = factory();
    } else {
        // Browser global
        root.ScrollMagic = factory();
    }
})(undefined, function () {
    "use strict";

    var ScrollMagic = function ScrollMagic() {

来源：https://stackoverflow.com/questions/40287100/uncaught-typeerror-cannot-set-property-any-amd-of-undefined