React invariant error

Question

I'm running into the following error only when I test this in our staging environment, though the code runs without error when I run it locally.

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.

There are two ways I can get the view to load without triggering the error.

1. I remove the onClick={handleClick} prop on the <Tabs /> styled-component

2. If I explicitly define the individual <Tab /> components as spans i.e. <span data-filter="yourTasks">Your Tasks</span>

List component

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;

from parent ListContainer component where handleFiltering is defined

...

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]() }
  });
}

...

I did run through the "master" invariant SO post with no luck.

Answer 1

The issue was, as Rick Jolly had mentioned in the comments, that the styled-components were defined after the component declaration.

I believe this is likely due to how things are being minified when bundled for prod/staging, but welcome more feedback there if someone knows more.

@rick-jolly, feel free to post as answer and I will attribute yours as the accepted solution.