webpack jplayer: Cannot set property jplayer of undefined

Question

While bundling js files using webpack, the library jplayer also gets bundled in the bundle.js file. But when the webpage loads on browser, it shows an error on console that cannot set property jplayer of undefined. I am confused about the error that is it due to webpack or is there a bug in jplayer library. Help is super ultra highly appreciated.

jplayer.js

(function (root, factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory); // jQuery Switch
    // define(['zepto'], factory); // Zepto Switch
} else if (typeof exports === 'object') {
    // Node/CommonJS
    factory(require('jquery')); // jQuery Switch
    //factory(require('zepto')); // Zepto Switch
} else {
    // Browser globals
    if(root.jQuery) { // Use jQuery if available
        factory(root.jQuery);
    } else { // Otherwise, use Zepto
        factory(root.Zepto);
    }
}
}(this, function ($, undefined) {

// Adapted from jquery.ui.widget.js (1.8.7): $.widget.bridge - Tweaked $.data(this,XYZ) to $(this).data(XYZ) for Zepto
$.fn.jPlayer = function( options ) {    //cannot set property jplayer error is mapped here
    var name = "jPlayer";
    var isMethodCall = typeof options === "string",
        args = Array.prototype.slice.call( arguments, 1 ),
        returnValue = this;

    // allow multiple hashes to be passed on init
    options = !isMethodCall && args.length ?
        $.extend.apply( null, [ true, options ].concat(args) ) :
        options;

Answer 1

I meent the same situation today, after I rewrited my webpack config. As lazy as me, I use the same webpack.config.json in both webpack-dev-server and webpack.

The problem on me happend on when I split my project like this:

// output for js
output: {
    path: path.join(__dirname + '/build'),
    filename: './res/js/[name]_[hash:10].js'
},

//output for html
var pages = getEntry(['./home/en/*.html','./home/cn/*.html'],'home/');
for (var chunkname in pages) {
    var conf = {
        filename: path.join(path.dirname(pages[chunkname]).replace('home/','build/'),path.basename(pages[chunkname])),
        template: pages[chunkname],
        favicon: './img/favicon.ico',
        inject: true,
        hash: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true
        },
        chunks: ['vendor','css/[name].css', chunkname]
    };
    plugins.push(new HtmlWebpackPlugin(conf));

Then all JS went wrong, console told me with the same error. I checked the function of _webpack_require_ , and found all the map number is wrong with what it should be.

Then I checked webpack_dev_server's log, and found this:

               ..\build\en\aboutus-company.html    11.3 kB          [emitted]  
              ..\build\en\aboutus-news.html    6.26 kB          [emitted]  
           ..\build\en\aboutus-privacy.html    8.58 kB          [emitted]  
           ..\build\en\aboutus-service.html    10.7 kB          [emitted]  
                     ..\build\en\index.html    10.9 kB          [emitted]  
              ..\build\en\monetization.html    6.63 kB          [emitted]  
             ..\build\en\news-161017-1.html    7.76 kB          [emitted]  
             ..\build\en\news-161017-2.html    8.71 kB          [emitted]  
             ..\build\en\news-161017-3.html     9.9 kB          [emitted]  
                     ..\build\en\owner.html     5.9 kB          [emitted]  
                       ..\build\en\sdk.html    5.29 kB          [emitted]  
            ..\build\en\successstories.html    7.72 kB          [emitted]  
           ..\build\cn\aboutus-company.html    11.3 kB          [emitted]  
              ..\build\cn\aboutus-news.html    6.26 kB          [emitted]  
           ..\build\cn\aboutus-privacy.html    8.58 kB          [emitted]  
           ..\build\cn\aboutus-service.html    10.7 kB          [emitted]  
                     ..\build\cn\index.html    10.9 kB          [emitted]  
              ..\build\cn\monetization.html    6.63 kB          [emitted]  
             ..\build\cn\news-161017-1.html    7.76 kB          [emitted]  
             ..\build\cn\news-161017-2.html    8.71 kB          [emitted]  
             ..\build\cn\news-161017-3.html     9.9 kB          [emitted]  
                     ..\build\cn\owner.html     5.9 kB          [emitted]  
                       ..\build\cn\sdk.html    5.29 kB          [emitted]  
            ..\build\cn\successstories.html    7.72 kB          [emitted]  

It emitted files into the sub-folder. When I try this path, all things went ok.