Webpack module dependency recognition failure "$(...).raty is not a function"

Question

I can't for the life of me figure this one out.

I am use the raty() plugin but I am getting the console error "TypeError: $(...).raty is not a function".

In my webpack.config.js: -

entry: {
    app: [
        srcFolder + '/index.js',
        jsSource + '/popper/popper.js',
        jsSource + '/bootstrap/index.js',
        ratySource,
        srcFolder + '/css/main.scss'
    ],
},

plugins: [
        new webpack.ProvidePlugin({
        $: path.resolve(__dirname, jQuerySource),
        jQuery: path.resolve(__dirname, jQuerySource),
        "window.jQuery": path.resolve(__dirname, jQuerySource),
        Popper: path.resolve(__dirname, popperSource),
        raty: path.resolve(__dirname, ratySource),
    }),
]

In my component: -

componentDidMount(){
        $('.star-rating').raty({
        half: true,
        readOnly: true,
        score: function() {
        return $(this).attr('data-score')
        },
    })
}

The odd thing is that Raty is being included by webpack at compilation yet (from what I can tell at least) the dependency graph does not seem to picking up Raty as a dependency and the Raty module is being compiled in app.js AFTER the component that call is it.

I am totally stuck with this one and I would very much appreciate any help anyone can offer me.