如何将客户端HTML导入到Gatsby/React中？

Question

我是一个反应新手，自学成才，所以我确信我在做一些愚蠢的事情。我正在尝试将客户端呈现的一小部分html放入我的Gatsby站点的组件中。我已经和它斗争了4天了。我非常想把这个Vue组件放到我的Gatsby站点中。

下面是我的组件的代码：

import React, { Component } from "react"
import { Helmet } from "react-helmet"
import DemoHTML from '../../static/demo.html');


class Model extends Component {
  componentDidMount() {

    // set up and use external package as needed

    const Mount = React.createClass({
        render: function(){
          return (
            <section contentEditable='false' dangerouslySetInnerHTML={{ __html: DemoHTML }} />
          );
        }
      });
  }
  render(props, Mount) {
    return (
      <React.Fragment>

<Helmet>

<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://unpkg.com/zircle"></script></Helmet>
<Mount></Mount>
      </React.Fragment>
    )
  }
}


export default Model;

然后，下面是导入的HTML：

<div id="app">
  <z-canvas :views='$options.components'>
  </z-canvas>
</div>

    <script>

const one = [
    template: `
    <z-view style="border-color: #8F6AFA; font-family: 'Montserrat', sans-serif; font-weight: bold; color: #ffffff; border-width: 1px; background-image: linear-gradient(90deg, #292929 2.11%, #000000 104.85%)" />
` ]
<!---  truncated tested working content for readability  -->


  

    new Vue({
      el: 'app',
      components: {
        one
      },
      mounted () {
        this.$zircle.setView('one')
      }

    })
</script>

最后，这是我在控制台和页面上的错误...

在页面错误上：

Unhandled Runtime Error
Close
One unhandled runtime error found in your files. See the list below to fix it:


Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Model`.

./node_modules/react-dom/cjs/react-dom.development.js:25058
Open in Editor
  25056 |           {
  25057 |             {
> 25058 |               throw Error( "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " + (type == null ? type : typeof type) + "." + info );
  25059 |             }
  25060 |           }

值得注意的是，HTML页面本身就可以完美地呈现。

谢谢!

更新的控制台

DevTools failed to load source map: Could not load content for chrome-extension://fddhonoimfhgiopglkiokmofecgdiedb/MeetingScheduleResource.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
vue:9108 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
vue:634 [Vue warn]: Cannot find element: #app
warn @ vue:634
query @ vue:5710
Vue.$mount @ vue:11931
Vue._init @ vue:5026
Vue @ vue:5092
(anonymous) @ test.js:4
client.js:95 [HMR] connected
client.js:195 [HMR] bundle has 1 warnings
client.js:196 Critical dependency: the request of a dependency is an expression
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at model.js:27.
    at Model (webpack-internal:///./src/pages/model.js:21:23)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:69:29)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:205:68)
printWarning @ react.development.js:220
error @ react.development.js:196
createElementWithValidation @ react.development.js:2215
render @ model.js:26
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
eval @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
runRender @ app.js:230
eval @ app.js:242
setTimeout (async)
eval @ app.js:241
Promise.then (async)
eval @ app.js:171
Promise.then (async)
eval @ app.js:51
./.cache/app.js @ commons.js:1663
options.factory @ commons.js:4121
__webpack_require__ @ commons.js:3478
(anonymous) @ commons.js:4831
__webpack_require__.O @ commons.js:3527
(anonymous) @ commons.js:4832
(anonymous) @ commons.js:4834
react.development.js:220 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at model.js:27.
    at Model (webpack-internal:///./src/pages/model.js:21:23)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)
    at RouteHandler
    at div
    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)
    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)
    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Router
    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)
    at LocationHandler (webpack-internal:///./.cache/root.js:69:29)
    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)
    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)
    at Root
    at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:205:68)
printWarning @ react.development.js:220
error @ react.development.js:196
createElementWithValidation @ react.development.js:2215
render @ model.js:26
finishClassComponent @ react-dom.development.js:17485
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
eval @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
runRender @ app.js:230
eval @ app.js:242
setTimeout (async)
eval @ app.js:241
Promise.then (async)
eval @ app.js:171
Promise.then (async)
eval @ app.js:51
./.cache/app.js @ commons.js:1663
options.factory @ commons.js:4121
__webpack_require__ @ commons.js:3478
(anonymous) @ commons.js:4831
__webpack_require__.O @ commons.js:3527
(anonymous) @ commons.js:4832
(anonymous) @ commons.js:4834
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Model`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at finishClassComponent (react-dom.development.js:17511)
    at updateClassComponent (react-dom.development.js:17435)
    at beginWork (react-dom.development.js:19073)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
createFiberFromTypeAndProps @ react-dom.development.js:25058
createFiberFromElement @ react-dom.development.js:25086
createChild @ react-dom.development.js:13446
reconcileChildrenArray @ react-dom.development.js:13719
reconcileChildFibers @ react-dom.development.js:14125
reconcileChildren @ react-dom.development.js:16990
finishClassComponent @ react-dom.development.js:17511
updateClassComponent @ react-dom.development.js:17435
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
eval @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
runRender @ app.js:230
eval @ app.js:242
setTimeout (async)
eval @ app.js:241
Promise.then (async)
eval @ app.js:171
Promise.then (async)
eval @ app.js:51
./.cache/app.js @ commons.js:1663
options.factory @ commons.js:4121
__webpack_require__ @ commons.js:3478
(anonymous) @ commons.js:4831
__webpack_require__.O @ commons.js:3527
(anonymous) @ commons.js:4832
(anonymous) @ commons.js:4834

更新

我已经对ESM进行了建议的更新(在问题中也进行了更新。有一件事我想和大家分享，以防它值得考虑。这个脚本必须在客户端呈现的原因是它是一个vue库。(参见Zircle.github.io)

如果一切都加载到客户端，我看不出这有什么问题。但是，仅供参考。

Answer 1

将zircle集成到React/Gatsby中。

useScript钩子是必要的，等待vue，然后zircle库完全加载。

安装dangerously-set-html-content包-因为您需要在HTML中执行Javascript。

我使用了来自https://usehooks.com/useScript/的useScript代码

import React, { Component } from "react";
import DemoHTML from "../../static/zircle.html";

import InnerHTML from "dangerously-set-html-content";
import "zircle/dist/zircle.css";
import useScript from "../hooks/useScript";

export default function LoadVue() {
  const status = useScript("https://unpkg.com/vue");
  return <>{status === "ready" && <Zircle />}</>;
}

function Zircle() {
  const status = useScript("https://unpkg.com/zircle");
  return <>{status === "ready" && <InnerHTML html={DemoHTML} />}</>;
}

而zircle.html是

     <div> Hello Zircle</div>
<div id="app2">
  <z-canvas :views="$options.components"></z-canvas>
</div>

<script>
  const home = {
    template: `<z-view>Hello World!</z-view>`
  }
  new Vue({
    el: '#app2',
    components: {
      home
    },
    mounted () {
      this.$zircle.setView('home')
    }
  })
</script>

Answer 2

实现这一点的第一步是添加对HTML模块的支持。Gatsby无法识别它们的开箱即用功能。

使用以下命令安装html-loader：

$ npm i -D html-loader

在gatsby-node.js中

exports.onCreateWebpackConfig = ({
  actions,
}) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.html$/,
          loader: require.resolve('html-loader'),
          options: {
            minimize: false,
          },
        },
      ],
    },
  })
}

还要确保您没有修复ESM导入和commonjs require()。坚持静态ESM导入/导出。因此，正如前面所建议的，删除require()调用并使用imports来获取../../static/demo.html的HTML内容。

import DemoHtml from '../../static/demo.html';

不能预见你可能会遇到的其他问题，但尝试上面的方法并返回报告。