خطأ Attempted import error في react

عند استخدام التصدير الافتراضي بهذا الشكل:

export default function cube(x) {
  return x * x * x;
}

ليس عليك أن تستخدم الإستيراد المجزء بل نقوم بإستدعاء الدالة مباشرة

// يسبب السطر التالي خطأ
import { cube } from 'my-module';

// هذه الطريقة الصحيحة
import cube from 'my-module';

لذلك يجب عليك أن تعدل السطر التالي:

import { combineReducers } from '../../store/reducers';

// ليصبح هكذا
import combineReducers from '../../store/reducers';

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

سبب الخطأ هو أنك تقوم بـexport default لذا يتم عمل import بالطريقة التالية:

import rootReducer from '../../store/reducers';

لقد سميته rootReducer وليس combineReducers ﻷن rootReducer هو نتيجة استدعاء التابع combineReducers وليس التابع نفسه كما أن combineReducers يجب أن يأتي من redux.

بشكل عام أي export default يتم عمل import بالطريقة أعلاه أما export عادية فيتم عمل import لها بنفس طريقتك السابقة، إليك مثالاً يوضح اﻷمر:

// somefile.js
export function add(a,b){return a+b;}
export function sub(a,b){return a-b;}

export default function mul(a,b){return a * b;}

// someOtherfile.js
import mul,{add,sub} from "somefile.js";

mul(2,3) // 6
add(2,3) // 5
sub(2,3) // -1

عليك ان تستبدل :

import { combineReducers } from '../../store/reducers';

بالاتي:

import combineReducers from '../../store/reducers';