Include gatsby helmet script

Question

I can't include a script in helmet gatsby. The script I want to include is this:

  <script src = "assets / vendor / jquery / jquery.min.js"> </script>

I tried doing this and the console gives me an error:

 import Helmet from "react-helmet";
    import {withPrefix} from "gatsby";
    
    <Helmet>
    <script src = {withPrefix ('masonry.js')} />
    </Helmet>

with this syntax I also tried and it gives me an error:

<Helmet>
  <script src = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type = "text / javascript" />
</Helmet>

How would it be solved?

Answer 1

You are mixing a lot of stuff there. If your assets are internal, like the one you have in the first and second snippet, add it in your /static folder and import it like:

import { withPrefix } from "gatsby"
// ...

<Helmet>
    <script src={withPrefix('jquery.min.js')} type="text/javascript" />
</Helmet>

Note the white spaces in the code, you should trail them.

If your assets are external third-party assets you can also import them in your <Helmet>, but without using withPrefix inner function. Just:

<Helmet>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type = "text / javascript" />
</Helmet>

Like any other component in React, your <Helmet> tag must be wrapped with something to avoid parsing issues, use it always like:

const IndexPage = () => (
  <Layout>
    <Helmet>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" type="text/javascript" />
    </Helmet>
  </Layout>
)