CODEWITHSUNDEEP
javascriptwebpackrequirejsfrontendwebpack-4
kevin
kevin

Reputation: 13

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

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!

Upvotes: 0

Views: 115

Answers (1)

Danylo Rosiichuk
Danylo Rosiichuk

Reputation: 219

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.

Upvotes: 1

Related Questions