พยายามติดตั้งโมดูลตามคู่มืออย่างเป็นทางการฉันได้รับข้อความแสดงข้อผิดพลาดนี้:

Uncaught ReferenceError: ไม่ได้กำหนดการส่งออก

ที่ app.js: 2

แต่ไม่มีที่ไหนในรหัสของฉันฉันไม่เคยใช้ชื่อexportsนี้

ฉันจะแก้ไขปัญหานี้ได้อย่างไร?

ไฟล์

app.ts

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

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

โมดูล -1t

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

แก้ไข:

คำตอบนี้อาจใช้ไม่ได้หากคุณไม่ได้กำหนดเป้าหมายes5อีกต่อไปฉันจะพยายามทำให้คำตอบสมบูรณ์ยิ่งขึ้น

คำตอบเดิม

หากไม่ได้ติดตั้ง CommonJS ( ซึ่งกำหนดexports ) คุณต้องลบบรรทัดนี้ออกจากtsconfig.json:

 "module": "commonjs",

ตามความคิดเห็นสิ่งนี้เพียงอย่างเดียวอาจใช้ไม่ได้กับtsc. หากเป็นเช่นนั้นคุณสามารถติดตั้งตัวโหลดโมดูลเช่น CommonJS, SystemJS หรือ RequireJS จากนั้นระบุสิ่งนั้น

บันทึก:

ดูmain.jsไฟล์ของคุณที่tscสร้างขึ้น คุณจะพบสิ่งนี้ที่ด้านบนสุด:

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

มันคือต้นตอของข้อความแสดงข้อผิดพลาดและหลังจากลบ"module": "commonjs",แล้วข้อความนั้นจะหายไป

วิธีแก้ปัญหาอื่น ๆ สำหรับปัญหานี้

• เพิ่มบรรทัดต่อไปนี้ก่อนการอ้างอิงอื่น ๆ ใน Javascript นี่เป็นการแฮ็กเล็กน้อยที่ดี

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

• ปัญหานี้เกิดขึ้นกับ TypeScript เวอร์ชันล่าสุดข้อผิดพลาดนี้สามารถกำจัดได้โดยอ้างถึง typescript เวอร์ชัน 2.1.6

ฉันแก้ไขปัญหาโดยการลบ"type": "module"ฟิลด์จากpackage.json.

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

และเพิ่มไปยังปลั๊กอิน. babelrc ช่วยแก้ปัญหาของฉัน

วิธีแก้ปัญหาของฉันคือผลรวมของทุกอย่างข้างต้นพร้อมกับเทคนิคเล็ก ๆ น้อย ๆ ที่ฉันเพิ่มโดยพื้นฐานแล้วฉันได้เพิ่มสิ่งนี้ลงในโค้ด html ของฉัน

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

สิ่งนี้ยังช่วยให้คุณสามารถใช้importแทนได้requireว่าคุณกำลังใช้อิเล็กตรอนหรืออะไรบางอย่างและใช้ได้ดีกับ typescript 3.5.1, target: es3 -> esnext

สิ่งนี้ได้รับการแก้ไขโดยตั้งค่าmoduleตัวเลือกคอมไพเลอร์เป็นes6:

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

ฉันมีปัญหาเดียวกันและแก้ไขโดยเพิ่มไลบรารี " es5 " ไปที่ tsconfig.json ดังนี้:

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

สำหรับคนที่ยังคงมีปัญหานี้หากเป้าหมายคอมไพเลอร์ของคุณตั้งค่าเป็น ES6 คุณต้องบอกให้ babel ข้ามการแปลงโมดูล โดยเพิ่มสิ่งนี้ลงใน.babelrcไฟล์ของคุณ

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

ฉันมีข้อผิดพลาดเดียวกันนี้ด้วย ในกรณีของฉันเป็นเพราะเรามีคำสั่งนำเข้าที่ล้าสมัยในโครงการ TypeScript AngularJS ของเราเช่นนี้:

import { IAttributes, IScope } from "angular";

ซึ่งคอมไพล์เป็น JavaScript ดังนี้:

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

สิ่งนี้จำเป็นในสมัยก่อนเพราะเราใช้IAttributesในโค้ดและ TypeScript ก็ไม่รู้ว่าจะทำอย่างไรกับมันเป็นอย่างอื่น แต่หลังจากลบคำสั่งนำเข้าและการแปลงIAttributesเป็นng.IAttributesJavaScript สองบรรทัดก็หายไป - ข้อความแสดงข้อผิดพลาดก็เช่นกัน

สำหรับบางโครงการ ASP.NET importและexportอาจไม่สามารถใช้งานได้เลยใน typescripts ของคุณ

ข้อผิดพลาดของคำถามปรากฏขึ้นเมื่อฉันพยายามทำและฉันเพิ่งค้นพบในภายหลังว่าฉันต้องการเพิ่มสคริปต์ JS ที่สร้างขึ้นในมุมมองดังนี้:

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

เพียงแค่เพิ่มlibraryTarget: 'umd'เช่นนั้น

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

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

สำหรับฉันการลบออก"esModuleInterop": trueจาก tsconfig.json เป็นการหลอกลวง

หมายเหตุ: สิ่งนี้อาจใช้ไม่ได้กับคำตอบของ OP แต่ฉันได้รับข้อผิดพลาดนี้และนี่คือวิธีที่ฉันแก้ไข

ดังนั้นปัญหาที่ฉันพบคือฉันได้รับข้อผิดพลาดนี้เมื่อฉันดึงไลบรารี 'js' จาก CDN เฉพาะ

สิ่งเดียวที่ผิดที่ฉันทำคือการนำเข้าจากcjsไดเรกทอรีของ CDN ดังนี้: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

สังเกตเห็นdist/cjsส่วน? นั่นคือจุดที่เป็นปัญหา

ฉันกลับไปที่ CDN (jsdelivr) ในกรณีของฉันและไปที่umdโฟลเดอร์ และฉันพบอีกชุดหนึ่งpopper.min.jsซึ่งเป็นไฟล์ที่ถูกต้องที่จะนำเข้า: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/umd/popper.min.js.

ลองสิ่งที่ @iFreilicht แนะนำไว้ข้างต้น หากไม่ได้ผลหลังจากที่คุณติดตั้ง webpack และทั้งหมดคุณอาจเพิ่งคัดลอกการกำหนดค่า webpack จากที่อื่นทางออนไลน์และกำหนดค่าไว้ที่นั่นว่าคุณต้องการให้เอาต์พุตรองรับ CommonJS โดยไม่ได้ตั้งใจ ตรวจสอบให้แน่ใจว่าไม่ใช่กรณีนี้ใน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"
  }
};

มีปัญหาเดียวกันและแก้ไขได้โดยเปลี่ยนลำดับการโหลดแพ็คเกจ JS

ตรวจสอบลำดับที่เรียกใช้แพ็กเกจที่คุณต้องการและโหลดตามลำดับที่เหมาะสม

ในกรณีที่เฉพาะเจาะจงของฉัน (ไม่ได้ใช้ Bundler โมดูล) ฉันต้องการที่จะโหลดReduxแล้วแล้วRedux Thunk React ReduxโหลดReact Reduxก่อนที่จะให้ฉันRedux Thunkexports 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"]
    }
  }

ฉันมีปัญหาเดียวกัน แต่การตั้งค่าต้องใช้วิธีอื่น

ฉันใช้create-react-app-rewiredแพคเกจกับconfig-overrides.jsไฟล์ ก่อนหน้านี้ฉันใช้addBabelPresetsการนำเข้า (ในoverride()วิธีการ) จากcustomize-craและตัดสินใจที่จะแยกค่าที่ตั้งไว้ล่วงหน้าเหล่านั้นไปยังไฟล์แยกต่างหาก สิ่งนี้ช่วยแก้ปัญหาของฉันได้โดยบังเอิญ

ฉันเพิ่มลงuseBabelRc()ในไฟล์override()วิธีการในconfig-overrides.jsและสร้างbabel.config.jsไฟล์ที่มีดังต่อไปนี้:

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

ในการแก้ปัญหานี้ให้ใส่สองบรรทัดนี้ในหน้าindex.htmlของคุณ

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

อย่าลืมตรวจสอบเส้นทางไฟล์main.jsของคุณ

หากคุณแค่ใช้อินเทอร์เฟซสำหรับประเภทให้exportเว้นคีย์เวิร์ดไว้และ ts สามารถเลือกประเภทได้โดยไม่จำเป็นต้องนำเข้า กุญแจสำคัญคือคุณไม่สามารถใช้import/ exportที่ใดก็ได้

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

เป็น

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