未定义的字符串-反应组件

时间:2019-07-13 04:04:13

标签: reactjs gatsby

我正在用gatsby JS构建我的第一个Web应用程序,并通过课程做出反应。在要求安装安装样式化的组件,然后让ketp在本地主机上引发错误之前,我一直做得很好。我已经升级了我要求的所有程序包管理器和对等依赖项,我被卡住了!谁能帮我吗?

  • 将节点版本从12更改为10
  • 将NVM从10更改为8
  • 根据要求更新了对等方依存关系,Gatsby链接,React Helmet,样式化的组件
  • 将插件添加到gatsby.config文件中
  • 已更改版本的反应路由器和纱线
  • 从Gatsby js版本2更改为Gatsby js版本1仍然没有帮助。
  

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的呈现方法。

     
      
  1. 列表项
  2.   

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

1 个答案:

答案 0 :(得分:1)

我怀疑问题出在这一行:

import Link from 'gatsby'

应该是

import { Link } from 'gatsby'

由于Link不是组件,因此会引发错误。

  

您可能忘记了从定义文件中导出组件,或者您可能混淆了默认命名导入文件