Custom Javascript is not applied to gatsby project #26239
Unanswered
sanjaydhamelia26
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
I am newbies to Gatsby Framework and we are targeting to migrate our existing react web application to gatsby.
In our existing project we have used a slider, achieved with the JavaScript.
As there in no index.html file in GatsbyJS like react application in which we have added some of the styles and custom JS file in
<head>and<body>So in order to migrate the JS file we have done the following the steps:
<Helmet>react componentWhile doing all above implementation following are the result.
1) customizing html.js
--> Custom JS applied successfully
--> But when I navigate to other page and coming back again then script was disabled
2) The gatsby-ssr.js API file
--> Added all scripts in
setPostBodyComponentshook--> Verify it is added before
</body>--> But style won't applied successfully
3) Using
<Helmet>react component--> Custom JS applied successfully
--> But when I navigate to other page and coming back again then script was disabled
Relevant information
For a reference purpose i am attaching the sample demo project.
Some information about attached project
Component :
testPage.jscontains list of images in a div with the respective class<div className="slider fslider">..<img>... </div>Scripts list required for the project
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"/> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/> <script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js"/> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js'/> <script src="./script.js"/>Above script has been placed where it is required in all three respective implementation specified in summary section.
================================= Attachement ==============================
import-script.zip
================================= ========================================
Beta Was this translation helpful? Give feedback.
All reactions