예기치 않은 토큰 내보내기


221

프로젝트에서 일부 ES6 코드를 실행하려고하는데 예기치 않은 토큰 내보내기 오류가 발생합니다.

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

5
지원할 환경 또는 구성에 대한 정보가 충분하지 않습니다. 이 오류는 exportES6에서만 사용 가능한 webpack 또는 babel이 올바르게 작동하지 않으며 해당 모듈이 ES6 지원을 제공한다는 것을 나타냅니다.
Claies

24
당신은 사용해야 module.exports = MyClass하지,export class MyClass
onmyway133

답변:


249

ES6 모듈 구문을 사용하고 있습니다.

이는 환경 (예 : node.js)이 ES6 모듈 구문을 지원해야 함을 의미합니다.

NodeJS는 module.exportsES6 모듈 구문 ( export키워드)이 아닌 CommonJS 모듈 구문 ( )을 사용합니다 .

해결책:

  • babelnpm 패키지를 사용 하여 ES6를 commonjs대상으로 변환

또는

  • CommonJS 구문으로 리팩터링하십시오.

CommonJS 구문의 예는 다음과 같습니다 ( flaviocopes.com/commonjs/ ).

  • exports.uppercase = str => str.toUpperCase()
  • exports.a = 1

15
nodejs는 언제 import기본적으로 지원 됩니까? 나는 v10.0.0이 그것을 가질 것이라고 생각했지만 분명히 그렇지는 않았다.
chovy

4
@chovy 실험 지원은 "--experimental-modules"플래그와 함께 사용할 수 있습니다. 파일 확장자는 .mjs 여야합니다.
Giovanni P.

1
모듈을 기본적으로 지원하는 Chrome 66을 사용하면이 오류가 발생합니다.
Tom Russell


2
누군가 CommonJs 구문에 대해 아직 명확하지 않습니다. 이 링크를 확인하십시오. 조금 도움이 될 수 있습니다. flaviocopes.com/commonjs
LT

142

이 오류가 발생하면 javascript 파일을 html 페이지에 포함시킨 방법과 관련이있을 수 있습니다. 모듈을로드 할 때 해당 파일을 명시 적으로 선언해야합니다. 예를 들면 다음과 같습니다.

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

다음과 같이 스크립트를 포함시킬 때 :

<script src="module.js"></script>

오류가 발생합니다.

잡히지 않은 구문 오류 : 예기치 않은 토큰 내보내기

type 속성이 "module"로 설정된 파일을 포함해야합니다.

<script type="module" src="module.js"></script>

그런 다음 예상대로 작동하고 모듈을 다른 모듈로 가져올 준비가되었습니다.

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );

37
"가장 많이 올라온"답변과 달리, 이것은 실제로 문제를 해결하고 유일한 옵션은 CommonJS 메소드, APM 메소드를 활용하거나 코드를 변환하는 것만 제안하지 않고 왜 발생하는지 설명합니다. 이것은 예외 일 것입니다. type유효한 MIME 유형 (일명 매체 유형)으로 예상되는 w3c 표준 에 따라 예상치 못한 결과가 발생했습니다. 감사!
Shaun Wilson

4
이 오류는 수정되지만 Chrome 스크립트의 import 문에 "예기치 않은 토큰 {"이 표시됩니다 (예 : <script> import ... </ script>
PandaWood

1
@PandaWood <script type="module">import ...</script>모듈에서 가져올 때는 을 사용해야 합니다. 최신 버전의 Chromium에서 테스트했습니다.
Vladimir S.

이 문제가 해결되었습니다 :)
user3651476

Pure JS (ES6)는 수입을 지원했으며 이것이 내가 왜 이것을 충족했는지 정확하게 설명합니다
Eric

16

내 두 센트

수출

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

import { MyClass1, MyClass2 } from './myClass';

CommonJS 대안

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

other.js

const { MyClass1, MyClass2 } = require('./myClass');

기본 내보내기

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJS 대안

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');

도움이 되었기를 바랍니다


ES6 기본 내보내기 예제의 경우 "기본 내보내기"를 작성했지만 "내보내기 기본값"이어야합니다.
IAM_AL_X

@IAM_AL_X 캐치 주셔서 감사합니다 :-)
Barnstokkr

10

ES6를 추가하려면 babel-preset-env

그리고 당신의 .babelrc:

{
  "presets": ["@babel/preset-env"]
}

babel 7을 적용하기 위해 @ghanbari 의견 덕분에 답변이 업데이트되었습니다.


8
그의 질문은 babel을 설명하는 것이 아닙니다. 왜 다른 것을 혼동시킬 수있는 필요하지 않은 것에 대답해야합니까?
Jalal

7
@monsto이 질문은 babel저자 가 이미 태그 했습니다. Phil Ricketts의 답변이 문제를 명확하게 설명하지만이 답변은 저자의 문제에 대한 직접적인 해결책입니다.
boycy

"@ babel / preset-env"
ghanbari 2016 년

6

기본 JavaScript 모듈 내보내기를 간단히 사용할 수있을 때는 현재 Babel을 사용할 필요가 없습니다 (JS는 매우 강력 해졌습니다). 전체 튜토리얼 확인

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

2
그럼 수업을 어떻게 내 보냅니 까?
Sherwin Ablaña Dapito

1
질문이 실제로 NodeJS가 사용하는 CommonJS가 아닌 ES6에 대한 것이므로 내 대답을 삭제하고 있습니다. 답변은 위를 확인하십시오.
Alvin Konda

@ SherwinAblañaDapito module.exports = class MyClass {} 작동
Marian Klühspies

3

바벨 패키지를 설치 @babel/core하고 @babel/preset있는 직접 ES6 목표를 이해하지 못하는 노드 JS로 commonjs 대상에 ES6를 변환합니다

npm install --save-dev @babel/core @babel/preset-env

그런 다음 .babelrc프로젝트의 루트 디렉토리에 이름 을 가진 하나의 구성 파일을 작성 하고 여기에이 코드를 추가해야합니다.

{ "presets": ["@babel/preset-env"] }


또한 @ babel / register를 설치해야했습니다. 그렇지 않으면 여전히 "SyntaxError : 모듈 외부에서 import 문을 사용할 수 없습니다"라는 메시지가 표시됩니다.
분자

3

나는 엔트리 포인트 파일을 만들어서 이것을 고쳤다.

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

내부 app.js및 외부에서 가져온 파일 은 imports/exports 지금처럼 작동합니다.node index.js

참고 : 경우에 app.js사용 export default이가된다 require('./app.js').default엔트리 포인트 파일을 사용하는 경우.


1
babel, webpack, parcel 등을 필요로하지 않는 간단한 프로젝트에 대한 최고의 답변 ... 프로젝트에 대한 간단한 / server express로 monorepo 프로젝트에 사용했습니다. 매력처럼 일했다 ...
mattdlockyer

-3

불행히도 ES6 구문을 사용하는 것은 노드에서 작동하지 않습니다. 불행히도 컴파일러가 내보내기 또는 가져 오기와 같은 구문을 이해하게하려면 명백히 바야합니다.

npm install babel-cli --save

이제 babelrc 파일에서 .babelrc 파일을 만들어야합니다. 우리는 babel을 ES5로 컴파일 할 때 사전 설정으로 설치 한 es2015 사전 설정을 사용하도록 설정합니다.

앱의 루트에서 .babelrc 파일을 만듭니다. $ npm install babel-preset-es2015-저장

앱의 루트에서 .babelrc 파일을 만듭니다.

{  "presets": ["es2015"] }

그것이 효과가 있기를 바랍니다 ... :)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.