Mendapatkan Ekspor Token yang Tidak Terduga


221

Saya mencoba menjalankan beberapa kode ES6 di proyek saya, tetapi saya mendapatkan kesalahan token ekspor yang tidak terduga.

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

5
tidak ada informasi yang cukup tentang lingkungan atau konfigurasi Anda untuk menawarkan bantuan apa pun. Kesalahan ini menunjukkan bahwa baik webpack atau babel tidak berfungsi dengan benar, karena exporthanya tersedia di ES6, dan modul-modul itulah yang menyediakan dukungan ES6.
Claies

24
Anda harus menggunakan module.exports = MyClass, bukanexport class MyClass
onmyway133

Jawaban:


249

Anda menggunakan sintaks Modul ES6.

Ini berarti lingkungan Anda (misalnya node.js) harus mendukung sintaks Modul ES6.

NodeJS menggunakan sintaks Modul CommonJS ( module.exports) bukan sintaks modul ES6 ( exportkata kunci).

Larutan:

  • Gunakan babelpaket npm untuk mengubah ES6 Anda ke commonjstarget

atau

  • Refactor dengan sintaks CommonJS.

Contoh dari sintaks CommonJS adalah (dari flaviocopes.com/commonjs/ ):

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

15
Kapan nodejs akan mendukung importsecara asli? Saya pikir v10.0.0 akan memilikinya tetapi ternyata tidak.
chovy

4
Dukungan eksperimental @chovy tersedia dengan flag "--experimental-modules". File harus memiliki ekstensi .mjs
Giovanni P.

1
Saya mendapatkan kesalahan ini menggunakan Chrome 66 dengan dukungan asli untuk modul.
Tom Russell

BTW: perhatikan bahwa sementara node10 / node12 mendukung modul di belakang flag, mereka tidak mendukungnya dalam mode REPL - namun didukung dalam mode eval di node12 .
jakub.g

2
Untuk seseorang masih belum jelas tentang Sintaks CommonJs. silakan cek tautan ini, semoga sedikit membantu. flaviocopes.com/commonjs
LT

142

Jika Anda mendapatkan kesalahan ini, itu mungkin juga terkait dengan bagaimana Anda memasukkan file javascript ke halaman html Anda. Saat memuat modul, Anda harus mendeklarasikan file-file tersebut secara eksplisit. Berikut sebuah contoh:

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

var bar = "bar";

export { foo, bar };

Ketika Anda memasukkan skrip seperti ini:

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

Anda akan mendapatkan kesalahan:

Uncaught SyntaxError: Ekspor token yang tidak terduga

Anda harus memasukkan file dengan atribut type yang disetel ke "module":

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

Dan itu akan berfungsi seperti yang diharapkan dan Anda siap untuk mengimpor modul Anda di modul lain:

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

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

37
tidak seperti jawaban "terbanyak-dipilih", ini sebenarnya memecahkan masalah dan menjelaskan mengapa hal itu terjadi tanpa menyarankan bahwa satu-satunya pilihan adalah memanfaatkan metode CommonJS, metode APM, atau untuk mengubah kode kami ... Ini juga akan menjadi pengecualian ke standar w3c di mana typediharapkan menjadi tipe mime yang valid (alias. tipe media), jadi ini merupakan penemuan yang tidak terduga. Terima kasih!
Shaun Wilson

4
Ini memperbaiki kesalahan tetapi saya kemudian mendapatkan "Token tak terduga {" pada baris pernyataan impor di Chrome 67 dengan skrip yang sebaris misalnya <script> impor ... </script>
PandaWood

1
@ PandaWood Anda harus menggunakan <script type="module">import ...</script>, ketika Anda mengimpor dari modul. Saya mengujinya di Chromium versi terbaru.
Vladimir S.

Ini memperbaiki masalah saya :)
user3651476

Pure JS (ES6) telah mendukung impor dan ini menjelaskan mengapa saya bertemu ini
Eric

16

Dua sen saya

Ekspor

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

Alternatif CommonJS

myClass.js

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

other.js

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

Ekspor Default

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

Alternatif CommonJS

myClass.js

module.exports = class MyClass1 {
}

other.js

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

Semoga ini membantu


Untuk contoh ES6 Default Ekspor, Anda menulis "ekspor default", tetapi seharusnya "ekspor default".
IAM_AL_X

@IAM_AL_X Terima kasih atas tangkapannya :-)
Barnstokkr

10

Untuk menggunakan ES6 add babel-preset-env

dan di Anda .babelrc:

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

Jawaban diperbarui berkat komentar @ghanbari untuk menerapkan babel 7.


8
pertanyaannya bukan tentang menjelaskan babel. Jadi mengapa harus menjawab sesuatu yang tidak diperlukan yang dapat membingungkan orang lain?
Jalal

7
@monsto pertanyaan ini sudah ditandai babeloleh penulis. Sementara Phil Ricketts menjawab tidak mengklarifikasi masalah, mana yang baik, jawaban ini adalah solusi langsung untuk masalah penulis.
boycy

"@ babel / preset-env"
ghanbari

6

Tidak perlu menggunakan Babel saat ini (JS menjadi sangat kuat) ketika Anda cukup menggunakan ekspor modul JavaScript default. Lihat tutorial lengkap

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World

2
Nah bagaimana cara Anda mengekspor kelas?
Sherwin Ablaña Dapito

1
Saya menghapus jawaban saya karena pertanyaan sebenarnya untuk ES6 dan bukan CommonJS yang digunakan oleh NodeJS. Silakan periksa jawaban di atas.
Alvin Konda

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

3

Instal paket babel @babel/coredan @babel/presetyang akan mengubah ES6 menjadi target commonjs karena node js tidak memahami target ES6 secara langsung

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

Maka Anda perlu membuat satu file konfigurasi dengan nama .babelrcdi direktori root proyek Anda dan menambahkan kode ini di sana

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


Saya juga perlu menginstal @ babel / register, kalau tidak saya masih akan mendapatkan "SyntaxError: Tidak dapat menggunakan pernyataan impor di luar modul"
molekul

3

Saya memperbaikinya dengan membuat file entry point seperti.

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

dan semua file yang saya impor di dalam app.jsdan di luar berfungsi dengan imports/exports sekarang Anda hanya menjalankannya sepertinode index.js

Catatan: jika app.jsdigunakan export default, ini menjadi require('./app.js').defaultsaat menggunakan file titik masuk.


1
Jawaban terbaik untuk proyek sederhana tidak memerlukan babel, webpack, paket dll ... Saya menggunakan monorepo project dengan simple / server express untuk project. Bekerja seperti pesona ...
mattdlockyer

-3

Menggunakan sintaks ES6 tidak berfungsi dalam node, sayangnya, Anda harus memiliki babel untuk membuat kompiler memahami sintaksis seperti ekspor atau impor.

npm install babel-cli --save

Sekarang kita perlu membuat file .babelrc, dalam file babelrc, kita akan mengatur babel untuk menggunakan preset es2015 yang kita instal sebagai preset ketika dikompilasi ke ES5.

Di root aplikasi kami, kami akan membuat file .babelrc. $ npm install babel-preset-es2015 --save

Di root aplikasi kami, kami akan membuat file .babelrc.

{  "presets": ["es2015"] }

Semoga berhasil ... :)

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.