رفع خطای "Module not found: react-refresh/runtime.js" در اپلیکیشن ری‌اکت

چگونه مشکل "Module not found: react-refresh/runtime.js falls outside of src/" در اپلیکیشن ری‌اکت حل کنیم؟

سلام! اگر شما هم با خطای "Module not found: react-refresh/runtime.js falls outside of src/" هنگام کامپایل کردن اپلیکیشن ری‌اکت خود مواجه شده‌اید، نگران نباشید! این خطا معمولا به دلیل وجود مسیرهای نادرست در پیکربندی Webpack یا در هنگام استفاده از react-refresh اتفاق می‌افتد. بیایید نگاهی به چگونگی حل کردن این مشکل بیندازیم.

اولین قدم برای حل این مشکل این است که مطمئن شویم همه‌ی وابستگی‌ها به درستی نصب شده‌اند و نسخه‌های منطبق استفاده می‌شوند. به همین دلیل، قبل از هر چیز مطمئن شوید که بسته‌های node_modules به‌روز هستند. این کار را با اجرای دستور npm install انجام دهید.

در مرحله بعد، باید به سراغ فایل پیکربندی Webpack برویم. ممکن است نیاز باشد تا مسیرها و تنظیمات آن را بررسی کنیم. معمولا این خطا به دلیل این است که پیکربندی Webpack در مسیر پیدا کردن فایل‌های JavaScript با مشکلی مواجه شده‌است. اطمینان حاصل کنید که فایل‌های منبع (src) در مسیر صحیحی قرار دارند.

همچنین اگر از ابزارهای دیگری نظیر Babel یا سایر ابزارهای build استفاده می‌کنید، برقراری ارتباط صحیح بین این ابزارها و Webpack اهمیت زیادی دارد تا فایل‌های شما به درستی کامپایل شوند.

پایان حل مشکل می‌تواند استفاده از react-refresh باشد که برای تحقق این هدف باید اطمینان حاصل کنید که این بسته به درستی نصب و در Webpack پیکربندی شده‌باشد. اگر از CRA (create-react-app) استفاده می‌کنید، بررسی کنید که به چگونه‌ای این بسته در فایل پیکربندی CRA جا بررسی شده‌است.

حالا می‌خواهیم نگاهی به یک نمونه عملی از پیکربندی صحیح و رفع این خطا بیندازیم:

{
    "resolve": {
        "alias": {
            "react-refresh/runtime": require.resolve("react-refresh/runtime")
        }
    },
    "module": {
        "rules": [
            {
                "test": /\.js$/,
                "exclude": /node_modules/,
                "use": [
                    {
                        "loader": "babel-loader",
                        "options": {
                            "plugins": [require.resolve("react-refresh/babel")]
                        }
                    }
                ]
            }
        ]
    }
}

-- با استفاده از گزینه resolve، مسیر react-refresh/runtime را به Webpack معرفی می‌کنیم تا بتواند آن را پیدا کند.
-- کدهای JavaScript که در هنگام build باید بررسی شوند، در قسمت "test" مشخص می‌شوند. اینجا تمامی فایل‌های `*.js` مشمول می‌شوند.
-- قسمت "exclude" مشخص می‌کند که هیچکدام از فایل‌های داخل node_modules نباید بررسی شوند.
-- با تخصیص babel-loader به عنوان "loader"، اطمینان حاصل می‌کنیم که فایل‌ها حین build با Babel تبدیل می‌شوند.
-- "plugins": [require.resolve("react-refresh/babel")] جزء مهمی است که پشتیبانی از سریع‌الساپورتیشن فیچرهای React و واسطهای برنامه‌نویسی تازه صورت می‌گیرد.