Ik probeer een module te implementeren volgens het officiële handboek, ik krijg deze foutmelding bericht:

Uncaught ReferenceError: export is niet gedefinieerd

op app.js:2

Maar nergens in mijn code gebruik ik ooit de naam exports.

Hoe kan ik dit oplossen?

Bestanden

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

Antwoord 1, autoriteit 100%

BEWERKEN:

Dit antwoord werkt mogelijk niet. Als u ES5niet meer target, zal ik proberen het antwoord completer te maken.

Oorspronkelijk antwoord

Als CommonJS niet is geïnstalleerd (die exports), moet u deze regel uit uw tsconfig.jsonverwijderen:

"module": "commonjs",

Volgens de opmerkingen werkt dit alleen mogelijk niet met latere versies van tsc. Als dat het geval is, kunt u een module-lader zoals Gonguits, Systemjs of Verleden installeren en vervolgens dat aangeven.

Opmerking:

Kijk naar uw main.jsbestand die tscgegenereerd. U vindt dit helemaal bovenaan:

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

Het is de root van het foutbericht en na het verwijderen van "module": "commonjs",, zal het verdwijnen.

Antwoord 2, Autoriteit 109%

Weinig andere oplossingen voor dit probleem

• Voeg de volgende regel toe voor andere verwijzingen naar JavaScript. Dit is een leuke kleine hack.

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

• Dit probleem treedt op met de nieuwste versie van Typcript, deze fout kan worden geëlimineerd door te verwijzen naar Typcript-versie 2.1.6

Antwoord 3, Autoriteit 52%

Ik heb het probleem opgelost door "type": "module"Field van package.jsonte verwijderen.

Antwoord 4, Autoriteit 22%

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

en toevoegen aan .BABELRC-plug-ins opgelost mijn vraag.

Antwoord 5, Autoriteit 18%

Dit wordt vastgesteld door de moduleCompiler-optie in te stellen op es6:

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

Antwoord 6, Autoriteit 12%

Mijn oplossing is een som van alles hierboven met kleine trucjes die ik heb toegevoegd, in principe heb ik dit toegevoegd aan mijn HTML-code

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

Hiermee kunt u zelfs importgebruiken in plaats van requireals u elektron of zoiets gebruikt, en het werkt prima met typescript 3.5.1, doel: ES3 – & GT; eSnext.

Antwoord 7, Autoriteit 9%

Ik had hetzelfde probleem en loste het op “eS5 ” bibliotheek aan TSCONFIG.JSON als deze:

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

Antwoord 8, Autoriteit 7%

Voor mensen die nog steeds dit probleem hebben, als uw compiler-doel is ingesteld op ES6, moet u Babel vertellen om module-transformatie over te slaan. Om dit te doen Voeg dit toe aan uw .babelrcBestand

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

Antwoord 9, Autoriteit 7%

Ik had ook dezelfde fout. In mijn geval was het omdat we een ouderwetse importverklaring hadden in ons Typescript Anguljs-project als volgt:

import { IAttributes, IScope } from "angular";

die als volgt naar JavaScript is gecompileerd:

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

Vroeger was dit nodig omdat we toen IAttributesin de code gebruikten en TypeScript anders niet had geweten wat we ermee moesten doen.
Maar na het verwijderen van het importstatement en het converteren van IAttributesnaar ng.IAttributesverdwenen die twee JavaScript-regels – en ook de foutmelding.

Antwoord 10, autoriteit 6%

voor mij was het verwijderen van "esModuleInterop": truevan tsconfig.json de juiste oplossing.

Antwoord 11, autoriteit 3%

Voeg eenvoudig libraryTarget: 'umd'toe, zoals zo

const webpackConfig = {
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  }
};
module.exports = webpackConfig; // Export all custom Webpack configs.

Antwoord 12, autoriteit 3%

Ik had een soortgelijk probleem als de oorspronkelijke poster van de vraag:

Ik kan je maar beter vertellen welke fouten ik heb gemaakt en hoe ik die heb gecorrigeerd, daar kan iemand iets aan hebben.

Ik had een javascript nodejs-project en heb het geconverteerd naar typoscript.

Voorheen had ik in package.json “type”:”module” toen ik in JavaScript draaide.

Toen ik het naar TypeScript-project converteerde en begon met het converteren van bestanden in .ts-bestanden en begon met het volgende commando:

npx tsc test.ts && node test.ts

Ik krijg de bovenstaande foutmelding.

Ik heb de fout verwijderd door simpelweg de “type”:”module” uit package.json te verwijderen

Mijn tsconfig.json wil hieronder:

{
    "compilerOptions": {
        "target": "esnext",
        "lib": ["es6", "es5", "es7", "dom"],
        "allowJs": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "es6",
        "outDir": "./build",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "skipLibCheck": true
    },
    "exclude": ["node_modules", "build"]

Ik gebruik node 14 en TypeScript 4.2.4

Antwoord 13

Voor sommige ASP.NET-projecten kunnen importen exporthelemaal niet worden gebruikt in uw Typescripts.

De fout van de vraag verscheen toen ik dit probeerde en ik ontdekte pas later dat ik alleen het gegenereerde JS-script aan de Viewmoest toevoegen, zoals:

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

Antwoord 14

Opmerking: dit is misschien niet van toepassing op het antwoord van OP, maar ik kreeg deze foutmelding en zo heb ik het opgelost.

Dus het probleem waarmee ik werd geconfronteerd, was dat ik deze fout kreeg toen ik een ‘js’-bibliotheek ophaalde van een bepaald CDN.

Het enige verkeerde dat ik deed, was importeren uit de cjs-directory van het CDN als volgt:
https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/cjs/popper.min.js

Let u op het dist/cjsgedeelte? Daar zat het probleem.

Ik ging in mijn geval terug naar het CDN (jsdelivr) en navigeerde naar de map umd. En ik kon nog een set popper.min.jsvinden die het juiste bestand was om te importeren:
https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js.

Antwoord 15

Om dit probleem op te lossen, plaatst u deze twee regels op uw index.htmlpagina.

<script>var exports = {"__esModule": true};</script>
<script type="text/javascript" src="/main.js">

Controleer uw main.jsbestandspad.

Antwoord 16

Ik kwam dit probleem een paar weken geleden tegen en gebruikte de exporthack hierbovenop korte termijn, maar kwam er uiteindelijk achter een andere manier om dit te omzeilen die geweldig werkt voor mij.

Dus in tegenstelling tot sommige van de andere reacties hierboven, wilde ik eigenlijk dat de code die ik aan het compileren was een module zou zijn. Door "target": "es6","module": "esnext"in te stellen en vervolgens te linken naar mijn gecompileerde JS-bestand met type="module"in plaats van type="text/javascript", heeft mijn gecompileerde code niet langer de Object.defineProperty(exports, "__esModule", { value: true });regel en het is nog steeds een module 🎉

Mijn tsconfig:

{
  "compilerOptions": {
    "target": "es6",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2016", "esnext", "dom"],
    "outDir": "build",
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
  },
  "include": ["src/index.ts"],
  "exclude": ["build"]
}

Mijn link naar mijn gecompileerde code in HTML headtags:

<script src="../build/index.js" type="module" defer></script>

Als bonus kan ik nu ook alles wat ik exporteer in dat index.js-bestand importeren in een apart type="module"-script onder de HTML bodycode:

<script type="module">
   import { coolEncodingFunction, coolDecodingFunction } from "../build/index.js";
   /* Do stuff with coolEncodingFunction and coolDecodingFunction */
   /* ... */
</script>

Antwoord 17

Probeer wat @iFreilicht hierboven suggereerde. Als dat niet werkte nadat je webpack en alles hebt geïnstalleerd, heb je misschien zojuist een webpack-configuratie ergens online gekopieerd en daar geconfigureerd dat je wilt dat de uitvoer CommonJS ondersteunt. Zorg ervoor dat dit niet het geval is in 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"
  }
};

Antwoord 18

Had hetzelfde probleem en heb het opgelost door de laadvolgorde van JS-pakketten te wijzigen.

Controleer de volgorde waarin de pakketten die je nodig hebt worden aangeroepen en laad ze in de juiste volgorde.

In mijn specifieke geval (geen modulebundelaar gebruikend) moest ik Reduxladen, dan Redux Thunken vervolgens React Redux. Het laden van React Reduxvoor Redux Thunkzou me exports is not definedgeven.

Antwoord 19

Ik had hetzelfde probleem, maar voor mijn configuratie was een andere oplossing nodig.

Ik gebruik het pakket create-react-app-rewiredmet een bestand config-overrides.js. Voorheen gebruikte ik de addBabelPresetsimport (in de override()methode) van customize-craen besloot die presets te abstraheren naar een aparte het dossier. Toevallig heeft dit mijn probleem opgelost.

Ik heb useBabelRc()toegevoegd aan de override()methode in config-overrides.jsen heb een babel.config.jsbestand met het volgende:

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

Antwoord 20

Ik bleef bij een dergelijke fout in een SSR-clientgedeelte omdat het een lib gebruikte dat was gebouwd met tsconfig.jsoncompilerOptionsals target: ES5wat bracht met behulp van CommonJSvoor module resolutie tsc CLI Opties Compiler Opties: target === "ES3" or "ES5" ? "CommonJS" : "ES6". Terwijl het het doel ESNextgebruikte.

Antwoord 21

Omdat ES5/ES2009geen modules ondersteunt (import/export/require) op de client/ browserje moet bibliotheken gebruiken, die de modules bundelen in een enkel bestand, dat kan worden opgenomen via de <script>-tag, zoals

• Browserify
• Webpack

Zie ook dit antwoord.

Antwoord 22

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

Antwoord 23

Als je alleen interfaces voor typen gebruikt, laat dan het trefwoord exportweg en ts kan de typen oppikken zonder te hoeven importeren. Het belangrijkste is dat je import/exportnergens kunt gebruiken.

export interface Person {
   name: string;
   age: number;
}

in

interface Person {
   name: string;
   age: number;
}