Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Webpack ProviderPlugin not working while pre-rendering #369

Closed
Closed
Webpack ProviderPlugin not working while pre-rendering#369

Description

@jmezach
jmezach
opened on Oct 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.

Activity

  1. MarkPieszak commented on Oct 8, 2016

    @MarkPieszak
    MarkPieszak
    on Oct 8, 2016
    Contributor

    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).

  2. jmezach commented on Oct 9, 2016

    @jmezach
    jmezach
    on Oct 9, 2016
    Author

    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.

  3. MarkPieszak commented on Oct 9, 2016

    @MarkPieszak
    MarkPieszak
    on Oct 9, 2016
    Contributor

    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

  4. jmezach commented on Oct 9, 2016

    @jmezach
    jmezach
    on Oct 9, 2016
    Author

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

  5. MarkPieszak commented on Oct 9, 2016

    @MarkPieszak
    MarkPieszak
    on Oct 9, 2016
    Contributor

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

  6. SteveSandersonMS commented on Oct 10, 2016

    @SteveSandersonMS
    SteveSandersonMS
    on Oct 10, 2016
    Member

    Thanks for providing the answer @MarkPieszak!

  7. SteveSandersonMS
    closed this as completedon Oct 10, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions