حل مشكلة “Unexpected token export” عند استخدام Module Federation في Angular 15

تعتبر تقنية اتحاد الوحدة النمطية (Module Federation) واحدة من أهم الميزات في إطار عمل Angular، حيث تسمح للمطورين بإنشاء تطبيقات كبيرة وقابلة للتوزيع عبر وحدات مستقلة. ومع ذلك، قد تواجه بعض المشاكل التقنية أثناء تنفيذ هذه التقنية، مثل الخطأ "Unexpected token export" عندما تحاول الانتقال إلى وحدة معينة في تطبيق باستخدام Angular 15. في هذا المقال، سنتناول تحليل هذا الخطأ، وأسبابه المحتملة وكيفية إصلاحه.

فهم الخطأ “Unexpected token export”

عندما تواجه الخطأ "Unexpected token export" في ملف RemoteEntry.js، فهذا يشير غالباً إلى وجود مشكلة في تهيئة Webpack أو كيفية تحميل الوحدات. يظهر هذا الخطأ عادةً عندما يتم استخدام الصيغة الحديثة لـ ES6 (مثل export) في بيئة لا تدعم هذه الصيغة، أو عندما تكون هناك مشكلة في إعداد التحميل بين الوحدات الموزعة.

أسباب محتملة للخطأ

تتعدد الأسباب التي قد تؤدي إلى ظهور هذا الخطأ، ومن أبرزها:

1. إعداد Webpack: يجب أن تكون تهيئة Webpack صحيحة لكل من التطبيقات المضيفة والبعيدة. إذا كانت هناك اختلافات في إعدادات ModuleFederationPlugin، فقد ينتج عن ذلك مشاكل في تحميل المكونات.

2. أنماط التحميل: تأكد من أنك تستخدم نمط التحميل الصحيح للمكتبات المعنية، وأن الملفات ما زالت متوافقة مع الصيغ الحديثة التي تحتوي على export.

3. التوافق بين النسخ: تأكد من أن جميع الوحدات التي تستخدمها في تطبيقك متوافقة مع الإصدارات المستخدمة في Angular 15. يجب أن تكون جميع الحزم المشتركة محملة بشكل صحيح.

كيفية إصلاح الخطأ

لإصلاح مشكلة "Unexpected token export" في تطبيق Angular 15 باستخدام تقنية اتحاد الوحدة النمطية، يمكنك اتباع الخطوات التالية:

1. مراجعة إعدادات Webpack:

   • تحقق من إعدادات ModuleFederationPlugin في كل من التطبيق المضيف والبعيد. يجب على library أن تكون من النوع "module" ويجب عليك تأكيد publicPath و filename في كل وحدة.

2. تحقق من إعدادات tsconfig.json:

   • تأكد من أن إعدادات module في ملف tsconfig.json تدعم ESNext أو ES6، مما يتيح استخدام الصيغة الحديثة في JavaScript.
3. مراقبة تبعيات الحزمة:
   • تأكد من أن جميع الحزم المشتركة محدثة وتستخدم النسخ المدعومة، خاصة مكتبات Angular الأساسية مثل @angular/core و @angular/common.

مثال على إعداد Webpack

إليك مثالاً على كيفية إعداد Webpack لواجهة المستخدم الخاصة بك:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
module.exports = {
  output: {
    uniqueName: "v17",
    publicPath: "auto",
    scriptType: "text/javascript",
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      library: { type: "module" },
      name: "v17",
      filename: "remoteEntry.js",
      exposes: {
        "./SupersetModule": "src/app/superset/superset.module.ts",
      },
      shared: {
        "@angular/core": { singleton: true, strictVersion: true, requiredVersion: "auto" },
        "@angular/common": { singleton: true, strictVersion: true, requiredVersion: "auto" },
        "@angular/router": { singleton: true, strictVersion: true, requiredVersion: "auto" },
      },
    }),
    sharedMappings.getPlugin(),
  ],
};

خاتمة

تكنولوجيا اتحاد الوحدة النمطية (Module Federation) تعزز من إمكانية تطوير التطبيقات الكبيرة وتسهل من عملية توزيعها. على الرغم من الاستفادة الكبيرة من هذه التقنية، إلا أن الأخطاء مثل "Unexpected token export" قد تظه وتعطل العمل. من خلال مراجعة الإعدادات والتأكد من توافق النسخ بين الوحدات، يمكنك تخطي هذه المشكلات والاستمتاع بتجربة تطوير أكثر سلاسة. فكر دائماً في تحديث بيئة العمل الخاصة بك وتجربة الإعدادات المقترحة لحل تلك المشاكل.

في النهاية، تذكر أن تكنولوجيا تطوير الويب دائمًا في حركة مستمرة، مما يعني أن البقاء على اطلاع بأحدث الاتجاهات والتقنيات سيكون له تأثير كبير على نجاح مشاريعك المستقبلية.