Universal: ERROR ReferenceError: $ is not defined (on the server console)

[ohabash]

Bug Report

My app uses plugins dependent on jQuery. when i start the universal server I see a lot of errors related to jQuery.

ERROR ReferenceError: $ is not defined

What is the expected behavior?

I expected that javascript related to dom elements would be ignored / suppressed or simulated for server side rendering without the need to modify the frontend app extensively

what ive tried

i started to put if(isBrowser) statements around dom scripts but this broke too many other parts and is not ideal because id basically have to rewrite a big percent of the app.

i started to convert jq to js but that also had problems with undefined elements

Uncaught TypeError: Cannot read property 'classList' of undefined
Uncaught TypeError: Cannot read property 'styles' of undefined

What is the use-case or motivation for changing an existing behavior?

It would really be nice if the app ran without issue on the server as it does in the dom.

Environment:

@nguniversal versions

• common: ^6.0.0
• express-engine: ^6.1.0
• module-map-ngfactory-loader: ^6.1.0

Is there anything else we should know?

I had a similar problem with window and document and localStorage. I found a solution that only required that i modify the server with mock-browser instead of re-writing the frontend app. a solution like that for jquery would be gold. Please help my client will surely fire me without a solution. https://blog.khophi.co/localstorage-undefined-angular-server-side-rendering/

ALSO

Right now when looking at page source i can see that certain components do not render (server-side). could that be a result of ERROR ReferenceError: $ is not defined?

[andresmgsl]

+1 .. I also experimenting that error

[CaerusKaru]

This is a pitfall of using Universal and is well-defined. If you rely extensively on a library that uses globals like document, window, or other APIs without patching it yourself, you will experience errors. This is not something that we will be patching for you, it must be done on the user side.

[JackoPham]

I also get the same error. Please give me how to fix it.

ERROR ReferenceError: $ is not defined when i used declare var $: any;

It's show in server console.

[ohabash]

Don’t do any ssr on Frontend scripts

[chenlitchian]

What you mean by
Don’t do any ssr on Frontend scripts?

How?

[JackoPham]

What you mean by
Don’t do any ssr on Frontend scripts?

How?

Hi. I'm used third-party when I build with production and starting that i get error.
Example when use ng-boostrap or ... .

[jaganchoccy]

What you mean by
Don’t do any ssr on Frontend scripts?
How?

Hi. I'm used third-party when I build with production and starting that i get error.
Example when use ng-boostrap or ... .

I am using ngx-materializecss
I am getting an issue like this
ERROR ReferenceError: $ is not defined
at MzTooltipDirective.module.exports.MzTooltipDirective.initElements (D:\DevelopmentAngular\unitrix\dist\server.js:181200:9)

[jaganchoccy]

Bug Report

My app uses plugins dependent on jQuery. when i start the universal server I see a lot of errors related to jQuery.

ERROR ReferenceError: $ is not defined

What is the expected behavior?

I expected that javascript related to dom elements would be ignored / suppressed or simulated for server side rendering without the need to modify the frontend app extensively

what ive tried

i started to put if(isBrowser) statements around dom scripts but this broke too many other parts and is not ideal because id basically have to rewrite a big percent of the app.

i started to convert jq to js but that also had problems with undefined elements

Uncaught TypeError: Cannot read property 'classList' of undefined
Uncaught TypeError: Cannot read property 'styles' of undefined

What is the use-case or motivation for changing an existing behavior?

It would really be nice if the app ran without issue on the server as it does in the dom.

Environment:

@nguniversal versions

• common: ^6.0.0
• express-engine: ^6.1.0
• module-map-ngfactory-loader: ^6.1.0

Is there anything else we should know?

I had a similar problem with window and document and localStorage. I found a solution that only required that i modify the server with mock-browser instead of re-writing the frontend app. a solution like that for jquery would be gold. Please help my client will surely fire me without a solution. https://blog.khophi.co/localstorage-undefined-angular-server-side-rendering/

ALSO

Right now when looking at page source i can see that certain components do not render (server-side). could that be a result of ERROR ReferenceError: $ is not defined?

u got any solution for this ??

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}