Ich erhalte einen TypeError für den Webpack, wenn ich versuche, einen Import zu vereinfachen. Der folgende Code funktioniert ohne Probleme. Hier importiere ich eine reaktive Komponente höherer Ordnung (HOC) namens smartForm von core/components/form/index.js .
core / components / form / index.js (führt einen benannten Export von smartForm durch)
login-form.jsx (importiert und verwendet smartForm )
Ich möchte jedoch den Import auf nur import { smartForm } from 'core' vereinfachen. Also habe ich smart-form in core/index.js erneut exportiert und von core importiert. Siehe den folgenden Code:
core / index.js (führt einen benannten Export von smartForm durch)
login-form.jsx (importiert und verwendet smartForm )
Dieser Code kompiliert ohne Probleme, aber ich bekomme die folgende Laufzeitausnahme an der Zeile export default smartForm(LoginForm); :
login-form.jsx: 83 Uncaught TypeError: webpack_require .i (...) ist keine Funktion (...)
Was vermisse ich?
P.S. Hier sind die Bable und Plugin-Versionen, die ich verwende:
%Vor% Für den Fragesteller: Fügen Sie dies zu Ihrem webpack.config.js :
Für die allgemeine Zielgruppe: Stellen Sie sicher, dass das Objekt, das Sie importieren möchten, tatsächlich in diesem Paket vorhanden ist.
Sie versuchen, die Exporte Ihres Moduls auf dieselbe Weise zu importieren, wenn Sie etwas aus einem npm-Paket aus dem Ordner node_modules importieren: import { something } from 'packagename'; . Das Problem dabei ist, dass es nicht out of the box funktioniert. Die Node.js-Dokumente geben die Antwort auf den Grund:
Ohne ein vorangestelltes '/', './' oder '../' zur Angabe einer Datei muss das Modul entweder ein Kernmodul sein oder wird aus einem
node_modules-Ordner geladen.
Sie müssen also entweder tun, was Waldo Jeffers und Spanien Train vorgeschlagen und schreiben import { smartForm } from './core' , oder Sie können Webpack konfigurieren, damit es Ihren Importpfad auflösen kann über seine Aliase , die erstellt werden, um genau dieses Problem zu lösen.
Dieser Fehler kann auftreten, wenn Sie versuchen, etwas aus einem vorhandenen npm-Paket zu importieren (in node_modules ), aber das importierte Element in den Exports nicht vorhanden ist . In diesem Fall sollten Sie sicherstellen, dass keine Tippfehler vorhanden sind und dass das angegebene Objekt, das Sie zu importieren versuchen, tatsächlich in diesem Paket enthalten ist. Heutzutage ist es im Trend, Bibliotheken in mehrere npm-Pakete zu zerlegen, die Sie möglicherweise aus einem falschen Paket importieren möchten.
Wenn Sie also so etwas bekommen:
%Vor% Um mehr Informationen darüber zu erhalten, welchen Import Sie überprüfen sollten, öffnen Sie einfach die von webpack erzeugte Ausgabedatei und gehen Sie zu der Zeile, die durch die oberste Zeile im Fehler-Stack markiert ist (in diesem Fall 165080). Sie sollten etwas wie: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9_react_router_dom__["match"]) sehen. Dies sagt uns, dass es in match keinen react-router-dom export gibt (oder es gibt, aber es ist keine Funktion), also müssen wir unsere Sachen rund um diesen Import überprüfen.
Da core ein Ordner Ihrer App und kein npm-Modul ist, kann Webpack nicht verstehen, welche Datei Sie laden möchten. Sie müssen einen korrekten Pfad verwenden, der auf eine Datei verweist. Sie müssen import { smartForm } from 'core'; durch import { smartForm } from './core/index.js
Tags und Links reactjs webpack ecmascript-6 babeljs es6-module-loader