如何使用 helmet 或 ssr api 导入静态 js 文件以及如何避免 Uncaught SyntaxError？

Question

我正在尝试使用 helmet or using Gatsby SSR API.

导入静态 js 文件

但是同时使用它们，我总是得到 Uncaught SyntaxError: Unexpected token '<'。

可能是因为路径不正确导致的错误。

尝试 1:

src/component/ProductDetail/ProductDetail.js

const ProductDetail = ({ data }) => {
  return (
    <>
      <Helmet>
        <script type="application/javascript" src={"./plugins/zaius/index.js"} />
      </Helmet>
      <div css={styles.layout}>
      ...

注意：zaius插件js文件，路径为static/plugins/zaius/index.js

尝试2：

盖茨比-ssr.js

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      type="application/javascript"
      href="./plugins/zaius/index.js"
    />
  ])
}

我的Gatsby项目架构很正常，没什么特别的。

|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
    |-- /plugins
        |-- /zaius
            |-- index.js
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

如果我使用npm run dev编译，那么结构将是：

|-- /plugins
    |-- /zaius
        |-- index.js
|-- index.html

我认为我得到错误Uncaught SyntaxError: Unexpected token '<'的原因是因为zaius插件index.js文件路径错误。

因为我尝试使用 gatsby clean 清理 .cache，并且仅在导入 js 文件时出现错误。

请参考我之前的问题。 here

Answer 1

我猜根据你的 ProductDetail src 应该是：

  <Helmet>
    <script type="application/javascript" src="../../plugins/zaius/index.js" />      
  </Helmet>

在您的 gatsby-ssr.js 中，这也应该有效：

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script src="./plugins/zaius/index.js" />
  ])
}

请注意，在第二次尝试中，我已将 link 标记更改为 script 标记，因为它是您要导入的内容（不是样式表）。

我已经测试了模拟插件和结构，它们没有破坏编译。

如何使用 helmet 或 ssr api 导入静态 js 文件以及如何避免 Uncaught SyntaxError？

How to import static js files using helmet or ssr api and how to avoid Uncaught SyntaxError?

javascript

gatsby

server-side-rendering

static-assert