Al intentar implementar un módulo siguiendo el manual oficial , aparece este mensaje de error:

Error de referencia no detectado: las exportaciones no están definidas

en app.js: 2

Pero en ninguna parte de mi código utilizo el nombre exports.

¿Cómo puedo arreglar esto?

Archivos

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:

Es posible que esta respuesta no funcione dependiendo de si ya no está apuntando es5, intentaré que la respuesta sea más completa.

Respuesta original

Si CommonJS no está instalado (lo que defineexports ), debe eliminar esta línea de su tsconfig.json:

 "module": "commonjs",

Según los comentarios, esto por sí solo puede no funcionar con versiones posteriores de tsc. Si ese es el caso, puede instalar un cargador de módulos como CommonJS, SystemJS o RequireJS y luego especificarlo.

Nota:

Mire su main.jsarchivo que tscgeneró. Encontrarás esto en la parte superior:

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

Es la raíz del mensaje de error y, después de eliminarlo "module": "commonjs",, desaparecerá.

Pocas otras soluciones para este problema

• Agregue la siguiente línea antes de otras referencias a Javascript. Este es un pequeño truco agradable.

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

• Este problema ocurre con la última versión de TypeScript, este error se puede eliminar consultando la versión 2.1.6 de TypeScript.

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

y agregar a los complementos .babelrc resolvió mi pregunta.

mi solución es un resumen de todo lo anterior con pequeños trucos que agregué, básicamente agregué esto a mi código html

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

esto incluso le permite usarlo en importlugar de requiresi está usando electron o algo, y funciona bien con mecanografiado 3.5.1, target: es3 -> esnext.

Resolví el problema eliminando el "type": "module"campo de package.json.

Tuve el mismo problema y lo resolví agregando la biblioteca " es5 " a tsconfig.json así:

{
    "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 las personas que aún tienen este problema, si el objetivo del compilador está configurado en ES6, debe indicarle a babel que omita la transformación del módulo. Para hacerlo, agregue esto a su .babelrcarchivo

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

Esto se soluciona configurando la moduleopción del compilador en es6:

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

También tuve este mismo error. En mi caso, fue porque teníamos una declaración de importación pasada de moda en nuestro proyecto TypeScript AngularJS como este:

import { IAttributes, IScope } from "angular";

que se compiló en JavaScript así:

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

Esto era necesario en los viejos tiempos porque luego lo usamos IAttributesen el código y TypeScript no habría sabido qué hacer con él de otra manera. Pero después de eliminar la declaración de importación y convertir IAttributesa ng.IAttributesesas dos líneas de JavaScript desapareció, al igual que el mensaje de error.

Simplemente agregue libraryTarget: 'umd', así

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

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

para mí, eliminar "esModuleInterop": truede tsconfig.json funcionó.

Para algunos proyectos ASP.NET importy es exportposible que no se utilice en absoluto en sus Typescripts.

El error de la pregunta apareció cuando intenté hacerlo y solo descubrí más tarde que solo necesitaba agregar el script JS generado a la Vista así:

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

Prueba lo que @iFreilicht sugirió anteriormente. Si eso no funcionó después de haber instalado el paquete web y todo, es posible que haya copiado una configuración de paquete web desde algún lugar en línea y haya configurado allí que desea que la salida sea compatible con CommonJS por error. Asegúrese de que este no sea el caso en 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"
  }
};

Tuve el mismo problema y lo solucionó cambiando el orden de carga de los paquetes JS.

Compruebe el orden en el que se llaman los paquetes que necesita y cárguelos en el orden adecuado.

En mi caso específico (sin usar el paquete de módulos) necesitaba cargar Redux, luego Redux Thunk, entonces React Redux. Cargar React Reduxantes Redux Thunkme daría exports is not defined.

Nota: Es posible que esto no sea aplicable para la respuesta de OP, pero recibí este error y así fue como lo resolví.

Entonces, el problema al que me enfrentaba era que recibía este error cuando recuperaba una biblioteca 'js' de un CDN en particular.

Lo único incorrecto que estaba haciendo era importar desde el cjsdirectorio de CDN así: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

¿Notas la dist/cjspieza? Ahí es donde estaba el problema.

Volví al CDN (jsdelivr) en mi caso y navegué para encontrar la umdcarpeta. Y pude encontrar otro conjunto de popper.min.jslo que era el archivo correcto a importar: 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"]
    }
  }

Tuve el mismo problema, pero mi configuración requería una solución diferente.

Estoy usando el create-react-app-rewiredpaquete con un config-overrides.jsarchivo. Anteriormente, estaba usando la addBabelPresetsimportación (en el override()método) de customize-cray decidí abstraer esos ajustes preestablecidos en un archivo separado. Casualmente, esto resolvió mi problema.

Agregué useBabelRc()al override()método config-overrides.jsy creé un babel.config.jsarchivo con lo siguiente:

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