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.

I remove the onClick={handleClick} prop on the <Tabs /> styled-component
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.

Try pausing on caught exceptions and then digging around in the stack trace to see if you can find exactly which element ends up undefined. Maybe it's a minification problem if it only happens in your staging environment. https://developers.google.com/web/updates/2015/05/automatically-pause-on-any-exception — Brian Mathews, Nov 08 '17 at 01:54
Try moving your styled component declarations above the component in which they are referenced. — Rick Jolly, Nov 08 '17 at 02:03
@jadam This happens when there is a problem with your imports. Check this QA: https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string?noredirect=1&lq=1 — Jayabalaji J, Nov 08 '17 at 05:22
@RickJolly that was it. Must have been an issue during minification? Feel free to leave as answer. — Jadam, Nov 08 '17 at 19:30

score 0 · Accepted Answer · answered Nov 13 '17 at 19:44

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.

React invariant error

1 Answers1