0

I'm working on a Gatsby project. I am trying to figure out the best way to include external scripts in my application. Currently I have a 'assets' folder in my 'src' directory with my css and js files. I import all of the css files at the top of my layout component and this seems to be working fine. I then use react helmet in that same layout component to include all of my js files. I receive the following error message in the browser console:

The script from “http://localhost:8000/assets/js/plugins/jquery-2.2.4.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

SyntaxError: expected expression, got '<'

Here's the first 22 lines of my layout component:

import React from "react"
import { Helmet } from "react-helmet"

import "../assets/css/bootstrap.min.css"
import "../assets/css/fontello.min.css"
import "../assets/css/magnific-popup.min.css"
import "../assets/css/animsition.min.css"
import "../assets/css/style.css"

export default () => (
  <div className="global-outer">
    <Helmet>
      <script
        type="text/javascript"
        src="../assets/js/plugins/jquery-2.2.4.min.js"
        defer="true"
      ></script>
      <script
        type="text/javascript"
        src="../assets/js/plugins/jquery.magnific-popup.min.js"
        defer="true"
      ></script>
nflauria
  • 847
  • 13
  • 22

2 Answers2

1

The scripts in <Helmet /> won't work as you might expect. Those are not processed in any way by the build process. Try to import jquery and the magnific plugin using the ES module system just like you do for React, Helmet and the rest of the ../assets/css/ files at the top.

The error you are seeing is because the requests for jquery and magnific-popup return 404 errors and gatsby's 404 page is returned, which is html.

Z. Zlatev
  • 4,757
  • 1
  • 33
  • 37
  • I just tried importing the css and js into my top level component. The css loads fine. The js has an issue though. Most of the scripts require jquery and they are returning undefined for the jquery object even though I import the jquery script above the other scripts. – nflauria Dec 01 '19 at 22:41
  • 1
    Check out this answer https://stackoverflow.com/a/34340392/157601 – Z. Zlatev Dec 02 '19 at 05:47
  • Thanks Zlatev. I tried installing jQuery as an npm package and then importing it but I get a whole different set of errors. I'll keep working on this and let you know if I come up with a solution. – nflauria Dec 02 '19 at 19:24
1

Try customizing head component which is rendered on the server by copying and altering html.js as suggested in the docs.

Pa Ye
  • 1,779
  • 12
  • 22
  • I've tried creating an html.js file and adding my stylesheet and script tags but I receive the same error. I placed my assets folder inside of the src folder and referenced the files there. – nflauria Dec 01 '19 at 22:26
  • 1
    Flush the cache (`gatsby clean`) and try again if you haven't already. Alternatively, include your files within `gatsby-browser.js`. – Pa Ye Dec 02 '19 at 11:01
  • Tried `gatsby clean`. Also tried using `gatsby-browser.js` but the scripts do not load in order so jquery is not defined for some of the scripts that use it. – nflauria Dec 02 '19 at 18:49
  • Gatsby application is rendered on the server and this is the reason why you are running into script timing problems. Would make more sense to add jquery and that other plugin as project dependencies while importing and using what you need (you get tree shaking and code splitting with Gatsby as an added benefit). I noticed you tried going down this road - what kind of errors are you getting? – Pa Ye Dec 03 '19 at 16:56