it-swarm.com.de

React.createElement: type ist ungültig - erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber got: object

Erwartet

Ich sollte in der Lage sein, meine App-Komponentendatei zu exportieren und in meine index.js zu importieren.

Ergebnisse

Ich erhalte folgende Fehlermeldung

React.createElement: type ist ungültig - erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber got: object


Meine 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')
);

Dann in meinen Komponenten/App.js

const React = require('react');

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

// module.exports = App;

Wenn ich module.exports = App; kommentiere, wird es funktionieren, aber ich versuche die Exportsyntax zu verwenden. Was mich verrückt macht, ist in einem anderen Projekt. Ich mache genau dasselbe hier und es funktioniert gut :(

7
Leon Gaban

Das Problem, auf das Sie gestoßen sind, wurde durch das Mischen von zwei verschiedenen Modulsystemen verursacht, die sich in der Art und Weise unterscheiden, in der sie gelöst und implementiert sind. CommonJS-Module sind dynamisch und im Gegensatz dazu ES6-Module sind statisch auswertbar.

Werkzeuge wie Babel verschieben ES6-Module vorerst auf CommonJS, da native Unterstützung ist noch nicht bereit . Es gibt jedoch geringfügige Unterschiede. Durch die Verwendung von Standardexport (exports default) hat der Transpiler ein CommonJS-Modul mit der { default }-Eigenschaft ausgegeben, da in ES6-Modul ein Name und ein Standardexport vorhanden sein können. Folgendes Beispiel ist ein perfekt gültiges ES6-Modul:

export default class Test1 { }
export class Test2 { }

Dies würde zu einem { default, Test2 } CommonJS-Modul nach dem Transpiling führen und durch Verwendung von require erhalten Sie dieses Objekt als Rückgabewert. 

Um den Standardexport des ES6-Moduls in CommonJS zu importieren, müssen Sie die require(module).default-Syntax aus den oben genannten Gründen verwenden. 


Debuggen von React.createElement: type ist ungültige Fehler

Dieser Fehler tritt sehr häufig auf, wenn React versucht, eine Komponente zu rendern, wenn ein Problem mit dem importierten Modul vorliegt. Meistens wird dies dadurch verursacht, dass export im Modul fehlt oder Probleme mit dem Pfad auftreten (relative Pfade sind eine Art Scherz). Ohne geeignete Werkzeuge kann dies zu ernsthaftem Haarziehen führen.

In diesem Fall konnte React das generische Objekt {__esModule: true, default: function} nicht rendern und gab nur einen Fehler aus. Bei der Verwendung von require besteht die Möglichkeit, das erforderliche Modul auszudrucken, um dessen Inhalt zu sehen, wodurch das Problem möglicherweise behoben wird.


Als Randbemerkung mischen Sie bitte keine CommonJS-Module mit ES6-Modulen, es sei denn, Sie benötigen dies wirklich. Die import/export-Syntax ist für die ES6-Module reserviert. Verwenden Sie bei Verwendung von CommonJS-Modulen einfach module.exports und verwenden Sie require, um sie zu importieren. In der Zukunft verwenden die meisten Entwickler das Standardmodulformat. Seien Sie bis dahin vorsichtig, wenn Sie sie miteinander mischen.

Sehr oft..

... es ist so einfach wie:

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

vs

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

Ich hatte das gleiche Problem, ich habe diesen Trick gemacht, für mich gearbeitet,

sie müssen nur export vor class App setzen.

export class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

sie können auch Ihren Router überprüfen, den Sie verwenden. Ich habe dies für mich verwendet.

npm install [email protected] --save
0
Ashish Kamble

ES6-Module sind verwirrend. Wenn wir sie mit dem NodeJS-CommonJS-Modulmuster mischen, wird es verwirrender sein;), 

Ich würde empfehlen, einen einzigen Stil zu verwenden, vorzugsweise ES6-Module, wenn Sie mit Frontend-Code arbeiten. Ich habe eine Beispiel-App geschrieben, um sie besser zu verstehen.

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

0
Sutikshan Dubey