赏金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)
如果所有东西都是在客户端加载的,我不明白为什么这会成为一个问题。但是,仅供参考。
1条答案
按热度按时间baubqpgj1#
实现此功能的第一步是添加对html模块的支持。盖茨比根本不认识他们。
安装
html-loader
使用:在里面
gatsby-node.js
```exports.onCreateWebpackConfig = ({
actions,
}) => {
actions.setWebpackConfig({
module: {
rules: [
{
test: /.html$/,
loader: require.resolve('html-loader'),
options: {
minimize: false,
},
},
],
},
})
}
import DemoHtml from '../../static/demo.html';