How to use <script> inside Gatsby React page

Question

I have a script with jQuery and I want to use it inside my gatsby react page. So first I Created a file in my project nestpay.js and I paste the script content inside it like that:

    function submitformpaiement()
{
// code here
}

Second I added const payScript = require('../pages/nestpay') inside render()

render() {
const payScript = require('../pages/nestpay')
return (
  <Layout>
    <Helmet title="donation" />
    <Nav />
    <div id="main">
    </div>
  </Layout>
)

}

and when I run the project I got tons of syntax errors in my nestpay.js file.

./src/pages/nestpay.js Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\PREDATOR\Desktop\gatsby\ticketsadaka\src\pages\nestpay.js
205:19 warning Unexpected mix of '>>>' and '|'
no-mixed-operators 205:25 warning Unexpected mix of '>>>' and '|' no-mixed-operators 216:3 error 'strlen' is not defined
no-undef 219:7 error 'strlen' is not defined
no-undef 219:37 error 'strlen' is not defined
no-undef 220:10 error 'strlen' is not defined
no-undef 220:45 error 'strlen' is not defined
no-undef 222:12 warning 'i' is already defined
no-redeclare 232:14 warning 'j' is already defined
no-redeclare 262:12 warning 'i' is already defined
no-redeclare

This a picture of my file.

I think I miss something in that file a header or an import I don't know what.

I test that script in an HTML page and it's work fine so I need your help how to use it inside gatsby react page.

Thanks in advance ;)

First, should add your errors so people can give more accurate answers. Second, take your 'require' statement to the top of the file (before the declaration) and add semicolons to your lines (just some format), mainly the return statement just after the parenthesis and before the closing brackets. — Jose Cordero
– Jose Cordero, Commented Oct 30, 2018 at 19:01
The 'return' i'm talking about is the one inside your 'render()' method. What happens if you delete the import line ('const payScript = require...')? It looks like your errors are coming from there due to a var or function not being declared. — Jose Cordero
– Jose Cordero, Commented Oct 30, 2018 at 19:24
@JoséCordero the return inside render() is the gatsby format when u create a new file I didn't change any thing and I took the 'require' statement to the top of the file and still got the same errors. — Ragnar Lodbrok
– Ragnar Lodbrok, Commented Oct 30, 2018 at 19:29

l0rdcafe · Accepted Answer · 2018-10-31 22:36:24Z

1

I think the easiest way to include a tag is to just inline it in your main index.html like <script src="../pages/nestpay.js"</script> in the or tags.

P.S: Why do you want to include a jQuery file when using React GatsbyJS though?

edited Oct 31, 2018 at 22:36

answered Oct 30, 2018 at 19:19

l0rdcafe

1011 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ragnar Lodbrok Over a year ago

I don't have any files .html I have index.js so I can't do what you offer.

Ragnar Lodbrok Over a year ago

PS: I use that script jquery coz is the module integration kit for online payment so they have just that version.

l0rdcafe Over a year ago

I think this page should help you out. They have code examples for how you might want to include scripts. I have used the last dangerouslySetInnerHTML prop with the {}.__html syntax and it did the trick for me. You should also check out React Helmet, which might fit your use case.

Collectives™ on Stack Overflow

How to use <script> inside Gatsby React page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related