React.createElement: type is invalid

Question

React.createElement: type is invalid

Navigation

#1 by (0 votes)

1

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

The errors are as follows

Warning: React.createElement: type is invalid - expected to 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 through webpack

The structure of the project is as follows:

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 nodejs reactjs webpack

asked by Pedro Miguel Pimienta Morales 12.02.2018 в 00:40

source

1 answer

Sort alphabetically in a binary tree Efficient way to connect to an external DB [closed]

score 0 · Accepted Answer

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

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, this path: path.resolve('js') , since it could not find the path correctly. So 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 form path: path.resolve('public/js')

answer