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

Question

我\xe2\x80\x99m是一个反应菜鸟并且自学成才，所以我\xe2\x80\x99m确信我在做一些愚蠢的事情。我\xe2\x80\x99m 试图将一小部分客户端渲染的 html 制作成我的 Gatsby 站点中的组件。已经为此奋斗了 4 天。我非常想将这个 Vue 组件添加到我的 Gatsby 网站中。

\n

这是我的组件的代码：

\n

import React, { Component } from "react"\nimport { Helmet } from "react-helmet"\nimport DemoHTML from '../../static/demo.html');\n\n\nclass Model extends Component {\n  componentDidMount() {\n\n    // set up and use external package as needed\n\n    const Mount = React.createClass({\n        render: function(){\n          return (\n            <section contentEditable='false' dangerouslySetInnerHTML={{ __html: DemoHTML }} />\n          );\n        }\n      });\n  }\n  render(props, Mount) {\n    return (\n      <React.Fragment>\n\n<Helmet>\n\n<script type="text/javascript" src="https://unpkg.com/vue"></script>\n<script type="text/javascript" src="https://unpkg.com/zircle"></script></Helmet>\n<Mount></Mount>\n      </React.Fragment>\n    )\n  }\n}\n\n\nexport default Model;\n\n\n

\n

然后，这是导入的 HTML：

\n

\n\n                    \n\n<div id="app">\n  <z-canvas :views='$options.components'>\n  </z-canvas>\n</div>\n\n    <script>\n\nconst one = [\n    template: `\n    <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%)" />\n` ]\n<!---  truncated tested working content for readability  -->\n\n\n  \n\n    new Vue({\n      el: 'app',\n      components: {\n        one\n      },\n      mounted () {\n        this.$zircle.setView('one')\n      }\n\n    })\n</script>\n\n

\n

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

\n

页面错误：

\n

\nUnhandled Runtime Error\nClose\nOne unhandled runtime error found in your files. See the list below to fix it:\n\n\nError in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058\nElement 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`.\n\n./node_modules/react-dom/cjs/react-dom.development.js:25058\nOpen in Editor\n  25056 |           {\n  25057 |             {\n> 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 );\n  25059 |             }\n  25060 |           }\n\n\n

\n

值得注意的是 HTML 页面确实可以完美地自行呈现。

\n

谢谢你！

\n

更新控制台

\n

\n\nDevTools 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\nvue:9108 You are running Vue in development mode.\nMake sure to turn on production mode when deploying for production.\nSee more tips at https://vuejs.org/guide/deployment.html\nvue:634 [Vue warn]: Cannot find element: #app\nwarn @ vue:634\nquery @ vue:5710\nVue.$mount @ vue:11931\nVue._init @ vue:5026\nVue @ vue:5092\n(anonymous) @ test.js:4\nclient.js:95 [HMR] connected\nclient.js:195 [HMR] bundle has 1 warnings\nclient.js:196 Critical dependency: the request of a dependency is an expression\nreact.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.\n\nCheck your code at model.js:27.\n    at Model (webpack-internal:///./src/pages/model.js:21:23)\n    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)\n    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)\n    at RouteHandler\n    at div\n    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)\n    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)\n    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)\n    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)\n    at Router\n    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)\n    at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)\n    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)\n    at LocationHandler (webpack-internal:///./.cache/root.js:69:29)\n    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)\n    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)\n    at Root\n    at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)\n    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)\n    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)\n    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)\n    at RootWrappedWithOverlayAndProvider\n    at App (webpack-internal:///./.cache/app.js:205:68)\nprintWarning @ react.development.js:220\nerror @ react.development.js:196\ncreateElementWithValidation @ react.development.js:2215\nrender @ model.js:26\nfinishClassComponent @ react-dom.development.js:17485\nupdateClassComponent @ react-dom.development.js:17435\nbeginWork @ react-dom.development.js:19073\nbeginWork$1 @ react-dom.development.js:23940\nperformUnitOfWork @ react-dom.development.js:22776\nworkLoopSync @ react-dom.development.js:22707\nrenderRootSync @ react-dom.development.js:22670\nperformSyncWorkOnRoot @ react-dom.development.js:22293\nscheduleUpdateOnFiber @ react-dom.development.js:21881\nupdateContainer @ react-dom.development.js:25482\neval @ react-dom.development.js:26021\nunbatchedUpdates @ react-dom.development.js:22431\nlegacyRenderSubtreeIntoContainer @ react-dom.development.js:26020\nrender @ react-dom.development.js:26103\nrunRender @ app.js:230\neval @ app.js:242\nsetTimeout (async)\neval @ app.js:241\nPromise.then (async)\neval @ app.js:171\nPromise.then (async)\neval @ app.js:51\n./.cache/app.js @ commons.js:1663\noptions.factory @ commons.js:4121\n__webpack_require__ @ commons.js:3478\n(anonymous) @ commons.js:4831\n__webpack_require__.O @ commons.js:3527\n(anonymous) @ commons.js:4832\n(anonymous) @ commons.js:4834\nreact.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.\n\nCheck your code at model.js:27.\n    at Model (webpack-internal:///./src/pages/model.js:21:23)\n    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:23:29)\n    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:41:30)\n    at RouteHandler\n    at div\n    at FocusHandlerImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:5)\n    at FocusHandler (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:19)\n    at RouterImpl (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:5)\n    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)\n    at Router\n    at ScrollHandler (webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:36:35)\n    at RouteUpdates (webpack-internal:///./.cache/navigation.js:285:32)\n    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:22:30)\n    at LocationHandler (webpack-internal:///./.cache/root.js:69:29)\n    at LocationProvider (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:5)\n    at Location (webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:23)\n    at Root\n    at pe (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-8ac214e0.js:889:13)\n    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:131:32)\n    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35)\n    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:114:23)\n    at RootWrappedWithOverlayAndProvider\n    at App (webpack-internal:///./.cache/app.js:205:68)\nprintWarning @ react.development.js:220\nerror @ react.development.js:196\ncreateElementWithValidation @ react.development.js:2215\nrender @ model.js:26\nfinishClassComponent @ react-dom.development.js:17485\nupdateClassComponent @ react-dom.development.js:17435\nbeginWork @ react-dom.development.js:19073\ncallCallback @ react-dom.development.js:3945\ninvokeGuardedCallbackDev @ react-dom.development.js:3994\ninvokeGuardedCallback @ react-dom.development.js:4056\nbeginWork$1 @ react-dom.development.js:23964\nperformUnitOfWork @ react-dom.development.js:22776\nworkLoopSync @ react-dom.development.js:22707\nrenderRootSync @ react-dom.development.js:22670\nperformSyncWorkOnRoot @ react-dom.development.js:22293\nscheduleUpdateOnFiber @ react-dom.development.js:21881\nupdateContainer @ react-dom.development.js:25482\neval @ react-dom.development.js:26021\nunbatchedUpdates @ react-dom.development.js:22431\nlegacyRenderSubtreeIntoContainer @ react-dom.development.js:26020\nrender @ react-dom.development.js:26103\nrunRender @ app.js:230\neval @ app.js:242\nsetTimeout (async)\neval @ app.js:241\nPromise.then (async)\neval @ app.js:171\nPromise.then (async)\neval @ app.js:51\n./.cache/app.js @ commons.js:1663\noptions.factory @ commons.js:4121\n__webpack_require__ @ commons.js:3478\n(anonymous) @ commons.js:4831\n__webpack_require__.O @ commons.js:3527\n(anonymous) @ commons.js:4832\n(anonymous) @ commons.js:4834\nreact-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.\n\nCheck the render method of `Model`.\n    at createFiberFromTypeAndProps (react-dom.development.js:25058)\n    at createFiberFromElement (react-dom.development.js:25086)\n    at createChild (react-dom.development.js:13446)\n    at reconcileChildrenArray (react-dom.development.js:13719)\n    at reconcileChildFibers (react-dom.development.js:14125)\n    at reconcileChildren (react-dom.development.js:16990)\n    at finishClassComponent (react-dom.development.js:17511)\n    at updateClassComponent (react-dom.development.js:17435)\n    at beginWork (react-dom.development.js:19073)\n    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)\ncreateFiberFromTypeAndProps @ react-dom.development.js:25058\ncreateFiberFromElement @ react-dom.development.js:25086\ncreateChild @ react-dom.development.js:13446\nreconcileChildrenArray @ react-dom.development.js:13719\nreconcileChildFibers @ react-dom.development.js:14125\nreconcileChildren @ react-dom.development.js:16990\nfinishClassComponent @ react-dom.development.js:17511\nupdateClassComponent @ react-dom.development.js:17435\nbeginWork @ react-dom.development.js:19073\ncallCallback @ react-dom.development.js:3945\ninvokeGuardedCallbackDev @ react-dom.development.js:3994\ninvokeGuardedCallback @ react-dom.development.js:4056\nbeginWork$1 @ react-dom.development.js:23964\nperformUnitOfWork @ react-dom.development.js:22776\nworkLoopSync @ react-dom.development.js:22707\nrenderRootSync @ react-dom.development.js:22670\nperformSyncWorkOnRoot @ react-dom.development.js:22293\nscheduleUpdateOnFiber @ react-dom.development.js:21881\nupdateContainer @ react-dom.development.js:25482\neval @ react-dom.development.js:26021\nunbatchedUpdates @ react-dom.development.js:22431\nlegacyRenderSubtreeIntoContainer @ react-dom.development.js:26020\nrender @ react-dom.development.js:26103\nrunRender @ app.js:230\neval @ app.js:242\nsetTimeout (async)\neval @ app.js:241\nPromise.then (async)\neval @ app.js:171\nPromise.then (async)\neval @ app.js:51\n./.cache/app.js @ commons.js:1663\noptions.factory @ commons.js:4121\n__webpack_require__ @ commons.js:3478\n(anonymous) @ commons.js:4831\n__webpack_require__.O @ commons.js:3527\n(anonymous) @ commons.js:4832\n(anonymous) @ commons.js:4834\n\n

\n

更新

\n

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

\n

如果所有内容都在客户端加载，我不明白为什么这会成为问题。但是，仅供参考。

\n

Answer 1

将 zircle 集成到 React/Gatsby 中。

useScript 钩子是必要的，直到 vue 和 zircle 库完全加载。

安装危险设置 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>