TypScript ReferenceError: экспорт не определен

Пытаясь внедрить модуль, следующий за официальным справочником, я получаю это сообщение об ошибке:

Uncaught ReferenceError: экспорт не определен

at app.js: 2

Но нигде в моем коде я никогда не использовал exports названий.

Как я могу это исправить?

файлы

app.ts

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

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

Модуль-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"
    ]
}

ОТВЕТЫ

Ответ 1

РЕДАКТИРОВАТЬ:

Этот ответ может не работать, если вы больше не нацеливаете на es5, я постараюсь сделать ответ более полным.

Оригинальный ответ

Если CommonJS не установлен (который определяет exports), вы должны удалить эту строку из своего tsconfig.json:

 "module": "commonjs",

Согласно комментариям, это само по себе может не работать с более поздними версиями tsc. Если это так, вы можете установить загрузчик модуля, такой как CommonJS, SystemJS или RequireJS, а затем указать это.

Заметка:

Посмотрите на свой main.js файл, который tsc генерируемой. Вы найдете это на самом верху:

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

Это корень сообщения об ошибке, и после удаления "module": "commonjs",, он исчезнет.

Ответ 2

Немногие другие решения для этой проблемы

  • Добавьте следующую строку перед другими ссылками на Javascript. Это хороший маленький взлом.
   <script>var exports = {};</script>
  • Эта проблема возникает с последней версией TypeScript, эту ошибку можно устранить, ссылаясь на машинописную версию 2.1.6

Ответ 3

Для людей, все еще имеющих эту проблему, если ваша цель для компилятора установлена в ES6, вам нужно сообщить babel о пропуске преобразования модуля. Для этого добавьте это в свой .babelrc файл

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

Ответ 4

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

и добавление к плагинам .babelrc решило мой вопрос.

Ответ 5

мое решение представляет собой сумму всего вышеперечисленного с небольшими хитростями, которые я добавил, в основном я добавил это в свой HTML-код

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

это даже позволяет вам использовать import вместо require если вы используете электрон или что-то еще, и он отлично работает с машинописным шрифтом 3.5.1, target: es3 → esnext.

Ответ 6

У меня была такая же проблема, и решить ее, добавив "ES5" библиотеку tsconfig.json, как это:

{
    "compilerOptions": {
        "target": "es5", //defines what sort of code ts generates, es5 because it 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"
        ]
    }
}

Ответ 7

Принятый ответ не решил проблему для меня. Вместо этого я настраиваю на использование RequireJS (AMD Implementation). Я написал свое решение на fooobar.com/questions/2397296/....

Ответ 8

Просто добавьте libraryTarget: 'umd', вот так

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

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

Ответ 9

В нашем случае:

добавив:

"include": [
  "www/*.ts"
]

to tsconfig.json решил это.

Ответ 10

Если вы нацелены на ES5 или ниже, просто нацелитесь на ES6 и используйте модульную систему ES2015. По- видимому, один из этих двух изменений обеспечивает поддержку exports пункта, что машинописи transpiler, tsc, генерирует в своем выходе .js.

Я использую Visual Studio 2019 с проектом ASP.NET MVC, основанным на .NET Framework v4.x. Я изменил эти настройки в Свойствах проекта, на вкладке Сборка TypeScript. Я не смог бы использовать модульную систему ES2015, пока не выбрал ES6. Что работает в этом случае, потому что все пользователи (предполагается, что) используют Chrome.

Единственная причина, по которой я не стал бы ориентироваться на ES6, заключалась в том, что некоторые пользователи все еще использовали IE. Даже тогда я мог бы подтолкнуть их к обновлению до другого браузера, если это возможно.

Примечание. В этой версии Visual Studio по умолчанию используется TypeScript 3.4. Так что то, что я использую. Поэтому этот ответ также должен работать для других людей, использующих эту версию TypeScript в других контекстах.

Ответ 11

У меня тоже была такая же ошибка. В моем случае это было потому, что в нашем проекте TypeScript AngularJS был старомодный оператор import:

import { IAttributes, IScope } from "angular";

который был скомпилирован в JavaScript, как это:

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

Это было необходимо в прежние времена, потому что мы тогда использовали IAttributes в коде, и TypeScript не знал бы, что делать с ним иначе. Но после удаления оператора импорта и преобразования IAttributes в ng.IAttributes эти две строки JavaScript исчезли, как и сообщение об ошибке.

Ответ 12

Для некоторых проектов ASP.NET import и export могут вообще не использоваться в ваших сценариях типов.

Ошибка с вопросом возникла, когда я попытался это сделать, и позже я обнаружил, что мне просто нужно добавить сгенерированный JS-скрипт в View следующим образом:

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

Ответ 13

Попробуйте то, что @iFreilicht предложил выше. Если это не сработало после того, как вы установили веб-пакет и все такое, возможно, вы просто скопировали конфигурацию веб-пакета откуда-то онлайн и настроили там, что вы хотите, чтобы выходные данные поддерживали CommonJS по ошибке. Убедитесь, что это не так в 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"
  }
};

Ответ 14

Существует связь между опцией "module" и опцией "target" в параметрах компилятора (как описано здесь):

--module -m

строка

target === "ES3" или "ES5"? "CommonJS": "ES6"

Укажите код модуля: "Нет", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015" или "ESNext". ► В сочетании с --outFile можно использовать только "AMD" и "System". ► Значения "ES6" и "ES2015" могут использоваться при ориентации "ES5" или ниже.

Поскольку значение по умолчанию для модуля является условным для целевого объекта, вам необходимо рассмотреть оба варианта и способ, которым вы используете для загрузки своих модулей, чтобы иметь нужные параметры, соответствующие вашему коду.

Если вы настроите таргетинг на ES5, вам нужно рассмотреть другой вариант, чем значение по умолчанию, и изменить способ загрузки вашего модуля соответственно.

Ответ 15

Я был очень смущен, когда мне приходилось сначала настраивать тест-бегун на бэкэнд, потому что я обычно имел эту настройку заранее или мне приходилось настраивать тесты на внешний проект.

Поэтому я подумал... что использование кармы для бэкэнд-проекта было хорошей идеей * facepalm *.

Предупреждение о спойлере: Это не так. Карма всегда будет запускать ваши тесты в браузере, но ваш внутренний код предназначен для чтения узлом. И первое различие между ними состоит в том, что Node может читать exports сообщения, пока браузер не может.

Поэтому я просто закончил использование ts-node (для поддержки Postscript), jasmine и watch чтобы начать все тесты, когда я обновляю файл.