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

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>

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 28

Most upvoted comments

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

+189

gaearon on Feb 12, 2018

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

+15

PterPmnta on Feb 12, 2018

@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 May 27, 2019

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 Feb 12, 2018

@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 Feb 12, 2018

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

PterPmnta on Feb 12, 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 Oct 28, 2018

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

shiyiya on Feb 12, 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 Jan 22, 2019

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

PterPmnta on Feb 12, 2018

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 Aug 23, 2020