2

Estoy tomando un tutorial para aprender React JS, todo iba bien, hace días que pude correr un ejemplo, sencillo, llevando a cabo una configuración básica recomendada, mas unos complementos mas que le agrego para reconocer la versión de Javascript.

Los errores son los siguientes

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.

Cabe aclarar que los errores aparecen en el archivo bundle.js, el cual se usa para que se almacene el código generado a través de webpack

Errores mulriples en react js

La estructura del proyecto es la siguiente:

estructure

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>

resultado en consola

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
5
  • index.jsx no necesita ser exportado? verifica todas las importaciones el 11 feb. 2018 a las 23:57
  • @x-rw que mas, del ejemplo que me estoy guiando no exporta al final nada el 11 feb. 2018 a las 23:58
  • el componente app.jsx le falta la importacion para renderizar import {render} from 'react-dom'; el 12 feb. 2018 a las 0:08
  • revisando si es eso, sale bien comenta al respuesta para calificarte men, espera el 12 feb. 2018 a las 0:11
  • @x-rw sigue igual, ve al chat a ver que podemos hacer el 12 feb. 2018 a las 0:20

1 respuesta 1

1

El error se producía debido a que estaba colocando mal la ruta en el webpack.config.js, ya que estaba de la siguiente forma

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;

Si se observa el path, esta path: path.resolve('js'), ya que no encontraba la ruta de forma correcta. Por lo cual la manera correcta según la estructura del proyecto seria

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;

forma correcta path: path.resolve('public/js')

respuesta

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.