我正在用gatsby JS构建我的第一个Web应用程序,并通过课程做出反应。在要求安装安装样式化的组件,然后让ketp在本地主机上引发错误之前,我一直做得很好。我已经升级了我要求的所有程序包管理器和对等依赖项,我被卡住了!谁能帮我吗?
JSONStore._this.handleMittEvent
/Users/jane/Desktop/Projects/gatsby/react-app/.cache/json-store.js:40
37 | }
38 |
39 | handleMittEvent =(类型,事件)=> {
> 40 | this.setState({
41 | staticQueryData:getStaticQueryData(),
42 | pageQueryData:getPageQueryData(),
43 | })
r。
/Users/jane/Desktop/Projects/gatsby/react-app/.cache/socketIo.js:56
53 | }
54 | }
55 | if(msg.type && msg.payload){
> 56 | ___ emitter.emit(msg.type,msg.payload)
57 | }
58 | })
59 | } catch(err){
元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。您可能忘记了从定义文件中导出组件,或者可能混淆了默认导入和命名导入。
检查
IndexPage
的呈现方法。
- 列表项
index.js
内容:
import React from 'react'
import Link from 'gatsby'
import Card from '../components/card'
const IndexPage = () => (
<div>
<div className="Hero">
<div className="HeroGroup">
<h1>Alpha + Omega Digital</h1>
<p>React</p>
<Link to="/page-2/">find out more</Link>
<div className="Logos">
<img src={require('../images/logo-sketch.png')} width="50"/>
<img src={require('../images/logo-figma.png')} width="50"/>
<img src={require('../images/logo-framer.png')} width="50"/>
<img src={require('../images/logo-react.png')} width="50"/>
<img src={require('../images/logo-swift.png')} width="50"/>
<img src={require('../images/logo-studio.png')} width="50"/>
</div>
<svg width="100%" height="172" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#fff">
<animate repeatCount="indefinite" fill="freeze" attributeName="d" dur="10s"
values="M0 25.9086C277 84.5821 433 65.736 720 25.9086C934.818 -3.9019 1214.06 -5.23669 1442 8.06597C2079 45.2421 2208 63.5007 2560 25.9088V171.91L0 171.91V25.9086Z;
M0 87.1596C316 87.1597 444 160 884 52.0001C1324 -55.9999 1320.29 34.966 1538 71.251C1814 117.251 2156 189.252 2560 87.1597V233.161L0 233.161V87.1596Z;
M0 53.6584C158 11.0001 213 0 363 0C513 0 855.555 115.001 1154 115.001C1440 115.001 1626 -38.0004 2560 53.6585V199.66L0 199.66V53.6584Z;
M0 25.9086C277 84.5821 433 65.736 720 25.9086C934.818 -3.9019 1214.06 -5.23669 1442 8.06597C2079 45.2421 2208 63.5007 2560 25.9088V171.91L0 171.91V25.9086Z
"
/>
</path>
</svg>
</div>
</div>
<div className="Cards">
<h2>See all Projects</h2>
<div className="CardGroup">
<Card
title="In and Out Fitness"
text="12 sections"
image={require('../images/wallpaper.jpg')}/>
<Card
title="Gutter Guard"
text="12 sections"
image={require('../images/wallpaper2.jpg')}/>
<Card
title="Mercers restaurant"
text="12 sections"
image={require('../images/wallpaper3.jpg')}/>
<Card
title="Eltham Chiro"
text="12 sections"
image={require('../images/wallpaper4.jpg')}/>
</div>
</div>
</div>
)
export default IndexPage
答案 0 :(得分:1)
我怀疑问题出在这一行:
import Link from 'gatsby'
应该是
import { Link } from 'gatsby'
由于Link不是组件,因此会引发错误。
您可能忘记了从定义文件中导出组件,或者您可能混淆了默认命名导入文件