Webpack ProviderPlugin not working while pre-rendering

[jmezach]

I'm not quite sure if this is the right place since I'm still trying to grasp how it all works, but I'm having trouble getting an Angular module to work that uses jQuery. I get the following error during server side pre-rendering:

Exception: Call to Node module failed with error: ReferenceError: jQuery is not defined
at ModalInstance.init (/Users/jmezach/Projects/blog-engine/node_modules/ng2-bs3-modal/components/modal-instance.js:50:23)
at new ModalInstance (/Users/jmezach/Projects/blog-engine/node_modules/ng2-bs3-modal/components/modal-instance.js:12:14)
at new ModalComponent (/Users/jmezach/Projects/blog-engine/node_modules/ng2-bs3-modal/components/modal.js:17:25)
at AppView._View_PostsComponent1.createInternal (PostsComponent.ngfactory.js:158:31)
at AppView.create (/Users/jmezach/Projects/blog-engine/node_modules/@angular/core/bundles/core.umd.js:9323:25)
at TemplateRef_.createEmbeddedView (/Users/jmezach/Projects/blog-engine/node_modules/@angular/core/bundles/core.umd.js:7424:18)
at ViewContainerRef_.createEmbeddedView (/Users/jmezach/Projects/blog-engine/node_modules/@angular/core/bundles/core.umd.js:5216:39)
at /Users/jmezach/Projects/blog-engine/node_modules/@angular/common/bundles/common.umd.js:1543:53
at DefaultIterableDiffer.forEachOperation (/Users/jmezach/Projects/blog-engine/node_modules/@angular/core/bundles/core.umd.js:3744:21)
at NgFor._applyChanges (/Users/jmezach/Projects/blog-engine/node_modules/@angular/common/bundles/common.umd.js:1541:21)

I had this problem on the client side as well when I first added the ng2-bs3-modal module to my app, but I fixed that by adding the following to my webpack.config.js:

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })

This was already present inside webpack.config.vendor.js, but not in webpack.config.js. It works fine on the client side of things right now, but while pre-rendering I'm getting the error above. Its almost as if it uses a different configuration, but its my understanding that both server side pre-rendering and client side should be using the same webpack configuration.

I've also tried debugging this (as described in #202), but I think all the webpack bootstrapping and configuration is already done once I get the debugger attached. Modifying a file would probably trigger it, but after modifying a file the node instance doesn't restart because the debugging port is already in use (as also mentioned in that issue).

Any help with this would be greatly appreciated. So far I'm loving the developer experience these tools provide.

[MarkPieszak]

This is due to Angular Universals prerendering, and things such as window and jQuery not being available on the server side. You can follow angular/universal#534 as we try to make these things available or at the very least ignored on the server side to prevent errors.

For now you can remove the asp-prerender attribute on the Index View to disable server side rendering if you need these libraries to work for now.

What libraries are you trying to use by the way? As a side note I'd recommend staying away from jQuery as you won't need it anymore in the new world of frameworks (ng2, react, etc).

[jmezach]

I'm trying to use ng2-bs3-modal which is an Angular 2 module for working with Bootstrap's Modal dialogs. I found it rather useful and it works quite nice on the client side. But since it uses Bootstrap which itself uses jQuery it depends on that.

[MarkPieszak]

Have you looked into ng2-bootstrap? It is everything from bootstrap with no jQuery dependencies, might be able to use that instead!
https://github.com/valor-software/ng2-bootstrap

[jmezach]

Ah, thanks. Hadn't found that one yet. Works perfectly for what I need. Great!

[MarkPieszak]

Glad to hear it ! Dmitriy did an incredible job making It completely native to angular2 and removing the jQuery dependency.

[SteveSandersonMS]

Thanks for providing the answer @MarkPieszak!