Using jQuery and external scripts in Gatsby

Using jQuery and external scripts in Gatsby

Questions : Using jQuery and external scripts in Gatsby

940

I have a Gatsby website and need to make use in4codes_reactjs of external javascript and jQuery files – in4codes_reactjs stored in the static folder of the project’s in4codes_reactjs root.

So far I’ve tried using React Helmet, Gatsby in4codes_reactjs SSR and Gatsby Browser methods but none of in4codes_reactjs these seem to work. My approaches are in4codes_reactjs outlined below.

Side note: the scripts do load “sometimes” in4codes_reactjs with React Helmet but not always and does in4codes_reactjs not load at all in the production version in4codes_reactjs after running gatsby build.

Using React Helmet

In my layout.js file, I’m using React Helmet in4codes_reactjs to include script references like so:

<Helmet> <script src={withPrefix("js/jquery-3.4.1.min.js")}></script> <script src={withPrefix("js/plugins.js")}></script> <script src={withPrefix("js/common-template.js")}></script> </Helmet> 

As mentioned above, whilst this approach in4codes_reactjs does work sometimes, it doesn’t work all the in4codes_reactjs time unless the page is manually refreshed in4codes_reactjs multiple times. And the production version in4codes_reactjs does not work at all.

Using gatsby-ssr

I’m using the following code in in4codes_reactjs gatsby-ssr.js file:

import { withPrefix } from "gatsby" const React = require("react") export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="jquery" src={withPrefix("js/jquery-3.4.1.min.js")} defer />, <script key="plugins" src={withPrefix("js/plugins.js")} defer />, <script key="common-template" src={withPrefix("js/common-template.js")} defer />, ]) } 

This does not work as well and while in4codes_reactjs checking browser tools, in fetches, it in4codes_reactjs results in The requested resource could not in4codes_reactjs be loaded. However, I can see the file under in4codes_reactjs scripts in web page resources.

Using gatsby-browser

I’m using the following code in in4codes_reactjs gatsby-browser.js file:

const addScript = url => { const script = document.createElement("script") script.src = url script.async = true document.body.appendChild(script) } export const onClientEntry = () => { window.onload = () => { addScript("js/jquery-3.4.1.min.js") addScript("js/plugins.js") addScript("js/common.js") } } 

However, this results in the same thing as in4codes_reactjs gatsby-ssr.js method.

Could someone please guide as to what is in4codes_reactjs wrong here and how to fix this? jQuery and in4codes_reactjs the common-template.js file is essential for in4codes_reactjs the website to function and cannot be in4codes_reactjs ignored.

Total Answers 1
24

Answers 1 : of Using jQuery and external scripts in Gatsby

I don’t know if it still is your concern in4codes_jquery but few days ago your words were like in4codes_jquery mine. I solved that using this react in4codes_jquery custom hook:

import { useEffect } from 'react'; const useScript = async resourceUrl=> { useEffect(() => { const script = document.createElement('script'); script.async = false; script.src = resourceUrl; document.body.appendChild(script); return () => { document.body.removeChild(script); } }, [resourceUrl]); }; export default useScript; 

And called it like this:

import useScript from '@/hooks/useScript'; .... import '@/assets/css/styles.css';//not important import { Helmet } from 'react-helmet';// just an example const Home: React.FC<PageProps> = () => { useScript(withPrefix('/js/jquery-3.5.1.min.js')); useScript(withPrefix('/js/bootstrap.min.js')); useScript(withPrefix('/js/slick.min.js')); useScript(withPrefix('/js/latinise_compact.js')); useScript(withPrefix('/js/scripts.js')); return ( <> <Helmet>// and so on... 

I hope it helps anyone else

0

Answer Link
jidam
  • Unable to run NoraUI mvn verify goal
  • Unable to run my app on emulator in VS Code
  • Unable to run multiple instances of libVLC(MobileVLCKit) in IOS via flutter framework
  • Unable to run make on griddb source on ubuntu 20.04 (building from source)
  • Unable to run latexindent macOS Monterey 12.0.1
  • Unable to run kotlinc-native command
  • Unable to run JUnit Test… Java.lang.ExceptionInInitializerError (Android Studio)
  • Unable to run java with -Xmx > 966m
  • Unable to run ionic cap run android from wsl2 inorder to start android emulator
  • Unable to run Intel HAXM installer: Cannot start process, the working directory does not exist
  • fs
  • Unable to run Google Analytics sample code
  • unable to run flutter run after upgarding to flutter 2.8.0 from 2.5.3
  • Unable to run Django with PostgreSQL in Docker
  • Unable to Run Container Using testcontainers
  • Unable to run ClojureScript Hello World program, Error building classpath. Error reading edn.
  • unable to run client command for apache karaf 4.3.3 through remote server
  • Unable to run c program 2nd time using eclipse
  • unable to run c++ in visual studio code on m1 chipset
  • Unable to run Android Instrumented Tests
  • Unable to run adb, check your Android SDK installation and ANDROID_SDK_ROOT environment variable: …AndroidSdkplatform-toolsadb.exe
  • Unable to run a singlespecific .spec.ts file through angular cli using ng test –include option
  • Unable to run a Mango query
  • Unable to return response back to view in laravel from package
  • Unable to return object reference in std::optional
  • Unable to return NULL in a function that expects an integer return type
  • Unable to return correct change in JavaScript Cash Register
  • Unable to retrieve version information from Elasticsearch nodes. Request timed out
  • Unable to retrieve values from Axios Response data
  • Unable to retrieve dotenv JWT secret Error: secretOrPrivateKey must have a value
  • Unable to resolve your shell environment
  • Unable to resolve token for FCM while implementing Push notification for Xamarin
  • Unable to resolve the request yii
  • Unable to resolve service for type Swashbuckle.AspNetCore.Swagger.ISwaggerProvider
  • Unable to resolve service for type Microsoft.EntityFrameworkCore.Diagnostics.IDiagnosticsLogger