En essayant d'implémenter un module en suivant le manuel officiel , j'obtiens ce message d'erreur:

Uncaught ReferenceError: les exportations ne sont pas définies

sur app.js: 2

Mais nulle part dans mon code je n'utilise 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"
    ]
}

ÉDITER:

Cette réponse peut ne pas fonctionner selon que vous ne ciblez es5plus, je vais essayer de rendre la réponse plus complète.

Réponse originale

Si CommonJS n'est pas installé ( qui définitexports ), 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 comme CommonJS, SystemJS ou RequireJS, puis le spécifier.

Remarque:

Regardez votre main.jsfichier qui a tscgénéré. Vous trouverez ceci tout en haut:

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

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

Peu d'autres solutions pour ce problème

• Ajoutez la ligne suivante avant les autres références à Javascript. C'est un joli petit hack.

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

• Ce problème se produit avec la dernière version de TypeScript, cette erreur peut être éliminée en se référant à la version dactylographiée 2.1.6

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

et ajouter aux plugins .babelrc a résolu ma question.

J'ai résolu le problème en supprimant le "type": "module"champ de package.json.

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 à la importplace de requiresi vous utilisez électron ou quelque chose du genre, et cela fonctionne très bien avec typescript 3.5.1, target: es3 -> esnext.

J'ai eu le même problème et je 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"
        ]
    }
}

Pour les personnes ayant encore ce problème, si votre cible de compilateur est définie sur ES6, vous devez dire à babel d'ignorer la transformation du module. Pour ce faire, ajoutez ceci à votre .babelrcfichier

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

Ce problème est résolu en définissant l' moduleoption du compilateur sur es6:

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

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

import { IAttributes, IScope } from "angular";

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

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

Cela était nécessaire à l'époque car nous utilisions ensuite IAttributesdans le code et TypeScript n'aurait pas su quoi en faire autrement. Mais après la suppression de l'instruction d'importation et la conversion IAttributesvers ng.IAttributesces deux lignes JavaScript, le message d'erreur a disparu.

Ajoutez simplement libraryTarget: 'umd', comme ça

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

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

pour moi, la suppression "esModuleInterop": truede tsconfig.json a fait l'affaire.

Pour certains projets ASP.NET importetexport peut ne pas être utilisé du tout dans vos typescripts.

L'erreur de la question est apparue lorsque j'ai tenté de le faire et je n'ai découvert que plus tard que j'avais juste besoin d'ajouter le script JS généré à la vue comme ceci:

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

Essayez ce que @iFreilicht a suggéré ci-dessus. Si cela ne fonctionnait pas après avoir installé webpack et tout, vous venez peut-être de copier une configuration Webpack à partir d'un endroit en ligne et de configurer là-bas que vous voulez que la sortie 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"
  }
};

J'ai eu le même problème et l'a corrigé en modifiant l'ordre de chargement des packages JS.

Vérifiez l'ordre dans lequel les packages dont vous avez besoin sont appelés et chargez-les dans un ordre approprié.

Dans mon cas particulier (sans utiliser le module bundler), je devais charger Redux, alors Redux Thunk, alors React Redux. Le chargement React Reduxavant Redux Thunkme donnerait exports is not defined.

Remarque: Cela ne s'applique peut-être pas à la réponse d'OP, mais j'obtenais cette erreur, et c'est ainsi que je l'ai résolue.

Donc, le problème auquel je faisais face était que j'obtenais cette erreur lorsque j'ai récupéré une bibliothèque 'js' à partir d'un CDN particulier.

La seule mauvaise chose que je faisais était d'importer depuis le cjsrépertoire du CDN comme ceci: https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/cjs/popper.min.js

Remarquez la dist/cjspièce? C'est là que se trouvait le problème.

Je suis retourné au CDN (jsdelivr) dans mon cas et j'ai navigué pour trouver le umddossier. Et je pouvais trouver un autre ensemble de ce popper.min.jsqui était le bon fichier à importer: 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"]
    }
  }

J'ai eu le même problème, mais ma configuration nécessitait une solution différente.

J'utilise le create-react-app-rewiredpackage avec un config-overrides.jsfichier. Auparavant, j'utilisais l' addBabelPresetsimportation (dans la override()méthode) decustomize-cra et décidé de résumer ces préréglages dans un fichier séparé. Par coïncidence, cela a résolu mon problème.

J'ai ajouté useBabelRc()à la override()méthode config-overrides.jset créé un babel.config.jsfichier avec les éléments suivants:

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