Ember Fastboot Jquery

Question

I just added ember-cli-fastboot (github) on my project in order to have a pre-render server for crawlers bots.

After following installation steps, I get an error message when starting the server (ember fastboot --serve-assets):

jQuery is not defined
ReferenceError: jQuery is not defined
at <anonymous>:66304:16 [...]

Is there something in the cache to clean? Am I missing something obvious?

Answer 1

FastBoot renders in Node, specifically in a V8 virtual machine, which means it does not have access to the DOM, which is required for running jQuery. Also, being a sandboxed vm, it doesn’t have access to the same global namespace that the FastBoot code is running in (unless you explicitly pass it into the sandbox, see: "Using Whitelisted Node Dependencies" on https://www.ember-fastboot.com/docs/user-guide).

If you were to pass jQuery, via the jQuery node module, and expose in your app code, you still wouldn’t be able to run much of jQuery’s API in FastBoot mode, because it depends heavily on DOM APIs that simply don’t exist in this environment.

But some times you need to do some DOM manipulation within the browser sometimes, to handle complex animations or user interactions. The recommended solution for this is to keep all of your code that requires DOM manipulation in the didInsertElement or willInsertElement component lifecycle event handlers, which explicitly do not run in FastBoot mode.

Another option, which is not recommended, is to wrap calls to jQuery that are erring out with a check to make sure you’re not in FastBoot (see: "The FastBoot Service" on the user guide above)

You do not need to whitelist the module in this case, as FastBoot should never execute the code dependent on jQuery.

A side note: Ember clearly renders HTML, and it needs some way to construct a DOM-like structure. The FastBoot authors created SimpleDOM which is passed to the rendering engine at Application Instance init time. It is a very small subset of DOM methods used to construct the hierarchy, and then serialize to an HTML string.