Đang cố gắng triển khai một mô-đun theo sổ tay chính thức , tôi nhận được thông báo lỗi sau:

Uncaught ReferenceError: xuất không được xác định

tại app.js: 2

Nhưng không nơi nào trong mã của tôi mà tôi đã từng sử dụng tên exports.

Làm thế nào tôi có thể sửa lỗi này?

Các tập tin

app.ts

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

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

mô-đun-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"
    ]
}

BIÊN TẬP:

Câu trả lời này có thể không hoạt động tùy thuộc nếu bạn không nhắm mục tiêu es5nữa, tôi sẽ cố gắng làm cho câu trả lời đầy đủ hơn.

Câu trả lời gốc

Nếu CommonJS không được cài đặt ( định nghĩaexports ), bạn phải xóa dòng này khỏi tsconfig.json:

 "module": "commonjs",

Theo các nhận xét, chỉ điều này có thể không hoạt động với các phiên bản sau của tsc. Nếu đúng như vậy, bạn có thể cài đặt một trình tải mô-đun như CommonJS, SystemJS hoặc RequestJS và sau đó chỉ định điều đó.

Ghi chú:

Nhìn vào main.jstệp của bạn đã tsctạo. Bạn sẽ tìm thấy điều này ở trên cùng:

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

Nó là gốc của thông báo lỗi và sau khi xóa "module": "commonjs",, nó sẽ biến mất.

Một số giải pháp khác cho vấn đề này

• Thêm dòng sau trước các tham chiếu khác đến Javascript. Đây là một hack nhỏ tốt đẹp.

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

• Sự cố này xảy ra với phiên bản TypeScript mới nhất, lỗi này có thể được loại bỏ bằng cách tham khảo phiên bản typecript 2.1.6

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

và thêm vào các plugin .babelrc đã giải quyết được câu hỏi của tôi.

giải pháp của tôi là tổng hợp của tất cả mọi thứ ở trên với một số thủ thuật nhỏ mà tôi đã thêm, về cơ bản tôi đã thêm điều này vào mã html của mình

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

điều này thậm chí còn cho phép bạn sử dụng importthay vì requirenếu bạn đang sử dụng electron hoặc thứ gì đó, và nó hoạt động tốt với typecript 3.5.1, target: es3 -> esnext.

Tôi đã giải quyết vấn đề bằng cách xóa "type": "module"trường khỏi package.json.

Tôi đã gặp vấn đề tương tự và đã giải quyết nó bằng cách thêm thư viện " es5 " vào tsconfig.json như thế này:

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

Đối với những người vẫn gặp sự cố này, nếu mục tiêu trình biên dịch của bạn được đặt thành ES6, bạn cần yêu cầu babel bỏ qua chuyển đổi mô-đun. Để làm như vậy, hãy thêm cái này vào .babelrctệp của bạn

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

Điều này được khắc phục bằng cách đặt moduletùy chọn trình biên dịch thành es6:

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

Tôi cũng gặp lỗi này. Trong trường hợp của tôi, đó là vì chúng tôi có một câu lệnh nhập kiểu cũ trong dự án TypeScript AngularJS của chúng tôi như sau:

import { IAttributes, IScope } from "angular";

được biên dịch sang JavaScript như thế này:

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

Điều này là cần thiết trong những ngày xưa vì khi đó chúng ta sử dụng IAttributesmã và TypeScript sẽ không biết phải làm gì với nó nếu không. Nhưng sau khi xóa câu lệnh nhập và chuyển đổi IAttributessang ng.IAttributeshai dòng JavaScript đó đã biến mất - và thông báo lỗi cũng vậy.

Chỉ cần thêm libraryTarget: 'umd', như vậy

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

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

đối với tôi, xóa "esModuleInterop": truekhỏi tsconfig.json đã thực hiện thủ thuật.

Đối với một số dự án ASP.NET importvà exportcó thể hoàn toàn không được sử dụng trong các bản ghi của bạn.

Lỗi của câu hỏi xuất hiện khi tôi cố gắng làm như vậy và sau đó tôi chỉ phát hiện ra rằng tôi chỉ cần thêm tập lệnh JS đã tạo vào Chế độ xem như sau:

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

Hãy thử những gì @iFreilicht đề xuất ở trên. Nếu điều đó không hoạt động sau khi bạn đã cài đặt webpack và tất cả, bạn có thể vừa sao chép cấu hình webpack từ một nơi nào đó trực tuyến và cấu hình ở đó mà bạn muốn đầu ra hỗ trợ CommonJS do nhầm lẫn. Đảm bảo đây không phải là trường hợp trong 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"
  }
};

Gặp sự cố tương tự và đã khắc phục nó bằng cách thay đổi thứ tự tải các gói JS.

Kiểm tra thứ tự mà các gói bạn cần đang được gọi và tải chúng theo thứ tự thích hợp.

Trong trường hợp cụ thể của tôi (không sử dụng gói mô-đun) Redux, sau đó Redux Thunk, tôi cần phải tải React Redux. Tải React Reduxtrước Redux Thunksẽ cho tôi exports is not defined.

Lưu ý: Điều này có thể không áp dụng cho câu trả lời của OP, nhưng tôi đã gặp lỗi này và đây là cách tôi giải quyết nó.

Vì vậy, vấn đề mà tôi gặp phải là tôi gặp lỗi này khi tôi truy xuất thư viện 'js' từ một CDN cụ thể.

Điều sai duy nhất mà tôi đã làm là nhập từ cjsthư mục của CDN như sau: https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/cjs/popper.min.js

Chú ý dist/cjsphần? Đó là nơi có vấn đề.

Tôi quay lại CDN (jsdelivr) trong trường hợp của mình và điều hướng để tìm umdthư mục. Và tôi có thể tìm một bộ popper.min.jsđó là tập tin chính xác để nhập khẩu: 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"]
    }
  }

Tôi gặp sự cố tương tự, nhưng thiết lập của tôi yêu cầu một giải pháp khác.

Tôi đang sử dụng create-react-app-rewiredgói có config-overrides.jstệp. Trước đây, tôi đã sử dụng addBabelPresetsnhập (trong override()phương thức) từ customize-cravà quyết định trừu tượng hóa các giá trị đặt trước đó thành một tệp riêng biệt. Thật trùng hợp, điều này đã giải quyết được vấn đề của tôi.

Tôi thêm useBabelRc()vào override()phương pháp trong config-overrides.jsvà tạo ra một babel.config.jstập tin với những điều sau đây:

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