Webpack ProviderPlugin not working while pre-rendering #1327

New Issue

fergalmoran · 2025-08-09T17:19:42Z

fergalmoran commented

2025-08-09 17:19:42 +00:00

Originally created by @jmezach on 10/8/2016

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.

*Originally created by @jmezach on 10/8/2016* 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.

fergalmoran closed this issue

2025-08-09 17:19:42 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1327