خطأ Syntax error: Unexpected token ... في React

Adam Ebrahim · 12 مارس 2021

عند تشغيل الكود التالي:

const Route = ({ component: Component, ...rest }) => (
  <div {...rest} render={props => (
    <Component {...props}/>
  )}/></div>
)

يظهر الخطأ التالي:

Uncaught Error: Cannot find module "./Login"
    at webpackMissingModule (router.js:9)
    at Object.<anonymous> (router.js:9)
    at __webpack_require__ (bootstrap 18b9132…:555)
    at fn (bootstrap 18b9132…:86)
    at Object.<anonymous> (index.js:22)
    at __webpack_require__ (bootstrap 18b9132…:555)
    at fn (bootstrap 18b9132…:86)
    at Object.<anonymous> (bootstrap 18b9132…:578)
    at __webpack_require__ (bootstrap 18b9132…:555)
    at bootstrap 18b9132…:578
webpackMissingModule @ router.js:9
(anonymous) @ router.js:9
__webpack_require__ @ bootstrap 18b9132…:555
fn @ bootstrap 18b9132…:86
(anonymous) @ index.js:22
__webpack_require__ @ bootstrap 18b9132…:555
fn @ bootstrap 18b9132…:86
(anonymous) @ bootstrap 18b9132…:578
__webpack_require__ @ bootstrap 18b9132…:555
(anonymous) @ bootstrap 18b9132…:578
(anonymous) @ bootstrap 18b9132…:578
webpackHotDevClient.js:233 Error in ./src/Login.js
Syntax error: Unexpected token (13:43)

  11 | 
  12 | 
> 13 | const PrivateRoute = ({ component: Component, ...rest }) => (
     |                                               ^
  14 | <div {...rest} render={props => (
  15 |     <Component {...props}/>

فحصت الكود عدة مرات ولم أجد سبب المشكلة، حاولت البحث عن حل للمكشلة لكن دون جدوى.

سامح أشرف · 12 مارس 2021

هذه مشكلة في إعدادات babel ,وظهرت في نهاية 2015، ويبدو أنك تستعمل إصدار قديم من babel أو أن إعداداته غير معدة بشكل صحيح، يمكن حل هذه المشكلة بإحدى هذه الطرق:

تثبيت حزمة babel-plugin-transform-object-rest-spread من خلال تنفيذ السطر التالي:

npm install --save-dev babel-plugin-transform-object-rest-spread

ثم إضافة الحزمة إلى ملف .babelrc في مجلد المشروع كالتالي:

{
  "plugins": ["transform-object-rest-spread"]
}

إن لم يعمل معك الحل السابق يمكنك أن تجرب تثبيت حزمة babel-preset-stage-3

npm install --save-dev babel-preset-stage-3

وإضافة التالي إلى ملف .babelrc في مجلد المشروع :

{
  "presets": ["es2015", "react", "stage-3"]
}

خطأ Syntax error: Unexpected token ... في React

السؤال

Adam Ebrahim

1 جواب على هذا السؤال

Recommended Posts

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية