web-dev-qa-db-fra.com

Typescript ReferenceError: les exportations ne sont pas définies

En essayant de mettre en œuvre un module en suivant le manuel official , je reçois ce message d'erreur:

Uncaught ReferenceError: les exportations ne sont pas définies

à app.js: 2

Mais nulle part dans mon code je n'utilise jamais le nom exports.

Comment puis-je réparer cela?

Des dossiers

app.ts

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

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

module-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"
    ]
}
typescriptmodule
54
George C.

MODIFIER:

Cette réponse peut ne pas fonctionner si vous ne ciblez plus es5, je vais essayer de la compléter.

Réponse originale

Si CommonJS n'est pas installé ( qui définit exports ), vous devez supprimer cette ligne de votre tsconfig.json:

 "module": "commonjs",

Selon les commentaires, cela seul peut ne pas fonctionner avec les versions ultérieures de tsc. Si tel est le cas, vous pouvez installer un chargeur de module tel que CommonJS, SystemJS ou RequireJS, puis le spécifier.

Remarque:

Regardez votre fichier main.js que tsc a généré. Vous trouverez cela tout en haut:

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

C'est la racine du message d'erreur et, après avoir supprimé "module": "commonjs",, il disparaîtra.

21
iFreilicht

Peu d'autres solutions pour ce problème

  • Ajoutez la ligne suivante avant d’autres références à Javascript. C'est un joli petit bidouillage.
   <script>var exports = {};</script>
  • Ce problème se produit avec la dernière version de TypeScript. Cette erreur peut être éliminée en consultant TypeScript version 2.1.6
18
Venkatesh Muniyandi

Pour les personnes ayant encore ce problème, si votre cible du compilateur est définie sur ES6, vous devez indiquer à Babel de ne pas utiliser la transformation de module. Pour ce faire, ajoutez ceci à votre fichier .babelrc

{
  "presets": [ ["env", {"modules": false} ]]
}
4
Cezar Augusto

Ajoutez simplement libraryTarget: 'umd', comme si

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

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

ma solution est un résumé de tout ce qui précède avec de petites astuces que j'ai ajoutées, en gros j'ai ajouté ceci à mon code html

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

cela vous permet même d'utiliser import au lieu de require si vous utilisez electron ou quelque chose du genre, et cela fonctionne très bien avec TypeScript 3.5.1, target: es3 -> esnext.

1
Hocine Abdellatif

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

et ajouter à .babelrc plugins résolu ma question.

1
Yi Zhang

La réponse acceptée n'a pas résolu le problème pour moi. Au lieu de cela, j'ai configuré pour utiliser RequireJS (AMD Implementation). J'ai écrit ma solution sur https://stackoverflow.com/a/48436147/1019307 .

1
HankCa

Il existe une relation entre l'option "module" et l'option "cible" dans les options du compilateur (comme documenté ici ): 

--module -m 

chaîne 

cible === "ES3" ou "ES5"? "CommonJS": "ES6" 

Spécifiez la génération de code de module: "Aucun", "CommonJS", "AMD", "Système", "UMD", "ES6", "ES2015" ou "ESNext". ► Seuls "AMD" et "Système" peuvent être utilisés dans conjonction avec --outFile. ► Les valeurs "ES6" et "ES2015" peuvent être utilisées lorsque vous ciblez "ES5" ou moins.

Comme la valeur par défaut de module est conditionnelle à la cible, vous devez tenir compte des deux options et de la façon dont vous utilisez le chargement de vos modules pour disposer des options appropriées qui correspondent à votre code.

Si vous ciblez ES5, vous devez envisager une autre option que la valeur par défaut et modifier la façon dont vous chargez votre module en conséquence.

0
Matthieu

Pour certains projets ASP.NET, import et export ne peuvent pas être utilisés du tout dans vos scripts de frappe.

L'erreur de la question s'est manifestée lorsque j'ai tenté de le faire et j'ai découvert par la suite que je devais simplement ajouter le script JS généré à la View comme ceci:

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

J'ai eu cette même erreur aussi. Dans mon cas, c’est parce que nous avions une déclaration d’importation à l’ancienne dans notre projet TypeScript AngularJS comme celle-ci:

import { IAttributes, IScope } from "angular";

qui a été compilé pour JavaScript comme ceci:

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

Cela était nécessaire dans le passé, car nous utilisions alors IAttributes dans le code et TypeScript n'aurait pas su quoi en faire sinon. Mais après avoir supprimé l’instruction d’importation et converti IAttributes en ng.IAttributes, ces deux lignes JavaScript ont disparu - et le message d’erreur également.

0
MatX

Essayez ce que @iFreilicht a suggéré ci-dessus. Si cela ne fonctionnait pas après avoir installé Webpack, vous avez peut-être simplement copié une configuration Webpack depuis un emplacement en ligne et vous y avez configuré le produit pour que celui-ci prenne en charge CommonJS par erreur. Assurez-vous que ce n'est pas le cas dans 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"
  }
};
0
duliba

J'ai eu le même problème et l'ai résolu en ajoutant la bibliothèque " es5 " à tsconfig.json comme ceci:

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