Library crash on startup in AMD project

Hi, I have an AMD project (requirejs) with Vue.js 2.5…once that the umd file is loaded i see the foolowing error message:

vue-grid-layout.js?v=1.0.0.0:6756 Uncaught TypeError: Cannot read property 'component' of undefined
    at vue-grid-layout.js?v=1.0.0.0:6756
    at Array.forEach (<anonymous>)
    at Module.fb15 (vue-grid-layout.js?v=1.0.0.0:6755)
    at __webpack_require__ (vue-grid-layout.js?v=1.0.0.0:30)
    at vue-grid-layout.js?v=1.0.0.0:94
    at vue-grid-layout.js?v=1.0.0.0:97
    at Object.execCb (require.js:1696)
    at Module.check (require.js:883)
    at Module.enable (require.js:1176)
    at Module.init (require.js:788)

…seems that there is something wrong on load, requiring webpack anyway.

[Micene09]

I think i got it, setting the external dependency in that way (externals object), leaded to one of the deepest errors: the module name is not the same, it will change with the module system.

In your case, the module name for the root (global variable) is not vue, but Vue. For this reason, setting the externals object in that way is wrong.

But, i found the real solution to this (and future problems like this), just following the doc ->externals->object. As you can read, we can set a module name for each module system, so the right way to do this should be:

externals : {
    vue : {
      commonjs: 'vue', // the default commonjs module name
      amd: 'vue',  // required to make it work for AMD
      root: 'Vue' // the default global variable
    }
}
// maybe you can try to NOT override the commonjs and root values
// ...just because that are the default values:
externals : {
    vue : {
      amd: 'vue'
    }
}

Please, before revert and release, try this solution.

[reidcjk]

I think i got it, setting the external dependency in that way (externals object), leaded to one of the deepest errors: the module name is not the same, it will change with the module system.

In your case, the module name for the root (global variable) is not vue, but Vue. For this reason, setting the externals object in that way is wrong.

But, i found the real solution to this (and future problems like this), just following the doc ->externals->object. As you can read, we can set a module name for each module system, so the right way to do this should be:

externals : {
    vue : {
      commonjs: 'vue', // the default commonjs module name
      amd: 'vue',  // required to make it work for AMD
      root: 'Vue' // the default global variable
    }
}
// maybe you can try to NOT override the commonjs and root values
// ...just because that are the default values:
externals : {
    vue : {
      amd: 'vue'
    }
}

Please, before revert and release, try this solution.

Awesome! Quite helpful!