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
чтобы начать все тесты, когда я обновляю файл.