Javascript 在GatsbyJS中使用Booking.js需要Jquery依赖项Gatsby构建失败，但开发工作正常_Javascript_Jquery_Reactjs_Gatsby

Javascript 在GatsbyJS中使用Booking.js需要Jquery依赖项Gatsby构建失败，但开发工作正常

javascript jquery reactjs gatsby

Javascript 在GatsbyJS中使用Booking.js需要Jquery依赖项Gatsby构建失败，但开发工作正常,javascript,jquery,reactjs,gatsby,Javascript,Jquery,Reactjs,Gatsby,我正在尝试使用timekit.io中的这个预订小部件，它在盖茨比的开发中工作，但构建失败，出现错误webpacket错误：找不到模块“jQuery”我在这里尝试了reccomendations，但没有用很遗憾，这个小部件依赖jquery。我正在认真考虑手动使用api并构建交互，但对于客户端来说，这是成本最高的解决方案提前谢谢这是到目前为止我的代码 //gatsby-node.js exports.onCreateWebpackConfig = ({ actions }) => {

我正在尝试使用timekit.io中的这个预订小部件，它在盖茨比的开发中工作，但构建失败，出现错误

webpacket错误：找不到模块“jQuery”

我在这里尝试了reccomendations，但没有用

很遗憾，这个小部件依赖jquery。我正在认真考虑手动使用api并构建交互，但对于客户端来说，这是成本最高的解决方案

提前谢谢

这是到目前为止我的代码

//gatsby-node.js
exports.onCreateWebpackConfig = ({ actions }) => {
  const { setWebpackConfig } = actions
  setWebpackConfig({
    externals: {
      jquery: "jQuery", // important: 'Q' capitalized
    },
  })
}

//gatsby-ssr.js
const React=require（“React”）
export const onRenderBody=（{setHeadComponents}，pluginOptions）=>{
Sethead组件([
,
])
}

//html.js
从“React”导入React
从“道具类型”导入道具类型
导出默认函数HTML（道具）{
返回(
{props.headComponents}
{props.preBodyComponents}
{props.postBodyComponents}
)
}
HTML.propTypes={
HtmlatAttributes:PropTypes.object，
headComponents:PropTypes.array，
bodyAttributes:PropTypes.object，
preBodyComponents:PropTypes.array，
正文：PropTypes.string，
postBodyComponents:PropTypes.array，
}

//index.js
从“React”导入React，{useffect}
从“jquery”导入$
从“timekit booking”导入timekit booking
常量索引页=（）=>{
useffect（（）=>{
const widget=new TimekitBooking（）
console.log（小部件）
常量配置={
应用程序密钥：“fdsf”，
项目编号：“fdsa”，
}
widget.init（配置）
})
返回(
)
}
导出默认索引扩展

//gatsby-ssr.js
const React = require("react")

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents([
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossOrigin="anonymous"
    ></script>,
  ])
}

//html.js
import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossOrigin="anonymous"
        />
        {props.headComponents}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

//index.js
import React, { useEffect } from "react"
import $ from "jquery"
import TimekitBooking from "timekit-booking"

const IndexPage = () => {

  useEffect(() => {
    const widget = new TimekitBooking()
    console.log(widget)
    const config = {
      app_key: "fdsf",
      project_id: "fdsa",
    }
    widget.init(config)
  })


  return (
    <>
      <div id="bookingjs"></div>
    </>
  )
}

export default IndexPage