Mencoba menerapkan modul mengikuti buku pegangan resmi , saya mendapatkan pesan kesalahan ini:

ReferenceError Tidak Tertangkap: ekspor tidak ditentukan

di app.js: 2

Tapi tidak ada dalam kode saya yang pernah menggunakan nama itu exports.

Bagaimana cara memperbaikinya?

File

app.ts

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

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

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

EDIT:

Jawaban ini mungkin tidak berfungsi tergantung jika Anda tidak menargetkan es5lagi, saya akan mencoba membuat jawaban lebih lengkap.

Jawaban Asli

Jika CommonJS tidak diinstal ( yang mendefinisikanexports ), Anda harus menghapus baris ini dari tsconfig.json:

 "module": "commonjs",

Sesuai dengan komentar, ini saja mungkin tidak berfungsi dengan versi yang lebih baru tsc. Jika demikian, Anda dapat menginstal modul loader seperti CommonJS, SystemJS atau RequireJS dan kemudian menentukannya.

catatan:

Lihat main.jsfile Anda yang tscdihasilkan. Anda akan menemukan ini di bagian paling atas:

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

Ini adalah akar dari pesan kesalahan, dan setelah dihapus "module": "commonjs",, pesan itu akan hilang.

Beberapa Solusi lain untuk masalah ini

• Tambahkan baris berikut sebelum referensi lain ke Javascript. Ini adalah retasan kecil yang bagus.

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

• Masalah ini terjadi dengan TypeScript versi terbaru, kesalahan ini dapat diatasi dengan merujuk ke skrip jenis versi 2.1.6

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

dan tambahkan ke plugin .babelrc menyelesaikan pertanyaan saya.

solusi saya adalah ringkasan dari semua di atas dengan sedikit trik yang saya tambahkan, pada dasarnya saya menambahkan ini ke kode html saya

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

ini bahkan memungkinkan Anda untuk menggunakan importalih-alih requirejika Anda menggunakan electron atau sesuatu, dan itu bekerja dengan baik dengan skrip 3.5.1, target: es3 -> esnext.

Saya memecahkan masalah dengan menghapus "type": "module"bidang dari package.json.

Saya memiliki masalah yang sama dan menyelesaikannya dengan menambahkan pustaka " es5 " ke tsconfig.json seperti ini:

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

Bagi orang-orang yang masih mengalami masalah ini, jika target kompilator Anda disetel ke ES6, Anda perlu memberi tahu babel untuk melewati transformasi modul. Untuk melakukannya, tambahkan ini ke .babelrcfile Anda

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

Ini diperbaiki dengan mengatur moduleopsi kompiler ke es6:

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

Saya mengalami kesalahan yang sama juga. Dalam kasus saya, itu karena kami memiliki pernyataan impor kuno dalam proyek TypeScript AngularJS seperti ini:

import { IAttributes, IScope } from "angular";

yang dikompilasi ke JavaScript seperti ini:

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

Ini diperlukan kembali di masa lalu karena kami kemudian menggunakan IAttributeskode dan TypeScript tidak akan tahu apa yang harus dilakukan dengannya. Tetapi setelah menghapus pernyataan import, dan mengonversinya IAttributeske ng.IAttributesdua baris JavaScript tersebut menghilang - dan begitu pula pesan kesalahannya.

Cukup tambahkan libraryTarget: 'umd', seperti itu

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

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

bagi saya, menghapus "esModuleInterop": truedari tsconfig.json melakukan triknya.

Untuk beberapa proyek ASP.NET importdan exportmungkin tidak digunakan sama sekali di Skrip Ketik Anda.

Kesalahan pertanyaan muncul ketika saya mencoba melakukannya dan saya baru menemukan kemudian bahwa saya hanya perlu menambahkan skrip JS yang dihasilkan ke Tampilan seperti:

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

Coba saran @iFreilicht di atas. Jika itu tidak berhasil setelah Anda menginstal webpack dan sebagainya, Anda mungkin baru saja menyalin konfigurasi webpack dari suatu tempat secara online dan mengonfigurasi di sana sehingga Anda ingin output mendukung CommonJS secara tidak sengaja. Pastikan ini tidak terjadi di 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"
  }
};

Memiliki masalah yang sama dan memperbaikinya dengan mengubah urutan pemuatan paket JS.

Periksa urutan pemanggilan paket yang Anda butuhkan dan muat dalam urutan yang sesuai.

Dalam kasus tertentu (tidak menggunakan modul bundler) yang saya butuhkan untuk beban Redux, kemudian Redux Thunk, kemudian React Redux. Memuat React Reduxsebelumnya Redux Thunkakan memberi saya exports is not defined.

Catatan: Ini mungkin tidak berlaku untuk jawaban OP, tetapi saya mendapatkan kesalahan ini, dan ini cara saya mengatasinya.

Jadi masalah yang saya hadapi adalah bahwa saya mendapatkan kesalahan ini ketika saya mengambil pustaka 'js' dari CDN tertentu.

Satu-satunya hal yang salah yang saya lakukan adalah mengimpor dari cjsdirektori CDN seperti ini: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

Perhatikan dist/cjsbagiannya? Di situlah masalahnya.

Saya kembali ke CDN (jsdelivr) dalam kasus saya dan menavigasi untuk menemukan umdfolder tersebut. Dan aku bisa menemukan satu set popper.min.jsyang merupakan file yang benar untuk impor: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/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"]
    }
  }

Saya memiliki masalah yang sama, tetapi penyiapan saya membutuhkan solusi yang berbeda.

Saya menggunakan create-react-app-rewiredpaket dengan config-overrides.jsfile. Sebelumnya, saya menggunakan addBabelPresetsimport (dalam override()metode) dari customize-cradan memutuskan untuk mengabstraksi preset tersebut ke file terpisah. Secara kebetulan, ini memecahkan masalah saya.

Saya menambahkan useBabelRc()ke override()metode config-overrides.jsdan membuat babel.config.jsfile dengan yang berikut ini:

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