Ao tentar implementar um módulo seguindo o manual oficial , recebo esta mensagem de erro:

ReferenceError não capturado: as exportações não estão definidas

em app.js: 2

Mas em nenhum lugar do meu código eu uso o nome exports.

Como posso consertar isso?

arquivos

app.ts

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

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

módulo-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"
    ]
}

EDITAR:

Esta resposta pode não funcionar, dependendo se você não estiver es5mais segmentando , tentarei tornar a resposta mais completa.

Resposta Original

Se o CommonJS não estiver instalado (o que defineexports ), você deve remover esta linha de tsconfig.json:

 "module": "commonjs",

De acordo com os comentários, isso sozinho pode não funcionar com versões posteriores do tsc. Se for esse o caso, você pode instalar um carregador de módulo como CommonJS, SystemJS ou RequireJS e, em seguida, especificar isso.

Nota:

Olhe para o main.jsarquivo que tscgerou. Você encontrará isso no topo:

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

É a raiz da mensagem de erro e, após a remoção "module": "commonjs",, desaparecerá.

Algumas outras soluções para este problema

• Adicione a seguinte linha antes de outras referências a Javascript. Este é um pequeno hack agradável.

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

• Esse problema ocorre com a versão mais recente do TypeScript, esse erro pode ser eliminado consultando a versão 2.1.6 do typescript

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

e adicionar aos plug-ins .babelrc resolveu minha dúvida.

minha solução é uma soma de tudo acima com pequenos truques que adicionei, basicamente adicionei isso ao meu código html

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

isso até permite que você use em importvez de requirese estiver usando elétron ou algo assim, e funciona bem com o texto datilografado 3.5.1, alvo: es3 -> esnext.

Resolvi o problema removendo o "type": "module"campo de package.json.

Eu tive o mesmo problema e resolvi adicionando a biblioteca " es5 " ao tsconfig.json assim:

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

Para as pessoas que ainda têm esse problema, se o destino do compilador estiver definido como ES6, você precisará dizer ao babel para pular a transformação do módulo. Para fazer isso, adicione isso ao seu .babelrcarquivo

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

Isso é corrigido definindo a moduleopção do compilador para es6:

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

Eu também tive esse mesmo erro. No meu caso, foi porque tínhamos uma instrução de importação antiquada em nosso projeto TypeScript AngularJS como esta:

import { IAttributes, IScope } from "angular";

que foi compilado para JavaScript assim:

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

Isso era necessário nos velhos tempos porque então IAttributesusávamos no código e o TypeScript não saberia o que fazer com ele de outra forma. Mas depois de remover a instrução de importação e converter IAttributespara ng.IAttributesessas duas linhas de JavaScript, desapareceu - e também a mensagem de erro.

Basta adicionar libraryTarget: 'umd', assim

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

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

para mim, remover "esModuleInterop": truedo tsconfig.json funcionou.

Para alguns projetos ASP.NET importe exportnão podem ser usados ​​em seus scripts de tipo.

O erro da pergunta apareceu quando tentei fazer isso e só descobri mais tarde que só precisava adicionar o script JS gerado ao View assim:

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

Experimente o que @iFreilicht sugeriu acima. Se isso não funcionou depois de instalar o webpack e tudo, você pode ter apenas copiado uma configuração do webpack de algum lugar online e configurado lá que deseja que a saída suporte CommonJS por engano. Certifique-se de que este não seja o caso em 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"
  }
};

Tive o mesmo problema e resolvi alterando a ordem de carregamento dos pacotes JS.

Verifique a ordem em que os pacotes de que você precisa estão sendo chamados e carregue-os na ordem apropriada.

No meu caso específico (não usando o módulo bundler) Eu precisava de carga Redux, em seguida Redux Thunk, então React Redux. Carregando React Reduxantes Redux Thunkme daria exports is not defined.

Nota: Isso pode não ser aplicável para a resposta de OP, mas eu estava recebendo este erro e foi assim que resolvi.

Portanto, o problema que eu estava enfrentando era que recebia esse erro quando recuperava uma biblioteca 'js' de um CDN específico.

A única coisa errada que eu estava fazendo era importar do cjsdiretório do CDN assim: https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/cjs/popper.min.js

Observe a dist/cjsparte? É aí que estava o problema.

Voltei para o CDN (jsdelivr) no meu caso e naveguei até encontrar a umdpasta. E eu poderia encontrar um outro conjunto de popper.min.jsque era o arquivo correto para importação: 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"]
    }
  }

Eu tive o mesmo problema, mas minha configuração exigia uma solução diferente.

Estou usando o create-react-app-rewiredpacote com um config-overrides.jsarquivo. Anteriormente, eu estava usando a addBabelPresetsimportação (no override()método) de customize-crae decidi abstrair essas predefinições em um arquivo separado. Coincidentemente, isso resolveu meu problema.

Eu adicionei useBabelRc()ao override()método em config-overrides.jse criei um babel.config.jsarquivo com o seguinte:

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