Beim Versuch, ein Modul gemäß dem offiziellen Handbuch zu implementieren, wird folgende Fehlermeldung angezeigt:

Nicht erfasster Referenzfehler: Exporte sind nicht definiert

bei app.js: 2

Aber nirgends in meinem Code verwende ich jemals 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"
    ]
}

BEARBEITEN:

Diese Antwort funktioniert möglicherweise nicht, je nachdem, ob Sie nicht es5mehr zielen . Ich werde versuchen, die Antwort vollständiger zu gestalten.

Ursprüngliche Antwort

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

 "module": "commonjs",

Gemäß den Kommentaren funktioniert dies möglicherweise nicht mit späteren Versionen von tsc. In diesem Fall können Sie einen Modullader wie CommonJS, SystemJS oder RequireJS installieren und diesen dann angeben.

Hinweis:

Sehen Sie sich Ihre generierte main.jsDatei an tsc. Sie finden dies ganz oben:

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

Es ist die Wurzel der Fehlermeldung und nach dem Entfernen "module": "commonjs",verschwindet sie.

Nur wenige andere Lösungen für dieses Problem

• Fügen Sie die folgende Zeile vor anderen Verweisen auf Javascript hinzu. Das ist ein netter kleiner Hack.

   <script>var exports = {};</script>

• Dieses Problem tritt bei der neuesten Version von TypeScript auf. Dieser Fehler kann durch Bezugnahme auf Typoskript Version 2.1.6 behoben werden

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

und zu .babelrc Plugins hinzufügen löste meine Frage.

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

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

Dies ermöglicht es Ihnen sogar, importanstatt zu verwenden, requireob Sie ein Elektron oder etwas anderes verwenden, und es funktioniert gut mit Typoskript 3.5.1, Ziel: es3 -> esnext.

Ich habe das Problem gelöst, indem ich das "type": "module"Feld aus entfernt habe package.json.

Ich hatte das gleiche Problem und löste es wie folgt, indem ich tsconfig.json die Bibliothek " es5 " 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"
        ]
    }
}

Wenn Ihr Compiler-Ziel auf ES6 festgelegt ist, müssen Sie babel anweisen, die Modultransformation zu überspringen. Fügen Sie dies dazu Ihrer .babelrcDatei hinzu

{
  "presets": [ ["env", {"modules": false} ]]
}

Dies wird behoben, indem die moduleCompileroption auf Folgendes gesetzt wird es6:

{
  "compilerOptions": {     
    "module": "es6",
    "target": "es5",    
  }
}

Ich hatte den gleichen Fehler auch. In meinem Fall lag es daran, dass wir in unserem TypeScript AngularJS-Projekt eine altmodische Importanweisung wie folgt hatten:

import { IAttributes, IScope } from "angular";

welches wie folgt zu JavaScript kompiliert wurde:

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

Dies wurde früher benötigt, weil wir es dann IAttributesim Code verwendet haben und TypeScript sonst nicht gewusst hätte, was damit zu tun ist. Aber nachdem die import-Anweisung entfernt und IAttributesin ng.IAttributesdiese beiden JavaScript-Zeilen konvertiert wurde , verschwand sie - und auch die Fehlermeldung.

Fügen Sie einfach libraryTarget: 'umd'so hinzu

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

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

Für mich war das Entfernen "esModuleInterop": trueaus tsconfig.json der Trick.

Für einige ASP.NET-Projekte importund exportmöglicherweise überhaupt nicht in Ihren Typoskripten verwendet.

Der Fehler der Frage wurde angezeigt, als ich dies versuchte, und ich stellte erst später fest, dass ich das generierte JS-Skript nur folgendermaßen zur Ansicht hinzufügen musste :

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

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 nicht der Fall ist in webpack.config.js:

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"
  }
};

Hatte das gleiche Problem und behebt es durch Ändern der Ladereihenfolge der JS-Pakete.

Überprüfen Sie die Reihenfolge, in der die benötigten Pakete aufgerufen werden, und laden Sie sie in einer geeigneten Reihenfolge.

In meinem speziellen Fall (ohne Modulbündler) musste ich Reduxdann Redux Thunkdann laden React Redux. React ReduxVorher zu laden Redux Thunkwürde mir geben exports is not defined.

Hinweis: Dies gilt möglicherweise nicht für die Antwort von OP, aber ich habe diesen Fehler erhalten und so habe ich ihn gelöst.

Das Problem, mit dem ich konfrontiert war, war, dass ich diesen Fehler bekam, als ich eine 'js'-Bibliothek von einem bestimmten CDN abrief.

Das einzig Falsche, was ich tat, war das Importieren aus dem CDN- cjsVerzeichnis wie folgt: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

Beachten Sie das dist/cjsTeil? Dort war das Problem.

Ich ging in meinem Fall zum CDN (jsdelivr) zurück und navigierte, um den umdOrdner zu finden . Und ich konnte einen anderen Satz finden, von popper.min.jsdem die richtige Datei zum Importieren war : https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/umd/popper.min.js.

  {
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "./",
      "outDir": "./dist",
      "sourceMap": true,
      "declaration": false,
      "module": "esnext",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": ["node_modules/@types"],
      "lib": ["es2018", "dom"]
    }
  }

Ich hatte das gleiche Problem, aber mein Setup erforderte eine andere Lösung.

Ich benutze die create-react-app-rewired Paket mit einer config-overrides.jsDatei. Zuvor habe ich den addBabelPresetsImport (in der override()Methode) von verwendet customize-craund beschlossen, diese Voreinstellungen in eine separate Datei zu abstrahieren. Zufälligerweise löste dies mein Problem.

Ich useBabelRc()habe die override()Methode in hinzugefügt config-overrides.jsund eine babel.config.jsDatei mit den folgenden erstellt:

module.exports = {
    presets: [
        '@babel/preset-react',
        '@babel/preset-env'
    ],
}