web-dev-qa-db-fra.com

React.createElement: type n'est pas valide - attend une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais got: object

Attendu

Je devrais être capable d'exporter mon fichier de composant d'application et de l'importer dans mon index.js.

Résultats

Je reçois l'erreur suivante

React.createElement: type n'est pas valide - attend une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais got: object

Mon index.js

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./components/App');
require('./index.css');

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

Puis dans mes composants/App.js

const React = require('react');

export default class App extends React.Component {
    render() {
        return (
            <div>
                Hell World! Wasabi Sauce!
            </div>
        );
    }
}

// module.exports = App;

Si je ne commente pas module.exports = App; cela fonctionnera, mais j'essaie d'utiliser la syntaxe d'exportation. Ce qui me rend dingue, c’est dans un autre projet que je fais exactement la même chose ici et que ça fonctionne très bien :(

javascriptreactjsecmascript-6exportcommonjs
7
Leon Gaban

Le problème que vous avez rencontré est dû au mélange de deux systèmes de modules différents, qui diffèrent par la manière dont ils sont résolus et implémentés . Les modules CommonJS sont dynamiques et contrairement à cela les modules ES6 sont analysables statiquement.

Des outils tels que Babel transpilent les modules ES6 vers CommonJS pour l’instant car le support natif n’est pas encore prêt . Cependant, il existe des différences subtiles . En utilisant export par défaut (exports default) le transpiler a émis un module CommonJS avec la propriété { default } car il est possible d'exporter un nom et un export par défaut dans le module ES6. L'exemple suivant correspond parfaitement au module ES6:

export default class Test1 { }
export class Test2 { }

Cela entraînerait { default, Test2 } module CommonJS après la transcription et en utilisant require, vous obtiendrez cet objet comme valeur de retour. 

Pour importer l'exportation par défaut du module ES6 dans CommonJS, vous devez utiliser la syntaxe require(module).default pour les raisons mentionnées ci-dessus. 

Débogage de React.createElement: le type est invalide erreurs

Cette erreur est très courante lorsque React essaie de restituer un composant en cas de problème avec le module importé. La plupart du temps, cela est dû à l'absence de export dans le module ou à des problèmes de chemin (les chemins relatifs sont une sorte de plaisanterie) et sans outillage approprié, cela peut entraîner de graves problèmes de tirage.

Dans ce cas, React n'a pas pu restituer l'objet générique {__esModule: true, default: function} et a simplement généré une erreur . Lors de l'utilisation de require, il est possible d'imprimer le module requis pour voir son contenu, ce qui peut aider à résoudre le problème.

En passant, veuillez ne pas mélanger les modules CommonJS avec les modules ES6 à moins d’en avoir vraiment besoin. La syntaxe import/export est réservée aux modules ES6. Lorsque vous utilisez des modules CommonJS, utilisez simplement module.exports et utilisez require pour les importer. À l'avenir, la plupart des développeurs utiliseront le format de module standard. Jusque-là, soyez prudent lorsque vous les mélangez.

9
Przemysław Zalewski

Très souvent..

... c'est aussi simple que:

const MyModule = require('./MyModule');

contre

const {MyModule} = require('./MyModule');
6
Mick

Les modules ES6 sont déroutants. Si nous les mélangeons avec le modèle de module NodeJS commonJS, ce sera plus déroutant;), 

Je vous recommande d'utiliser un seul style, de préférence les modules ES6 si vous travaillez en code Frontend ..__ J'ai écrit un exemple d'application pour mieux le comprendre.

https://github.com/Sutikshan/es-bits/tree/master/modules

0
Sutikshan Dubey