예기치 않은 토큰 내보내기 가져오기

예기치 않은 토큰 내보내기 가져오기

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

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

2022년 갱신

EcmaScript Module(ESM 또는 'ES6 Modules') 구문을 사용하고 있지만 사용자 환경에서는 지원되지 않습니다.

는 ESMv14.13.0)을 (NodeJ ESM).export 구문) 및 (공통)을 합니다. 모듈JS)module.exports속성 구문)을 수 있습니다.NodeJS v14.13.0 ESM nodemESM 。

솔루션:

• NodeJS ESM을를는, NodeJS v14.13.0 을 해 유효하게 할 수 ."type":"module" 중에package.json
• 공통 리팩터JS 모듈 구문(이전 버전의 노드용)JS)
• TypeScript를 병용하는 것을 검토하다ts-node ★★★★★★★★★★★★★★★★★」ts-node-dev 패키지시 ) 및를 npm으로 (TypeScript)..ts 삭제
• ESM을 공통으로 변환esbuild를 사용하는 JS(esbuildES6 javascript를 Common으로 변환하도록 구성된 패키지(npm)사용자 환경에서 지원되는 JS 대상입니다. (바벨은 더 이상 권장되지 않습니다.)

이 오류가 발생할 경우 JavaScript 파일을 html 페이지에 포함하는 방법과 관련이 있을 수 있습니다.모듈을 로드할 때는 해당 파일을 명시적으로 선언해야 합니다.다음은 예를 제시하겠습니다.

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

var bar = "bar";

export { foo, bar };

다음과 같이 스크립트를 포함할 경우:

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

다음과 같은 오류가 표시됩니다.

학습되지 않은 구문 오류:예기치 않은 토큰 내보내기

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

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

그러면 정상적으로 동작하고 모듈을 다른 모듈로 Import할 수 있습니다.

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

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

내 의견

내보내기

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.discloss(기타.disclos)

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

CommonJS 대안

myClass.js

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

other.discloss(기타.disclos)

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

내보내기 기본값

ES6

myClass.js

export default class MyClass {
}

other.discloss(기타.disclos)

import MyClass from './myClass';

CommonJS 대안

myClass.js

module.exports = class MyClass1 {
}

other.discloss(기타.disclos)

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

도움이 되었으면 좋겠다

이렇게 진입점 파일을 만들어서 수정했습니다.

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

) 에서 Import한 파일app.js그 이상도 이하도imports/exports 그냥 요.node index.js

" "의 경우: "app.jsexport default '아예'가 되고require('./app.js').default★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

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

메세지.js

module.exports = 'Hello world';

app.module

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

console.log(msg); // Hello World

하려면 ES6를 추가합니다.babel-preset-env

당신의 리 your your your your your your and.babelrc

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

@ghanbari 댓글로 babel 7을 적용해서 답변이 업데이트 되었습니다.

babel 패키지 설치@babel/core그리고.@babel/preset노드 js가 ES6 타깃을 직접 이해하지 못하기 때문에 ES6를 commonjs 타깃으로 변환합니다.

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

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

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

프로젝트에서 로컬 Javascript 모듈을 Import하려고 할 때도 예기치 않은 토큰 내보내기 오류가 발생하였습니다.index.html 파일에 스크립트 태그를 추가할 때 유형을 모듈로 선언하여 해결했습니다.

<script src = "./path/to/the/module/" type = "module"></script>

최신 버전의 Nodejs(v17?)에서는 transfiling이나 회피책 대신 .mjs 파일 확장자를 사용하여 최상위 수준의 "import", "async", "wait"를 사용할 수 있습니다.

   // > node my.mjs
   
   import {MyClass} from 'https://someurl'
   async func () {
     // return some promise
   }
   await func ()

한동안 모듈을 작동시켰지만, 이 모듈에는 없었습니다.Uncaught SyntaxError: Unexpected token export에러입니다.

알고 보니 가새 없이 가새만 달았습니다.예를 들어 다음과 같습니다.

if (true) {
export function foo() {}

큰 오류는 끝을 잊는 것이지만}파서는 먼저 브레이스 내의 내보내기를 찾습니다.이것은 no입니다.

그export키워드는 파일의 최상위 레벨에 있어야 합니다.

그래서:

if (true) {
    export function foo() {}
}

불법이 될 수도 있어요파서가 이것을 발견하면, 파서는 바로 거기서 파싱을 정지해, 오용을 알립니다.export애매하게, 「비모듈」의 JavaScript 파일을 로드하고 있을 때와 같은 에러가 발생합니다.export키워드를 지정합니다.근본적인 브레이스 누락 오류는 보고되지 않습니다.

그걸 알아내는 데 오랜 시간이 걸려서 어떤 미래 환자든 돕기 위해 이 글을 올렸습니다

파서가 보고하는 것이 이상적입니다.export파일의 최상위 수준에서만 허용됩니다.

가능한 답변

그 문제가 있었습니다만, 제 경우는,<< File.ts >>파일에 확장자를 추가할 수 없었습니다.

ES6 구문을 사용하는 것은 노드에서는 동작하지 않습니다만, 유감스럽게도 내보내기나 Import 등의 구문을 컴파일러가 이해할 수 있도록 하려면 babel이 필요합니다.

npm install babel-cli --save

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

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

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

{  "presets": ["es2015"] }

효과가 있으면 좋겠는데...:)

저는 사실 간단한 해결책을 추가하고 싶습니다.사용하다constt backticks(''면 되다')

const model = `<script type="module" src="/"></<script>`

언급URL : https://stackoverflow.com/questions/38296667/getting-unexpected-token-export