Webpack ProvidePlugin global variable (Cannot find module)

Question

I'm pretty new to Webpack, but can't figure out why my ProvidePlugin call is not working as expected.

I have the following file:

App.js

var App = function() {
    getSomething: function(size) {}
}();

module.exports = App;

I want this 'App' variable to be globally accessible because other files use it like this:

Layout.js

var Layout = function () {
    App.getSomething('md');
}();

webpack.config.js

In webpack.config.js I have the following line:

new webpack.ProvidePlugin({ App: 'app' })

This is my entry:

entry: {
    'app': './angularApp/metronicapp.ts',
}

metronicapp.ts

import './metronic/global/scripts/app';

Where app is my app.js which is displayed above.

I get the following error in the browser: Cannot find module "app"

And when I compile webpack in the console: Module not found: Error: Can't resolve 'app'

I can't figure what I'm missing. Is my app.js not in the correct format? Why is App still not available globally?

Answer 1

webpack.config.js

ProvidePlugin needs the path to your global module App.js.

const path = require('path');
...
plugins: [
  new webpack.ProvidePlugin({
    App: path.resolve(__dirname, './path_to_App.js')
  })
]

global.d.ts

For Typescript not to complain about undefined constructs create global.d.ts

declare var App: any;

metronicapp.ts

No need to import ./metronic/global/scripts/app inside metronicapp.ts, webpack will resolve App on build.

App.getSomething('foo');

Layout.js

var Layout = function() {
  App.getSomething('md');
}();