如何将客户端html导入gatsby/react？

tjvv9vkg  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(401)

赏金7天后到期。此问题的答案有资格获得+100声誉奖励。妮可想引起更多的注意这个问题。

我是一个自学成才的傻瓜，所以我肯定我在做一些愚蠢的事情。我正试图将一小部分客户端呈现的html制作成盖茨比网站中的一个组件。我们已经为此奋斗了4天。我非常想把这个vue组件放到我的盖茨比网站上。
以下是我的组件的代码：

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）
如果所有东西都是在客户端加载的，我不明白为什么这会成为一个问题。但是，仅供参考。

JavaScriptnode.jsreactjsComponentsgatsby

1条答案

按热度按时间
baubqpgj

baubqpgj1#

实现此功能的第一步是添加对html模块的支持。盖茨比根本不认识他们。
安装 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（）调用并使用导入来获取 `../../static/demo.html` .

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

无法预见您可能会遇到的其他问题，但请尝试上述方法并报告。
赞(0）分享  回复(0）举报  2021-09-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com