Home / Questions / 137796
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-02-12 15:40:44 +0800 CST 2020-02-12 15:40:44 +0800 CST

React.createElement: type is invalid

  • 772

I am taking a tutorial to learn React JS, everything was going well, a few days ago I was able to run an example, simple, carrying out a recommended basic configuration, plus some more complements that I add to recognize the version of Javascript.

The errors are as follows

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 the errors appear in the file bundle.js, which is used to store the generated code throughwebpack

Multiple errors in react js

The structure of the project is as follows:

structure

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>

result in 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
javascript

1 Answers

  1. Best Answer

    The error occurred because I was misplacing the path in the webpack.config.js, since it was in the following form

    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;

    If the path is observed, it is path: path.resolve('js'), since it did not find the path correctly. Therefore, the correct way according to the structure of the project would be

    const path = require('path');

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

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

    module.exports = config;

    correct waypath: path.resolve('public/js')

    response

    • 1