it-swarm.com.de

Typescript ReferenceError: Exporte sind nicht definiert

Beim Versuch, ein Modul zu implementieren, das dem offiziellen Handbuch folgt, erhalte ich folgende Fehlermeldung:

Nicht gefundener ReferenceError: Exporte sind nicht definiert

bei app.js: 2

Aber nirgendwo in meinem Code verwende ich den Namen exports.

Wie kann ich das beheben?


Dateien

app.ts

let a = 2;
let b:number = 3;

import Person = require ('./mods/module-1');

modul-1.t

 export class Person {
  constructor(){
    console.log('Person Class');
  }
}
export default Person;

tsconfig.json

{
   "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outDir": "scripts/"
    },
    "exclude": [
        "node_modules"
    ]
}
54
George C.

BEARBEITEN:

Diese Antwort funktioniert möglicherweise nicht, wenn Sie nicht mehr auf es5 ausgerichtet sind. Ich werde versuchen, die Antwort vollständiger zu gestalten.

Ursprüngliche Antwort

Wenn CommonJS nicht installiert ist ( was exports definiert), müssen Sie diese Zeile aus Ihrem tsconfig.json entfernen:

 "module": "commonjs",

Wie in den Kommentaren kann dies allein mit späteren Versionen von tsc nicht funktionieren. In diesem Fall können Sie einen Modullader wie CommonJS, SystemJS oder RequireJS installieren und dann angeben.

Hinweis:

Schauen Sie sich Ihre main.js-Datei an, die tsc generiert hat. Sie finden das ganz oben:

Object.defineProperty(exports, "__esModule", { value: true });

Es ist das Stammverzeichnis der Fehlermeldung und nach dem Entfernen von "module": "commonjs", verschwindet es.

21
iFreilicht

Einige andere Lösungen für dieses Problem

  • Fügen Sie vor anderen Verweisen auf Javascript die folgende Zeile ein. Dies ist ein schöner kleiner Hack.
   <script>var exports = {};</script>
  • Dieses Problem tritt bei der neuesten Version von TypeScript auf. Dieser Fehler kann unter Bezugnahme auf TypeScript Version 2.1.6 behoben werden
18

Wenn Ihr Compilerziel auf ES6 eingestellt ist, müssen Sie babel anweisen, die Modulumwandlung zu überspringen. Fügen Sie dies Ihrer .babelrc-Datei hinzu

{
  "presets": [ ["env", {"modules": false} ]]
}
4
Cezar Augusto

Fügen Sie einfach libraryTarget: 'umd' hinzu

const webpackConfig = {
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  }
};

module.exports = webpackConfig; // Export all custom Webpack configs.
1

meine Lösung ist eine Zusammenfassung von allem, was oben steht, mit kleinen Tricks, die ich hinzugefügt habe. Im Grunde habe ich dies zu meinem HTML-Code hinzugefügt

<script>var exports = {"__esModule": true};</script>
<script src="js/file.js"></script>

dies ermöglicht es Ihnen sogar, import anstelle von require zu verwenden, wenn Sie ein Elektron oder etwas anderes verwenden, und es funktioniert einwandfrei mit TypeScript 3.5.1, Ziel: es3 -> esnext.

1

npm install @babel/plugin-transform-modules-commonjs 

und füge zu .babelrc plugins meine Frage hinzu.

1
Yi Zhang

Die akzeptierte Antwort hat das Problem für mich nicht gelöst. Stattdessen richte ich die Verwendung von RequireJS (AMD-Implementierung) ein. Ich habe meine Lösung unter https://stackoverflow.com/a/48436147/1019307 geschrieben.

1
HankCa

Es gibt eine Beziehung zwischen der Option "Modul" und der Option "Ziel" in den Compileroptionen (wie dokumentiert hier ): 

--Modul -m 

schnur 

ziel === "ES3" oder "ES5"? "CommonJS": "ES6" 

Geben Sie die Modulcode-Generierung an: "Keine", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015" oder "ESNext". ► In .__ können nur "AMD" und "System" verwendet werden. Verbindung mit --outFile. ► Werte "ES6" und "ES2015" können verwendet werden bei Ausrichtung auf "ES5" oder niedriger.

Da der Standardwert des Moduls vom Ziel abhängig ist, müssen Sie beide Optionen und die Art und Weise, wie Sie Ihre Module laden, berücksichtigen, um die richtigen Optionen zu erhalten, die zu Ihrem Code passen.

Wenn Sie auf ES5 abzielen, müssen Sie eine andere Option als den Standardwert in Betracht ziehen und die Art und Weise ändern, in der Sie Ihr Modul entsprechend laden.

0
Matthieu

Bei einigen ASP.NET-Projekten werden import und export möglicherweise überhaupt nicht in Ihren Typenskripten verwendet.

Der Fehler der Frage trat auf, als ich es versuchte, und ich stellte erst später fest, dass ich das generierte JS-Skript einfach zum View hinzufügen musste:

<script src="~/scripts/js/[GENERATED_FILE].Index.js" asp-append-version="true"></script>
0
CPHPython

Ich hatte auch den gleichen Fehler. In meinem Fall war es so, weil wir in unserem TypeScript AngularJS-Projekt eine altmodische Importanweisung hatten:

import { IAttributes, IScope } from "angular";

das wurde zu JavaScript wie folgt kompiliert:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });

Dies war früher nötig, weil wir dann IAttributes im Code verwendeten und TypeScript sonst nicht gewusst hätte, was damit zu tun ist. Nach dem Entfernen der import-Anweisung und dem Konvertieren von IAttributes in ng.IAttributes verschwanden diese beiden JavaScript-Zeilen - und auch die Fehlermeldung.

0
MatX

Versuchen Sie, was @iFreilicht oben vorgeschlagen hat. Wenn dies nach der Installation von WebPack und allem nicht funktioniert hat, haben Sie möglicherweise gerade eine WebPack-Konfiguration von irgendwo online kopiert und dort so konfiguriert, dass die Ausgabe versehentlich CommonJS unterstützt. Stellen Sie sicher, dass dies in webpack.config.js nicht der Fall ist:

module.exports = {
  mode: process.env.NODE_ENV || "development",
  entry: { 
    index: "./src/js/index.ts"
  },
  ...
  ...
  output: {
    libraryTarget: 'commonjs',         <==== DELETE THIS LINE
    path: path.join(__dirname, 'build'),
    filename: "[name].bundle.js"
  }
};
0
duliba

Ich hatte das gleiche Problem und löste es, indem ich " es5 " -Bibliothek zu tsconfig.json wie folgt hinzufügte:

{
    "compilerOptions": {
        "target": "es5", //defines what sort of code ts generates, es5 because it's what most browsers currently UNDERSTANDS.
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true, //for angular to be able to use metadata we specify in our components.
        "experimentalDecorators": true, //angular needs decorators like @Component, @Injectable, etc.
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [
            "es2016",
            "dom",
            "es5"
        ]
    }
}
0
rubensa