gatsby - 在Gatsby中包括外部脚本-MIME类型（“ text / html”）不是有效的JavaScript MIME类型(Including external scripts in Gatsby - MIME type (“text/html”) is not a valid JavaScript MIME type)

Question

I'm working on a Gatsby project.

(我正在研究Gatsby项目。)

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.

(目前，我的css和js文件在'src'目录中有一个'assets'文件夹。)

I import all of the css files at the top of my layout component and this seems to be working fine.

(我将所有css文件导入布局组件的顶部，这似乎工作正常。)

I then use react helmet in that same layout component to include all of my js files.

(然后，我在同一布局组件中使用react helmet来包含我的所有js文件。)

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:

(这是我的布局组件的前22行：)

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>

  ask by nflauria translate from so

Answer 1

The scripts in <Helmet /> won't work as you might expect.

(<Helmet />的脚本将无法正常运行。)

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.

(尝试使用ES模块系统import jquery和宏伟的插件，就像对顶部的React ， Helmet和其他../assets/css/文件一样。)

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.

(您看到的错误是因为对jquery和magnific-popup的请求返回404错误，并且返回了gatsby的404页面，即html。)