React Next 报错 Err_require_esm Esm

MIster jashon

4 min read

·

Oct 04, 2024

33

Share

"React Next 报错: err_require_esm, ESM "

Ketika kamu membangun aplikasi web dengan React dan Next.js, kamu mungkin pernah menjumpai pesan kesalahan "err_require_esm". Kesalahan ini menunjukkan bahwa modul yang kamu coba impor adalah modul ESM (ECMAScript Modules), tetapi Next.js mencoba untuk memuatnya sebagai modul CommonJS.

Apa itu ESM (ECMAScript Modules)?

ESM adalah sistem modul standar untuk JavaScript yang memungkinkan kamu untuk mengimpor dan mengekspor fungsi, kelas, dan variabel dari file JavaScript yang berbeda. ESM menawarkan struktur yang lebih modern dan fleksibel dibandingkan dengan sistem modul CommonJS yang lebih lama.

Bagaimana 'err_require_esm' terjadi di React Next.js?

Kesalahan ini biasanya terjadi karena:

• Modul CommonJS di lingkungan ESM: Kamu mungkin mencoba untuk menggunakan modul CommonJS di lingkungan yang dirancang untuk menggunakan ESM, seperti di Next.js.
• Konfigurasi modul yang salah: Konfigurasi modul di Next.js mungkin tidak diatur dengan benar, sehingga tidak dapat menangani modul ESM dengan benar.

Bagaimana mengatasi 'err_require_esm' di Next.js?

Berikut adalah beberapa solusi untuk mengatasi kesalahan "err_require_esm" di Next.js:

1. Periksa Konfigurasi Modul Next.js

• Periksa file 'next.config.js':
  • Pastikan properti webpack telah dikonfigurasi dengan benar.
  • Pastikan properti webpack5 diatur ke true.

Contoh konfigurasi:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
}

module.exports = nextConfig

2. Konversi Modul CommonJS ke ESM

Jika modul yang kamu gunakan adalah modul CommonJS, kamu perlu mengonversinya ke ESM. Berikut adalah beberapa cara untuk mengonversinya:

• Gunakan 'package.json': Tambahkan properti type ke file package.json dan atur nilainya ke module.
• Gunakan 'babel.config.js': Konfigurasi Babel untuk mengonversi modul CommonJS ke ESM.
• Gunakan tool seperti 'esm': Instal dan gunakan library 'esm' untuk mengonversi modul CommonJS ke ESM.

3. Gunakan Modul ESM

Jika memungkinkan, gunakan modul ESM untuk menghindari konflik dengan sistem modul Next.js. Banyak library populer sudah mendukung ESM.

4. Pindahkan Modul ESM ke Folder 'esm'

Jika kamu ingin menggunakan modul ESM dari library pihak ketiga, kamu dapat memindahkannya ke folder 'esm' dalam direktori proyek Next.js. Pastikan file next.config.js juga diubah untuk menyertakan folder 'esm' dalam transpilePackages.

Contoh konfigurasi:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
  transpilePackages: ['esm'],
}

module.exports = nextConfig

Tips tambahan:

• Perbarui 'next.js': Pastikan kamu menggunakan versi terbaru Next.js.
• Gunakan 'yarn' atau 'npm': Gunakan manajer paket yang kompatibel dengan ESM seperti 'yarn' atau 'npm' versi terbaru.
• Hindari menggunakan 'require': Di Next.js, sebaiknya hindari penggunaan require dan gunakan import untuk mengimpor modul.

Kesimpulan

Kesalahan "err_require_esm" di Next.js adalah masalah yang umum terjadi ketika kamu mencoba menggunakan modul ESM. Dengan memahami konsep ESM, memeriksa konfigurasi Next.js, dan mengonversi modul CommonJS ke ESM, kamu dapat mengatasi kesalahan ini dengan mudah. Ingatlah untuk menggunakan versi terbaru Next.js, manajer paket, dan library untuk menghindari konflik.

Hasil konten:

Keywords: React, Next.js, 报错, err_require_esm, ESM, modul, CommonJS, konfigurasi, webpack, package.json, babel.config.js, esm