Próbując wdrożyć moduł zgodnie z oficjalnym podręcznikiem , otrzymuję następujący komunikat o błędzie:

Uncaught ReferenceError: nie zdefiniowano eksportu

w app.js: 2

Ale nigdzie w moim kodzie nie używam tego imienia exports.

Jak mogę to naprawić?

Pliki

app.ts

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

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

moduł-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"
    ]
}

EDYTOWAĆ:

Ta odpowiedź może nie działać, w zależności od tego, czy nie jesteś es5już celem , postaram się uzupełnić odpowiedź.

Oryginalna odpowiedź

Jeśli CommonJS nie jest zainstalowany ( co definiujeexports ), musisz usunąć ten wiersz z tsconfig.json:

 "module": "commonjs",

Zgodnie z komentarzami, to samo może nie działać z późniejszymi wersjami tsc. W takim przypadku można zainstalować moduł ładujący, taki jak CommonJS, SystemJS lub RequireJS, a następnie to określić.

Uwaga:

Spójrz na wygenerowany main.jsplik tsc. Znajdziesz to na samej górze:

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

Jest to źródło komunikatu o błędzie i po usunięciu "module": "commonjs",zniknie.

Kilka innych rozwiązań tego problemu

• Dodaj następujący wiersz przed innymi odwołaniami do JavaScript. To miły mały hack.

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

• Ten problem występuje w najnowszej wersji języka TypeScript. Ten błąd można wyeliminować, odwołując się do maszynopisu w wersji 2.1.6

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

i dodanie do .babelrc wtyczek rozwiązało moje pytanie.

Rozwiązałem problem, usuwając "type": "module"pole z package.json.

moje rozwiązanie jest podsumowaniem wszystkiego powyżej z małymi sztuczkami, które dodałem, w zasadzie dodałem to do mojego kodu HTML

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

pozwala to nawet na użycie importzamiast, requirejeśli używasz elektronu lub czegoś podobnego, i działa dobrze z maszynopisem 3.5.1, target: es3 -> esnext.

Miałem ten sam problem i rozwiązałem go dodając bibliotekę " es5 " do tsconfig.json w następujący sposób:

{
    "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"
        ]
    }
}

Dla osób, które nadal mają ten problem, jeśli docelowy kompilator jest ustawiony na ES6, musisz powiedzieć babelowi, aby pominął transformację modułu. Aby to zrobić, dodaj to do swojego .babelrcpliku

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

Można to naprawić, ustawiając moduleopcję kompilatora na es6:

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

Miałem też ten sam błąd. W moim przypadku było tak, ponieważ mieliśmy staromodną instrukcję importu w naszym projekcie TypeScript AngularJS w następujący sposób:

import { IAttributes, IScope } from "angular";

który został skompilowany do JavaScript w następujący sposób:

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

Było to potrzebne w dawnych czasach, ponieważ używaliśmy wtedy IAttributeskodu, a TypeScript nie wiedziałby, co z tym zrobić w inny sposób. Ale po usunięciu instrukcji importu i konwersji IAttributesdo ng.IAttributestych dwóch wierszy JavaScript zniknął - podobnie jak komunikat o błędzie.

Po prostu dodaj libraryTarget: 'umd', tak

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

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

dla mnie, usunięcie "esModuleInterop": truez tsconfig.json załatwiło sprawę.

W przypadku niektórych projektów ASP.NET importi exportmoże nie być w ogóle używany w skryptach Typescripts.

Błąd pytania pojawił się, gdy próbowałem to zrobić i dopiero później odkryłem, że muszę tylko dodać wygenerowany skrypt JS do widoku w następujący sposób:

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

Wypróbuj to, co @iFreilicht zasugerował powyżej. Jeśli to nie zadziałało po zainstalowaniu pakietu webpacka i wszystkiego innego, być może właśnie skopiowałeś konfigurację pakietu internetowego z innego miejsca online i skonfigurowałeś tam, że chcesz, aby dane wyjściowe przez pomyłkę obsługiwały CommonJS. Upewnij się, że tak nie jest w przypadku 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"
  }
};

Miałem ten sam problem i naprawiłem go, zmieniając kolejność ładowania pakietów JS.

Sprawdź kolejność wywoływania potrzebnych pakietów i załaduj je w odpowiedniej kolejności.

W moim konkretnym przypadku (nie używając modułu Bundler) I potrzebne do obciążenia Redux, a następnie Redux Thunk, po czym React Redux. Ładowanie React Reduxwcześniej Redux Thunkdałoby mi exports is not defined.

Uwaga: to może nie mieć zastosowania do odpowiedzi OP, ale otrzymywałem ten błąd i tak go rozwiązałem.

Tak więc problem, z którym się zmagałem, polegał na tym, że otrzymywałem ten błąd podczas pobierania biblioteki „js” z określonej sieci CDN.

Jedyną złą rzeczą, jaką robiłem, było importowanie z katalogu CDN w następujący cjssposób: https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/cjs/popper.min.js

Zwróć uwagę na dist/cjsczęść? Tam był problem.

Wróciłem do CDN (jsdelivr) w moim przypadku i przeszedłem, aby znaleźć umdfolder. I udało mi się znaleźć innego zestawu popper.min.js, który był poprawny plik do importu: https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/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"]
    }
  }

Miałem ten sam problem, ale moja konfiguracja wymagała innego rozwiązania.

Używam create-react-app-rewiredpakietu z config-overrides.jsplikiem. Wcześniej korzystałem z addBabelPresetsimportu (w override()metodzie) z customize-crai postanowiłem wyodrębnić te presety do oddzielnego pliku. Przypadkowo rozwiązało to mój problem.

Dodałem useBabelRc()do override()metody w config-overrides.jsi utworzyłem babel.config.jsplik z następującymi elementami:

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