GoogleChrome / web-vitals

Essential metrics for a healthy site.
https://web.dev/vitals
Apache License 2.0
7.59k stars 415 forks source link

Webpack Module is undefined #416

Closed ifehrman closed 9 months ago

ifehrman commented 9 months ago

image image image

To whom this may concern, I've installed the web vitals library and am trying to push the metric's to my dataLayer. I've followed the docs for installation but I am seeing an error saying the module is undefined. Has anyone seen this before or would have any insight as to how this can be resolved? I'd appreciate any feedback

tunetheweb commented 9 months ago

This isn't an issue with this library but more a React coding issue.

My limited understanding (because I am not a React developer) is you cannot set a a script's content in that manner by rendering a <script> JSX element and you need to either:

  1. Export your webVitals function and simply call that in your main app JavaScript code. Which makes mroe sense as you can import web-vitals as a dependency. I tried that and it worked fine.

or

  1. Add the script element using the standard web apis (document.createElement("script");) if, for example, you wanted to reference web-vitals.js as an external dependency. Though I wouldn't recommend that.
ifehrman commented 9 months ago

Thank you very much for the response. I'll adjust my implementation