React: Warning: React.createElement: type is invalid -- expected a string

Created on 12 Feb 2018 · 27Comments · Source: facebook/react

I'm taking a tutorial to learn React JS, everything was fine, for days I could run an example, simple, carrying out a recommended basic configuration, plus a few more add-ons that I add to recognize the Javascript version.

After several days of no longer reviewing the project, but it is working correctly, when executing the command, I do not see any error, but it does not show anything in the browser, only multiple errors appear in the console of this one.

I have uninstalled and reinstalled reac and react-dom, and the problem still persists, try a new project cloning it from a friend, and it works normally, and it only copied the same structure of mine.

Warning: React.createElement: 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.

The above error occurred in one of your React components: Consider adding an error boundary to your tree to customize error handling behavior.

issues

project structure

Packge.json

{
  "name": "prueba",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "concurrently \"node server.js\" \"webpack -w\" "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "serve-static": "^1.13.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "concurrently": "^3.5.1",
    "eslint": "^4.9.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-import": "^2.7.0",
    "webpack": "^3.10.0"
  }
}

webpack.config.js

const path = require('path');

const config = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('js'),
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {                
                test: /.jsx$/,
                use:{
                    loader:'babel-loader'
                }
            }
        ]
    }
}

module.exports = config;

app.jsx

import React, {Component} from 'react';
import {render} from 'react-dom';

class App extends Component{
    render(){
        return(
            <div>                
                <h1>Mi Aplicacion React Js</h1>
                <h3>Probando la exportacion</h3>
            </div>
        )       
    }
}

export default App;

index.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import {App} from './components/app.jsx';

render(
    <App/>,
    document.getElementById('appStart')
)

index.html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8">
        <title>Aprendiendo React</title>
    </head>

    <body>
        <div id="appStart"></div>
        <script src="js/bundle.js"></script>
    </body>

</html>

Source

PterPmnta

Most helpful comment

The error message says "you might have mixed up default and named exports".

export default App;

is a default export. To import it, you need to use the default import

import App from './components/app.jsx';

Note the lack of curly braces.

If you use curly braces when importing, you're importing a named import called App:

import {App} from './components/app.jsx';

In this case there needs to be a corresponding named export called App:

export {App};

Note the presence of curly braces in both places.

Learn more: https://stackoverflow.com/a/36796281/458193

gaearon on 12 Feb 2018

👍121 ❤28 🚀10 😄5 🎉4 👎3

All 27 comments

import App from './components/app.jsx';

shiyiya on 12 Feb 2018

👍4

The error message says "you might have mixed up default and named exports".

export default App;

is a default export. To import it, you need to use the default import

import App from './components/app.jsx';

Note the lack of curly braces.

If you use curly braces when importing, you're importing a named import called App:

import {App} from './components/app.jsx';

In this case there needs to be a corresponding named export called App:

export {App};

Note the presence of curly braces in both places.

Learn more: https://stackoverflow.com/a/36796281/458193

gaearon on 12 Feb 2018

👍121 ❤28 🚀10 😄5 🎉4 👎3

@ShiYiYa dont work, @gaearon why close the question, the issue dont solved yet

PterPmnta on 12 Feb 2018

👎5

@PterPmnta I have just answered your question, the problem you're seeing is because you are mixing a default export with a named import. Use one or the other. If it doesn't help, post more details about what exactly doesn't work—we can't guess that. :-)

gaearon on 12 Feb 2018

👍5

@gaearon still the same problem, i dont know why still happened

PterPmnta on 12 Feb 2018

👎14 👍1

Maybe you didn't recompile or something. It's hard to say for sure without having a full reproducible project that we can download and try.

gaearon on 12 Feb 2018

@gaearon wait a minute, i am upload the project, give me a second

PterPmnta on 12 Feb 2018

To clarify, the specific fix I'm suggesting is to replace this:

import {App} from './components/app.jsx';

with this:

import App from './components/app.jsx';

Then rebuild. If you still see the problem please post your full code and screenshots again.

gaearon on 12 Feb 2018

🎉4 🚀1 ❤1

@gaearon i ame this change, but still issue

PterPmnta on 12 Feb 2018

@gaearon cheack the repo react scaffold 2

PterPmnta on 12 Feb 2018

As I asked you earlier please provide exact instructions for how to reproduce the issue, and screenshots.

It is hard for people to help when there is no information about what error you are seeing. Is it the same error? Has it changed?

gaearon on 12 Feb 2018

@gaearon the error is the same, just write npm run dev

"dev": "concurrently \"node server.js\" \"webpack -w\" "

PterPmnta on 12 Feb 2018

For some reason even if I change code in src/index.jsx I still get the old compiled bundle. I don't know why, but it's unrelated to React. Your code looks correct but something in your build process is caching the output file.

gaearon on 12 Feb 2018

@gaearon i solved, an user answer in stackoverflow this answer

PterPmnta on 12 Feb 2018

👍3

@gaearon Thanks a lot it save my day 💯

ashikjs on 25 May 2018

This is mainly due to the wrong import/export path, just change to the correct path then the error gone.

Htnew on 3 Aug 2018

In my case, It was happening as I was importing Provider from redux instead of react-redux
import {Provider} from 'redux'
import {Provider} from 'react-redux'

abdulkhaliquem9 on 28 Oct 2018

👍5

For me it was to wrap the context consumer with a class--HOC--rather than a stateless component.

MANTENN on 29 Oct 2018

In my case, It was happening as I was importing Provider from redux instead of react-redux
import {Provider} from 'redux'
import {Provider} from 'react-redux'

Thanks @abdulkhaliquem9 U saved my ass

joladubu on 22 Jan 2019

😄2 👍1

@gaearon This error is common for new React developers and some times even for experienced ones. It will be a great help if the warning message can also include the import or require statement this warning originated.

rashid-aslam on 27 May 2019

👍6

Hi guys, I have the same issue. No one solution above is not help...

import "isomorphic-fetch";
import "babel-polyfill";
import React from "react";
import { hot } from "react-hot-loader";
import { Route, Link, Switch, Redirect } from 'react-router-dom';

import Header from "./components/Header";
import HomePage from "./pages/HomePage";
import MoviesList from "./components/MoviesList";
import MoviePage from "./pages/MoviePage";

const Root = ({ Router, location, context }) => (

  <Router location={location} context={context}>
    <div>
      <Header />
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="movies/:id" component={MoviePage} />
        <Redirect to="/" />
      </Switch>
      <MoviesList />
    </div>
  </Router>
  );

Root.defaultProps = {
  location: null,
  context: null,
};

export default hot(module)(Root);

The issue is here....

Novikov-Ilya on 18 Jun 2019

@gaearon - How can we possibily check such dependencies - incorrect library used ?

rudenco on 29 Oct 2019

@PterPmnta - thank you for posting this question and being persistent to solve it. This helped to solve my issue too . I did suspect there could be library dependencies but did not know ho to check it , the only Approach I did was to reinstall multiple times the libraries.

rudenco on 29 Oct 2019

Hi guys, I have the same issue. No one solution above is not help...

import "isomorphic-fetch";
import "babel-polyfill";
import React from "react";
import { hot } from "react-hot-loader";
import { Route, Link, Switch, Redirect } from 'react-router-dom';

import Header from "./components/Header";
import HomePage from "./pages/HomePage";
import MoviesList from "./components/MoviesList";
import MoviePage from "./pages/MoviePage";

const Root = ({ Router, location, context }) => (

  <Router location={location} context={context}>
    <div>
      <Header />
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="movies/:id" component={MoviePage} />
        <Redirect to="/" />
      </Switch>
      <MoviesList />
    </div>
  </Router>
  );

Root.defaultProps = {
  location: null,
  context: null,
};

export default hot(module)(Root);

The issue is here....

The problem is definitly with exporting and importing things, as mentioned above. Anyway.

Have you tried to import components in this manner ?
import { default as Header } from "./components/Header"

If you're dealing with a large project, I would also suggest looking into your index files. It is possible that components should be exported from there, in your project.

If it doesn't work, can you please provide more information about your problem? Like sandbox, Codepen, or something similar?

crllrd on 25 Nov 2019

I had the same problem and turned out that I was importing
both the NPM Package for Bootstrap and importing the React Bootstrap Link as well.

I had both:
import { Modal, Button } from 'react-bootstrap';
and
import "bootstrap/dist/css/bootstrap.min.css";

I just had to delete the additional React Bootstrap Link.

Such a silly mistake.

ahmedakhtar11 on 22 Dec 2019

I am still facing this issue while using High order components in react

Gameonn on 11 Jul 2020

Turns out I was doing this:

import React from "react"
const MyCoolComponent = (
  <div>hi</div>
)

When really I needed to do:

import React from "react"
const MyCoolComponent = () => (
  <div>hi</div>
)

Function components only work when you use a _function_, not just a JSX snippet

milieu on 23 Aug 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Re-render element in componentDidMount at once Error:Cannot read property 'rootID' of null.

h1orz · 3Comments

Input onChange not triggered every time in IE11 if e.preventDefault() used

jmullo · 3Comments

[Docs] [Question] Refs - Callback vs String

hnordt · 3Comments

Variable refers to new Date() can not be a child element.

krave1986 · 3Comments

Remove event listener used with bind in ES6 syntax ?

UnbearableBear · 3Comments