反応不変のエラー

Question

私は、ステージング環境でこれをテストするときにのみ、次のエラーに遭遇します。ただし、コードをローカルで実行するとエラーなしで実行されます。

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.

私はビューがエラーをトリガすることなく、ロードするために得ることができる2つの方法があります。

1. Iが明示的spans即ち<span data-filter="yourTasks">Your Tasks</span>

List成分

import React from 'react'; 
import styled from 'styled-components'; 

import ListItem from '../components/ListItem'; 

const List = ({ handleFiltering, listItems, match }) => { 
    const handleClick = (e) => { 
    handleFiltering(e.target.dataset.filter); 
    } 

    return (
    <ListWrapper> 
     <Tabs onClick={handleClick}> 
     <Tab data-filter="yourTasks">Your Tasks</Tab> 
     <Tab data-filter="allTasks">All Tasks</Tab> 
     <Tab data-filter="assignedTasks">Assigned</Tab> 
     </Tabs> 

     { _.map(listItems, item => <ListItem key={item._id} item={item} />)} 
    </ListWrapper> 
); 
} 

const ListWrapper = styled.section` 
    flex: 1; 
`; 

const Tabs = styled.div` 
    display: flex; 
    margin-bottom: 10px; 
`; 

const Tab = styled.span` 
    background-color: #F6F6F6; 
`; 

export default List; 

として個々 <Tab />コンポーネントを定義する場合、私は <Tabs />スタイル成分

にonClick={handleClick}小道具を削除親から

私は運と"master" invariant SO postを介して実行でした

... 

handleFiltering(filterType, list) { 
    list = list || this.state.list; 

    const filterTypes = { 
    allTasks:() => list, 
    yourTasks:() => (list.filter(item => item.assignedTo === this.userId)), 
    assignedTasks:() => (list.filter(item => item.createdBy === this.userId)), 
    } 

    this.setState(() => { 
    return { filteredList: filterTypes[filterType]() } 
    }); 
} 

... 

handleFilteringが定義されているListContainerコンポーネント。

Answer 1

Rick Jollyがコメントで述べたように、スタイル指定されたコンポーネントはコンポーネント宣言の後に定義されていました。

これは、プロード/ステージングのためにバンドルされたときに物事がどのように縮小されているかに起因すると思われます。

@ rick-jolly、回答として投稿していただければ幸いです。