공식 핸드북에 따라 모듈을 구현하려고 하면이 오류 메시지가 표시됩니다.

포착되지 않은 ReferenceError : 내보내기가 정의되지 않았습니다.

app.js : 2에서

그러나 내 코드 어디에도 이름을 사용하지 않습니다 exports.

이 문제를 어떻게 해결할 수 있습니까?

파일

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

편집하다:

이 답변은 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을 참조하여 제거 할 수 있습니다.

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에서 잘 작동합니다.

"type": "module"에서 필드를 제거하여 문제를 해결했습니다 package.json.

같은 문제가 발생 하여 다음과 같이 tsconfig.json에 " es5 "라이브러리를 추가하여 해결했습니다 .

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

module컴파일러 옵션을 es6다음과 같이 설정하면이 문제가 해결 됩니다 .

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

나도 이와 같은 오류가 발생했습니다. 제 경우에는 TypeScript AngularJS 프로젝트에 다음과 같은 구식 import 문이 있었기 때문입니다.

import { IAttributes, IScope } from "angular";

다음과 같이 JavaScript로 컴파일되었습니다.

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

이것은 우리 IAttributes가 코드에서 사용 했고 TypeScript가 그렇지 않으면 무엇을해야할지 알지 못했기 때문에 옛날에 필요 했습니다. 그러나 import 문을 제거하고, 변환 한 후 IAttributes에 ng.IAttributes두 자바 스크립트 라인 사라 - 그래서 오류 메시지가 않았다.

간단히 추가하십시오 libraryTarget: 'umd'.

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

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

나를 위해 "esModuleInterop": truetsconfig.json 에서 제거 하면 트릭이 발생했습니다.

일부 ASP.NET 프로젝트의 경우 import와 export귀하의 타이프 친의 모든에서 사용할 수 없습니다.

그렇게하려고 할 때 질문의 오류가 나타 났고 나중에 생성 된 JS 스크립트를 다음 과 같이 View 에 추가해야한다는 것을 알게되었습니다 .

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

@iFreilicht가 위에서 제안한 것을 시도하십시오. 웹팩과 모든 것을 설치 한 후에도 작동하지 않으면 온라인 어딘가에서 웹팩 구성을 복사하여 출력이 실수로 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 패키지 로딩 순서를 변경하여 수정했습니다.

필요한 패키지가 호출되는 순서를 확인하고 적절한 순서로로드하십시오.

내 특정 사건에 내가 부하에 필요한 (모듈 들러를 사용하지 않는) Redux, 다음 Redux Thunk, 다음 React Redux. React Redux전에 로드 Redux Thunk하면 나에게 줄 것이다 exports is not defined.

참고 : 이것은 OP의 답변에 적용되지 않을 수 있지만이 오류가 발생했으며 이것이 해결 방법입니다.

그래서 제가 직면 한 문제는 특정 CDN에서 'js'라이브러리를 검색 할 때이 오류가 발생한다는 것입니다.

내가 한 유일한 잘못된 일은 CDN의 cjs디렉토리에서 다음과 같이 가져 오는 것입니다 . 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.

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