Element type is invalid: Expected a String

[njho]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Copying and pasting the existing examples into my react environment results in the following error:
Is this something very simple that I'm missing in my set-up?

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.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/m4mb9Lg3/4/).

From the Readme

import React from 'react'
import ReactDOM from 'react-dom'
import { Transition } from 'react-transition-group'

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,
  padding: 20,
  display: 'inline-block',
  backgroundColor: '#8787d8'
}

const transitionStyles = {
  entering: { opacity: 0 },
  entered: { opacity: 1 },
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div style={{
        ...defaultStyle,
        ...transitionStyles[state]
      }}>
        I'm A fade Transition!
      </div>
    )}
  </Transition>
);

class Example extends React.Component {
  state = { show: false }

  handleToggle() {
    this.setState(({ show }) => ({
      show: !show
    }))
  }
  
  render() {
    const { show } = this.state
    return (
      <div>
        <button onClick={() => this.handleToggle()}>
          Click to toggle
        </button>
        <div>
          <Fade in={!!show} />
        </div>
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.getElementById('root'))

What is the expected behavior?
That it would mimic the example

Which versions, and which browser / OS are affected by this issue? Did this work in previous versions?
Used with create-react-app.
react: v16.0.0
react-transition-group: v2.2.1

[juandata]

Hello, I was having a similar issue but instead of got undefined I was getting the message got object. I solved this by encapsulating the function CSSTransitionGroup in curly braces, just like this:

import {CSSTransitionGroup} from 'react-transition-group';

This is strange since the CSSTransitionGroup.js in the modules folder exports the function as default like this:
exports.default = CSSTransitionGroup;
So importing the function without curly braces should work. Anyway I was able to solve the issue and I hope you can get around this bug too.

[silvenon]

It seems these two issues are a bit different. You should rely on two ways of importing:

// named
import { Transition, CSSTransition, TransitionGroup } from 'react-transition';

// or default
import Transition from 'react-transition/Transition';
import CSSTransition from 'react-transition/CSSTransition';
import TransitionGroup from 'react-transition/TransitionGroup';

Use the latter if you're not using all of the components, to slightly decrease bundle size.

Could both of you give me more details, with code and setup, so we can figure out what went wrong? The error is saying that you tried to render a component which turned out to be undefined, either because of an incorrect import statement or because you didn't import at all.

[mikekellyio]

I'm running into this same error when copy-pasting from examples.

Below, location is just being passed in from the parent Route

This is essentially copy/paste from https://reacttraining.com/react-router/web/example/animated-transitions.

import { TransitionGroup, CSSTransition } from "react-transition-group";
//snip

        <TransitionGroup>
          <CSSTransition key={location.key} classNames={"fadeIn"}>
            <Switch location={location}>
              <Route
                exact
                path="/objects"
                render={() => (
                  <div>
                    {/* stuff */}
                  </div>
                )}
              />
              <Route path="/objects/new">
                <NewObject types={types}  />
              </Route>
              <Redirect to="/objects" />
            </Switch>
          </CSSTransition>
        </TransitionGroup>

This results in:

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, or you might have mixed up default and named imports.

Check the render method of TransitionGroup.

Doing the below, mirroring the example at http://reactcommunity.org/react-transition-group/transition-group results in the same error.

        <TransitionGroup>
          <Switch>
            <Route
              exact
              path="/objects"
              render={({ location }) => (
                <CSSTransition key={location.key} classNames={"fadeIn"}>
                  <div>
                    {/* stuff */}
                  </div>
                </CSSTransition>
              )}
            />
            <Route
              path="/objects/new"
              render={({ location }) => (
                <CSSTransition key={location.key} classNames={"fadeIn"}>
                  <NewObject types={types}  />
                </CSSTransition>
              )}
            />
            <Redirect to="/objects" />
          </Switch>
        </TransitionGroup>

[silvenon]

I can only guess here 😕 Do Switch, Route and Redirect etc. all exist? It would help a ton to have a CodeSandbox demo reproducing this error so I can try to debug it.

[srosset81]

@silvenon If this can help, I'm having the same error message since I upgraded from React 15.6 to 16.3.2

[lazlojuly]

@srosset81 I am experiencing the same error. My React version is 15.6.2.

Copy pasted examples from the documentation page do not work: https://github.com/reactjs/react-transition-group/tree/v1-stable#high-level-api-csstransitiongroup

Did not try React 16+ no chance of upgrading my app for a while atm.

[silvenon]

There are many different issues in this thread, some seem to be related to module bundling, some to React Router, some to versions of React and react-transition-group v1 etc.

Please create a new issue with a complete demo using the issue template.

[trentbullard]

in the main documentation, the sample given imports CSSTransition with import { CSSTransition } from 'react-transition-group';

above, you indicate

// named
import { Transition, CSSTransition, TransitionGroup } from 'react-transition';

// or default
import Transition from 'react-transition/Transition';
import CSSTransition from 'react-transition/CSSTransition';
import TransitionGroup from 'react-transition/TransitionGroup';

does the documentation need to be updated?

[pifelipes]

After trying everything, for some reason it worked for me using

import CSSTransition from "react-transition-group/CSSTransition"

instead of

import { CSSTransition } from "react-transition-group"

No science, just magic.

[jdulik]

If I am using the import CSSTransition from "react-transition-group/CSSTransition" I am getting the error Module not found: Can't resolve 'react-transition-group/CSSTransition' :) I am using Typescript.

[ApathetiX]

If I am using the import CSSTransition from "react-transition-group/CSSTransition" I am getting the error Module not found: Can't resolve 'react-transition-group/CSSTransition' :) I am using Typescript.

I am having same issue. Going crazy...

[Weinrib]

@dulikkk @ApathetiX This fixed it for me..
The github.io page seems to be outdated
https://github.com/reactjs/react-transition-group/blob/master/Migration.md

[nihirv]

@dulikkk @ApathetiX I'm facing the same issue. import {CSSTransition} from 'react-transition-group' throws the Expect a string error, and import CSSTransition from 'react-transition-group/CSSTransition' throws the Module not found error.

@Weinrib I don't think there is anything in there which tells us how to fix this issue?

[jackblackCH]

Docs definitely need to be updated. Nothing works by copy pasting examples.