Webpack inter-library dependency as in requireJS.config.shim

Question

I am converting a grunt + requireJS build process to webpack. We have something like this:

require.config({
  shim:{
    'popover': {
        deps: ['tooltip']
      },
    'tooltip': {
      deps: ['jquery']
    }
  }    
})

Where we are specifically saying that tooltip depends on jquery so load jquery first. Popover depends on tooltip so load tooltip beforehand.

How do I translate this configuration into webpack 4 ? I've searched through the web trying to see if there are anything similar enough. Webpack's shimming doesn't do inter-library dependency. I don't see anything in the documentation too ...which surprised me much.

I have find articles (https://gist.github.com/xjamundx/b1c800e9282e16a6a18e) that suggest of use import-loader to achieve such effect. So my config is like this:

    module:{
        strictExportPresence:true,
        rules:[
            { parser: { requireEnsure: false } },
            { oneOf:[...bunch of stuffs for different file types] },
            { test : /tooltip/, loader: 'imports-loader?$=jquery' },
            { test : /popover/, loader: 'imports-loader?tooltip' }
        ]

also have the appropriate aliases in config set up.

the error I am getting it the browser is Constructor undefined on line "Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype ..." so tooltip library isn't being loaded before popover is. I also don't see any new code added by webpack, which I think this could be my first problem since imports-loader supposedly add the specified library into popover module right ?

I am exactly seeing what's wrong with my approach anymore and exhausted a lot of resources online. I am sure someone had to deal with this type of problem before, please shade some light for me. Thanks!

Danylo Rosiichuk · Accepted Answer · 2018-11-26 21:09:15Z

1

You should provide tooltip and popover in resolve.alias section:

resolve: {
    alias: {
        "jquery": "lib/jquery-x.x.x",
        "tooltip": "lib/tooltip-x.x.x",
        "popover": "lib/popover-x.x.x"
    }           
}

Otherwise webpack won't be able to resolve modules to shim by imports-loader. Also, please note that you misspelled imports-loader in your configuration.

answered Nov 26, 2018 at 21:09

Danylo Rosiichuk

2191 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kevin Over a year ago

Thanks, I've rectified with your suggestions, but it's still failing :(. Post updated.

Danylo Rosiichuk Over a year ago

Could you please change the tooltip rule loader value to exports-loader?tooltip!imports-loader?$=jquery and let me know if it helped. Another suggestion is to use expose-loader and do 'expose-loader?tooltip!imports-loader?this=>window' (see npmjs.com/package/expose-loader for details)

kevin Over a year ago

Hey buddy, thanks for giving me feedbacks. I've solved my problem ... I think. the first problem was I shouldn't have single quotation in test : '/popover/' . The second was that the short hand notation for the loaders are deprecated in webpack 4 ... so I changed to use : [loader : LOADER, options: OPTIONS]. Third I use expose-loader instead of export-loader. Thanks for suggestions!

Collectives™ on Stack Overflow

Webpack inter-library dependency as in requireJS.config.shim

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related