es6-module Standard-export-Import als undefined

Ich bin mir nicht sicher, was ich hier vermisst. Ich arbeite an einem Projekt mit jspm und es6-module-loader. Ich habe ein Modul wie folgt definiert:

import hooks from './hooks';
import api from './api';
import tools from './tools';

const StencilUtils = {
    hooks: hooks,
    api: api,
    tools: tools,
};

export {hooks, api, tools};
export default StencilUtils;

/* global define */
(function(root) {
    if (typeof define === 'function' && define.amd) {
        define(function() {
            return (root.stencilUtils = StencilUtils);
        });
    } else if (typeof module === 'object' && module.exports) {
        module.exports = StencilUtils;
    } else {
        window.stencilUtils = StencilUtils;
    }
}(this));

Ich bin beim importieren dieses Modul in einer anderen Datei, und verwenden Sie es wie so:

import utils from 'bigcommerce/stencil-utils';

utils.hooks.on('cart-item-add', (event, form) => {
    //do stuff
});

Wenn die Dateien zu laden, bekomme ich eine Fehlermeldung, dass utils ist undefined. Wenn ich die Datei so:

import {hooks} from 'bigcommerce/stencil-utils';

hooks.on('cart-item-add', (event, form) => {
    //do stuff
});

Funktioniert es einwandfrei. So, es scheint etwas nicht richtig funktioniert mit dem Standard-export-Anweisung. Gibt es etwas, was offensichtlich falsch, hier mit dem import oder export von Aussagen, die dieses Problem verursachen?

  • Offensichtlich nichts, Nein.
  • Ihr habt nicht zufällig eine zirkuläre Abhängigkeit, irgendwo, tun Sie?
  • nicht, dass ich sehen kann. Ich setzte einen Haltepunkt unmittelbar nach der import utils Zeile und die variable ist nicht definiert. Ich bin wirklich verwirrt, warum das passiert ist.
  • Ja, das klingt wie eine Menge, eine zirkuläre Abhängigkeit. Können Sie reduzieren auf Ihre Module zu erstellen, die eine vollständige, reproduzierbare Beispiel?
  • Ich werde es versuchen. Es ist schwer zu tun, weil es ein bestehendes Projekt mit vielen Abhängigkeiten im Ort. Nur um sicher zu sein, obwohl, hat die circular dependency-Theorie immer noch fit, obwohl der Fehler scheint nur zu kommen mit den Standard-export? Exportieren einer benannten Mitglied aus dem Modul scheint zu funktionieren.
  • Ja, es passt perfekt. Die eigenverantwortliche Modul verwenden können, sich selbst, weil seine Erklärungen haben bereits initialisiert worden, aber es kann nicht in der Standard-export-Objekt noch nicht angelegt wurde. Btw, das ist nur ein weiterer sehr guter Grund, warum Sie verwenden sollten benannt Export über Standard-Export von Objekten.
  • So was Suche ich genau? Eine Datei, die eine import-Anweisung auf sich? Oder könnte es sein, dass eine Datei importiert eine andere Datei und so weiter, die irgendwo auf der ganzen Linie-Importe, die original-Datei wieder?
  • Ja, beide würde eine zyklische Abhängigkeit - wenn auch eine Datei importieren selbst ist sehr ungewöhnlich (und wird nicht dazu führen, dieses problem).
  • Machen Sie keine Werkzeuge vorhanden, oder ist es eine Art Strategie für das finden dieser? Einen manuellen Abgleich Dinge nicht, mich immer und überall.
  • Ich kenne keine tools, keine, obwohl Sie nicht schwer zu bauen. Als Strategie: der Kreis löst über stencil-utils und die Datei, die importiert werden (wo Sie die Fehler), so dass ein guter Ort, um zu starten. Wenn Sie noch nicht alles bekommen, man könnte hinzufügen, ein console.log("initialising "+__filename) zu jeder einzelnen Datei, so können Sie das log prüfen, welche Module geladen und welche nicht, wenn Sie die Ausnahme.
  • Was, keine upvotes für die zirkuläre Abhängigkeit Vorschlag von @Bergi 's in einem Jahr?! Das war völlig es für mich, wenn ich importiert etwas, das wurde nicht definiert. Danke. Von Ihnen positiv bewertet werden Kommentar.
  • Vor der genauen problem. Bitte aktualisieren oder die Antwort akzeptieren! Das würde anderen helfen
  • Ich habe nie eine Lösung gefunden, um dieses eine, und das Projekt hat seit aktualisiert, um zu verwenden, webpack, so hat dies nicht kommen.

InformationsquelleAutor flyingL123 | 2016-03-30
  1. 7

    Ich denke, es gibt zwei Dinge, um dieses Problem:

    1. Wenn Sie benannt haben die Exporte Ihren Zugang entweder über importieren als Bibliothek oder mit dem zerstören von Objekten.

    Methode 1

    xyz.js

    export const a = 1;

    abc.js 

    import {a} from "xyz";

    Methode 2

    xyz.js

    export const a = 1;

    abc.js 

    import {* as myModule} from "xyz";
console.log(myModule.a);

    Also in deinem Fall

    export {hooks, api, tools};

    kann es entweder

    import * as utils from 'bigcommerce/stencil-utils';

    oder

    import {hooks} from 'bigcommerce/stencil-utils';
    1. Standard-export-Anweisung ist nicht richtig

    Kann es entweder

    export default {
    hooks: hooks,
    api: api,
    tools: tools,
};

    Oder

    const StencilUtils = {
   hooks: hooks,
   api: api,
   tools: tools,
};
export { StencilUtils as default };

    Hoffe, dies wird Ihnen helfen. Für mehr details siehe diese

    • Ich glaube nicht, dass das richtig ist. Die Standard-export-syntax, die ich zeigen, ist in Ordnung laut der Dokumentation (glaube ich), und ich habe versucht, Ihre erste Standard-export-Beispiel, aber noch nicht das problem zu beheben.
    • {* as myModule} einen syntax-Fehler
    InformationsquelleAutor Yashika Garg
Schreibe einen Kommentar