web-dev-qa-db-fra.com

Avertissement: React.createElement: le type n'est pas valide - bundle.js

Je prends un tutoriel pour apprendre React JS, tout allait bien, pendant des jours, je pouvais exécuter un exemple, simple, réalisant une configuration de base recommandée, plus quelques add-ons supplémentaires que je ajouter pour reconnaître la version Javascript.

Après plusieurs jours de ne plus revoir le projet, mais il fonctionne correctement, lors de l'exécution de la commande, je ne vois aucune erreur, mais il n'affiche rien dans le navigateur, seules plusieurs erreurs apparaissent dans la console de celui-ci.

J'ai désinstallé et réinstallé reac et react-dom, et le problème persiste, essayez un nouveau projet en le clonant à partir d'un ami, et cela fonctionne normalement, et il n'a copié que la même structure que la mienne.

Problèmes

Avertissement: React.createElement: le type n'est pas valide - attendait une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais a obtenu: non défini. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini, ou vous avez peut-être mélangé les importations par défaut et nommées.

L'erreur ci-dessus s'est produite dans l'un de vos composants React: envisagez d'ajouter une limite d'erreur à votre arborescence pour personnaliser le comportement de gestion des erreurs.

Il est à noter que des erreurs apparaissent dans le fichier bundle.js, qui est utilisé pour stocker le code généré via 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>
        )       
    }
}

exporter l'application par défaut;

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
javascriptnode.jsreactjswebpackreact-dom
5
Pedro Miguel Pimienta Morales

Dans app.jsx, le composant est exporté comme suit:

export default App;

Mais il est importé comme ceci:

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

Le code échoue car l'exportation App n'existe pas à partir de app.jsx et revient undefined comme le suggère l'erreur. Il est plutôt exporté en tant que default.

C'est la bonne façon de l'importer:

// 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';

Voici un bon aperçu des modules ES: http://exploringjs.com/es6/ch_modules.html

7
kingdaro