Resmi el kitabına göre bir modül uygulamaya çalışırken şu hata mesajını alıyorum:

Yakalanmamış ReferenceError: dışa aktarmalar tanımlanmadı

app.js'de: 2

Ama kodumun hiçbir yerinde adı hiç kullanmıyorum exports.

Bunu nasıl düzeltebilirim?

Dosyalar

app.ts

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

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

modül-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"
    ]
}

DÜZENLE:

es5Artık hedeflemiyor olmanıza bağlı olarak bu cevap işe yaramayabilir , cevabı daha eksiksiz hale getirmeye çalışacağım.

Orijinal Cevap

CommonJS kurulu değilse ( tanımlayanexports ), bu satırı şunlardan kaldırmanız gerekir tsconfig.json:

 "module": "commonjs",

Yorumlara göre, bu tek başına uygulamasının sonraki sürümlerinde çalışmayabilir tsc. Durum buysa, CommonJS, SystemJS veya RequireJS gibi bir modül yükleyici kurabilir ve ardından bunu belirtebilirsiniz.

Not:

Oluşturulan main.jsdosyanıza bakın tsc. Bunu en üstte bulacaksınız:

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

Hata mesajının köküdür ve kaldırıldıktan sonra "module": "commonjs",kaybolur.

Bu sorun için birkaç başka Çözüm

• Javascript'e yapılan diğer referanslardan önce aşağıdaki satırı ekleyin. Bu güzel küçük bir hile.

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

• Bu sorun TypeScript'in en son sürümünde ortaya çıkar, bu hata typcript sürüm 2.1.6'ya başvurarak giderilebilir.

"type": "module"Alanı alanından kaldırarak sorunu çözdüm package.json.

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

ve .babelrc eklentilerine ekle sorumu çözdü.

benim çözümüm, eklediğim küçük numaralarla yukarıdaki her şeyin bir özetidir, temelde bunu html koduma ekledim

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

bu bile elektron veya başka bir şey kullanıyorsanız kullanmak importyerine kullanmanıza izin verir requireve typcript 3.5.1, target: es3 -> esnext ile sorunsuz çalışır.

Bu, modulederleyici seçeneğini şu şekilde ayarlayarak giderilir es6:

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

Aynı sorunu yaşadım ve tsconfig.json'a " es5 " kitaplığını ekleyerek şu şekilde çözdüm :

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

Hala bu sorunu yaşayan kişiler için, derleyici hedefiniz ES6 olarak ayarlanmışsa babel'e modül dönüşümünü atlamasını söylemeniz gerekir. Bunu yapmak için bunu .babelrcdosyanıza ekleyin

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

Ben de aynı hatayı aldım. Benim durumumda bunun nedeni, TypeScript AngularJS projemizde şu şekilde eski moda bir import ifadesine sahip olmamızdı:

import { IAttributes, IScope } from "angular";

JavaScript'e şu şekilde derlendi:

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

Bu eski günlerde gerekliydi çünkü o zaman IAttributeskodu kullandık ve TypeScript onunla ne yapacağımızı bilemezdi. Ama ithalat beyanı kaldırma ve dönüştürme sonrasında IAttributesüzere ng.IAttributesbu iki JavaScript hatları kayboldu - ve böylece hata mesajı yaptık.

Bazı ASP.NET projeleri için importve exportTypescript'lerinizde hiç kullanılmayabilir.

Bunu yapmaya çalıştığımda sorunun hatası ortaya çıktı ve ancak daha sonra, oluşturulan JS komut dosyasını Görünüm'e şu şekilde eklemem gerektiğini keşfettim :

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

Basitçe ekleyin libraryTarget: 'umd', öyle ki

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

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

benim için "esModuleInterop": truetsconfig.json'dan kaldırmak hile yaptı.

Not: Bu, OP'nin cevabı için geçerli olmayabilir, ancak bu hatayı alıyordum ve bu şekilde çözdüm.

Bu yüzden, karşılaştığım sorun, belirli bir CDN'den bir 'js' kitaplığı aldığımda bu hatayı almamdı.

Yaptığım tek yanlış şey, CDN'nin cjsdizininden şu şekilde içe aktarmaktı : https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

Parçayı fark dist/cjsettiniz mi? Sorun oradaydı.

Benim durumumda CDN'ye (jsdelivr) geri döndüm ve umdklasörü bulmaya gittim . Ve ben başka bir set bulabildiğim popper.min.jsithalat doğru dosya olan: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/umd/popper.min.js.

@İFreilicht'in yukarıda önerdiği şeyi deneyin. Web paketini kurduktan sonra bu işe yaramadıysa, çevrimiçi bir yerden bir web paketi yapılandırmasını kopyalayıp orada çıktının yanlışlıkla CommonJS'yi desteklemesini istediğinizi yapılandırmış olabilirsiniz. Durumun böyle olmadığından emin olun 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"
  }
};

Aynı sorunu yaşadım ve JS paketleri yükleme sırasını değiştirerek düzeltildi.

İhtiyacınız olan paketlerin hangi sırayla çağrıldığını kontrol edin ve bunları uygun bir sırayla yükleyin.

Benim özel durumumda (modül paketleyiciyi kullanmadan) Redux, o zaman Redux Thunk, sonra yüklemem gerekiyordu React Redux. Daha React Reduxönce Redux Thunkyüklemek bana verirdi exports is not defined.

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

Aynı sorunu yaşadım, ancak kurulumum farklı bir çözüm gerektirdi.

create-react-app-rewiredPaketi bir config-overrides.jsdosya ile kullanıyorum . Önceden, addBabelPresetsiçe aktarmayı ( override()yöntemde) kullanıyordum customize-crave bu ön ayarları ayrı bir dosyaya soyutlamaya karar verdim. Tesadüfen, bu benim sorunumu çözdü.

Eklediğim useBabelRc()için override()de yöntemin config-overrides.jsve bir yaratılmış babel.config.jsaşağıdaki dosyayı:

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

Bu sorunu çözmek için, bu iki satırı index.html sayfanıza koyun .

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

Main.js dosya yolunuzu kontrol ettiğinizden emin olun .

Yalnızca türler için arayüz kullanıyorsanız, exportanahtar kelimeyi atlayın ve ts içe aktarmaya gerek kalmadan türleri alabilir. Anahtar, import/ exporthiçbir yerde kullanamayacağınızdır .

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

içine

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