Warning: React.createElement: type is invalid -- bundle.js

Pedro Miguel Pimienta Morales picture Pedro Miguel Pimienta Morales · Feb 12, 2018 · Viewed 18.1k times · Source

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.

Issues

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.

It should be noted that errors appear in the file bundle.js, which is used to store the generated code through webpack

errores

tree

package.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'
                },
                exclude: /node_module/
            }
        ]
    }
}

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>

Console

C:\Users\PterPmntaM\CursoReactJS\React_Scaffold> npm run dev

> [email protected] dev C:\Users\PterPmntaM\CursoReactJS\React_Scaffold
> concurrently "node server.js" "webpack -w"

[0] Iniciando servidor
[1]
[1] Webpack is watching the files...
[1]
[1] Hash: 5fd2ce10b3c1788b385b
[1] Version: webpack 3.10.0
[1] Time: 4878ms
[1]     Asset    Size  Chunks                    Chunk Names
[1] bundle.js  729 kB       0  [emitted]  [big]  main
[1]   [14] ./src/index.jsx 381 bytes {0} [built]
[1]     + 27 hidden modules

Answer

kingdaro picture kingdaro · Feb 12, 2018

In app.jsx, the component is exported like so:

export default App;

But it's being imported like so:

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

The code fails because the App export doesn't exist from app.jsx, and comes up undefined as the error suggests. It's being exported as default instead.

This is the correct way to import it:

// The recommended way
import App from './components/app.jsx';

// The alternative way, to better illustrate what's going on
import { default as App } from './components/app.jsx';

Here's a good overview for ES modules: http://exploringjs.com/es6/ch_modules.html