Babel ve “Unexpected Token” Hatası Nedir?
Hata ile Karşılaştığınızda Ne Olur?
```
SyntaxError: Unexpected token
```
Bu hata, derlediğiniz JavaScript dosyasındaki bir yerde beklenmeyen bir karakter veya yanlış yapı ile karşılaştığı anlamına gelir. Peki, bunu nasıl çözebilirsiniz? İşte birkaç yaygın neden ve çözüm önerisi.
Yaygın Nedenler ve Çözüm Yolları
İlk ve en yaygın neden, yazdığınız JavaScript kodunun yanlış bir şekilde yazılmış olmasıdır. Eğer bir fonksiyona parametre gönderirken parantezleri doğru kapatmazsanız ya da bir dizede unutulmuş bir tırnak işareti varsa, Babel bu hatayı veriyor.
Çözüm: Kodu dikkatlice gözden geçirin ve özellikle parantez, tırnak işaretleri ve virgülleri kontrol edin.
2. Eksik veya Yanlış Babel Yapılandırması
Babel, doğru yapılandırma ile çalışır. Eğer `babel.config.js` dosyanızda eksik veya hatalı ayar varsa, Babel doğru bir şekilde derleme yapamaz ve bu da “Unexpected token” hatasına neden olabilir.
Çözüm: `babel.config.js` dosyasını kontrol edin ve doğru ayarların yapıldığından emin olun.
```js
module.exports = {
presets: [
"@babel/preset-env", // ES6+ özelliklerini doğru şekilde derler
],
};
```
3. ES6+ Özelliklerinin Desteklenmemesi
Babel, ES6+ özelliklerini daha eski sürüm JavaScript kodlarına çevirebilse de, bazı özelliklerin Babel tarafından doğru şekilde işlenmemesi mümkün olabilir. Özellikle, bazı yeni özelliklerin desteklenmesi için ek eklentilere (plugin) ihtiyacınız olabilir.
Çözüm: Gerekli Babel eklentilerini yüklemeyi unutmayın.
```bash
npm install --save-dev @babel/plugin-transform-arrow-functions
```
4. Modül Türü Hatası
Bir başka yaygın hata, modül türlerinin uyumsuz olmasıdır. JavaScript modüllerinin ES6 modülleri veya CommonJS türü olması gerekir. Babel’in doğru modül türünü anlaması, derleme hatalarını önleyecektir.
Çözüm: `package.json` dosyasındaki `"type"` alanını doğru ayarlarla yapılandırın. Eğer modülleriniz ES6 modülleri ise `"type": "module"` olarak ayarlayın.
```json
{
"type": "module"
}
```