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 pile 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?
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 pile 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?
- In your metronicapp.ts you are not importing the app. In App JS you could try changing the module.export to export default App. Or in the metronicapp.ts change the import to "import App from './metronic/global/scripts/app' " I'm new to this also, but that is what I would try. – Jason Allshorn Commented Dec 7, 2017 at 19:04
1 Answer
Reset to default 13webpack.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 plain 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');
}();