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

105

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"
    ]
}
George C.
fuente
Copie y pegue el texto del error en la pregunta en lugar de usar capturas de pantalla.
Igor
¿Estás seguro de que no escribiste exportscon una s al final en lugar de export? Eso explicaría que el mensaje de error es incorrecto con s .
Igor
Escribo exportar, no exportar
George C.
cualquier ejemplo del repositorio que vaya a funcionar al 10000%
George C.
¿Dónde se está ejecutando esto? ¿En una página web? ¿En un servidor node.js? Necesitará un cargador de módulos en el entorno de tiempo de ejecución en el que finalmente se ejecuta javascript. Desde los indicadores del compilador, está usando commonjs. No estoy tan familiarizado con commonjs, pero necesitará configurar commonjs antes de que los módulos de Typescript funcionen o deberá cambiar a otro cargador de módulos (como require.js) y configurarlo.
Mike Wodarczyk

Respuestas:

41

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á.

iFreilicht
fuente
3
Sí, volví a compilar mi archivo .ts y el error aún existe después de comentar "module": "commonJs",:(
Acidic9
2
Si la instalación de CommonJS hará que este error desaparezca, ¿cómo se instala realmente CommonJS? He pasado la mayor parte de una hora buscando en Google, y no puedo encontrar ninguna instrucciones sobre cómo hacerlo. ¿Alguien puede explicarme?
Sturm
1
@Sturm Mi respuesta puede estar redactada de manera confusa. CommonJS es solo una especificación. Puede encontrar una lista (no necesariamente exhaustiva) de implementaciones aquí: en.wikipedia.org/wiki/CommonJS
iFreilicht
1
Tengo el módulo: amd, no el módulo: commonjs, y tengo esta línea en mi archivo .js transpilado.
pabrams
2
Si tiene un destino como ES3 o ES5 en su tsconfig.json, mecanografiado establecerá automáticamente su módulo en CommonJS si no está definido. Eliminar el módulo no es suficiente, debe configurar otra cosa en su lugar; consulte typescriptlang.org/docs/handbook/compiler-options.html
Jake
51

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.
Venkatesh Muniyandi
fuente
3
@ChuckLeButt Espero que esto ayude a stackoverflow.com/questions/19059580/…
Venkatesh Muniyandi
3
¡Odio que esto funcione! Y definitivamente funciona. ¿No hay una manera de hacer que TypeScript se transpile en algo que Node espera? ¿Es incluso Node el que se queja? ¿O es el navegador? No soporto no entender cuál es realmente el problema.
skillit zimberg
7

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

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

Yi Zhang
fuente
7

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.

Hocine Abdellatif
fuente
3
algo de progreso aquí, el error acaba de cambiar para serapp.js:3 Uncaught ReferenceError: require is not defined
Muhammed Moussa
esto sucede si nodeIntegration se establece en falso al crear la ventana, el error ocurre porque actualizó su electronJS o está siguiendo una fuente desactualizada. nodeIntegration era verdadero de forma predeterminada, ahora es falso, por lo que debe habilitarlo manualmente si desea acceder a nodeJS en el proceso de renderizado. Consulte [El requerimiento de electrones () no está definido] [1] [1]: stackoverflow.com/questions/44391448/…
Hocine Abdellatif
No estoy usando electrones, de todos modos resolví en mi caso agregando un paquete para hacer cosas de paquete y eliminé otras formas complicadas
Muhammed Moussa
6

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

Masih Jahangiri
fuente
5

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"
        ]
    }
}
rubensa
fuente
5

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} ]]
}
Cezar Augusto
fuente
1
¡Gracias hombre! He estado tratando de trabajar con una base de código más antigua que volca todo en global y los scripts se incluyen en el navegador con la <script>etiqueta. Esperaba usar el módulo junto con el código anterior y parece que eso no es posible. Esto al menos me permite usar ES6 y luego ocuparme de la exportación.
huggie
2
al hacer esto, obtuve el siguiente error: Usando la opción eliminada de Babel 5: .modules: use el complemento de transformación del módulo correspondiente en la pluginsopción. Echa un vistazo a babeljs.io/docs/plugins/#modules
chharvey
5

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

{
  "compilerOptions": {     
    "module": "es6",
    "target": "es5",    
  }
}
Susurrador de códigos
fuente
3

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.

MatX
fuente
1
¿Cómo funcionaría eso para un tipo de TypeScript? Tengo que importarlo, entonces Typescript lo compila.
BluE
¿Qué quiere decir "tipo mecanografiado"? Si es un tipo entero conocido por TypeScript, como un número o una cadena, puede usarlo de inmediato. Si define sus propios tipos en un módulo, verifique esto: typescriptlang.org/docs/handbook/modules.html
MatX
Me refiero a las definiciones de tipo de una biblioteca externa como @ types / jquery de npmjs.com/package/@types/jquery . Para hacer que la variable $ sea utilizable desde mi código Typecript, puse esto en mi código: import * as $ from "jquery";
BluE
Estoy apuntando a es5, ¿necesito otra biblioteca como requirejs para que esto funcione?
BluE
1

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.
Daniel Danielecki
fuente
1

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

usuario3033599
fuente
0

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>
CPHPython
fuente
0

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"
  }
};
duliba
fuente
0

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.

Palmadita
fuente
0

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/[email protected]/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/[email protected]/dist/umd/popper.min.js.

Arpan Srivastava
fuente
0
  {
    "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"]
    }
  }
Carlos Alves
fuente
5
Bienvenido a StackOverflow. Agregue un poco de contexto a su respuesta o alguna explicación para que el usuario pueda comprender lo que se hizo. Solo publicar un JSON puede no ser tan útil ...
Bruno Monteiro
0

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'
    ],
}
Doug Wilhelm
fuente