Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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>

Issue Analytics

State:
Created 6 years ago
Comments:28 (6 by maintainers)

Top GitHub Comments

188reactions

gaearoncommented, Feb 12, 2018

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

15reactions

PterPmntacommented, Feb 12, 2018

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

Top Results From Across the Web

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

If you use react-router-config make sure you use the component property instead of render , because the package doesn't support the later.

(React) Element type is invalid, expected a string (for built in ...

To solve the error "Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got",...

React.createElement: type is invalid — expected a string

This somewhat cryptic error usually has a simple solution. More often than note a quick notation fix can solve the issue. What's the...

Error React createElement type is invalid expected a string for ...

Error React createElement type is invalid expected a string for built-in components or a class function for composite components but got object.

Error: Warning: React.createElement: type is invalid

]index.js:1 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite ...