حل مشکل عدم شناسایی ماژول در React.js

اگر در زمان بیلد کردن پروژه React با خطای زیر مواجه شدید:

      Module not found: Can't resolve './path/to/module' in '/x'

    

خطا ممکن است ناشی از اشتباه در مسیر فایل‌ها باشد. در React، هنگام استفاده از import، معمولاً مسیرهای نسبی استفاده می‌شود. فرض کنید که می خواهیم ماژول header.js که در src/components است، را در App.js که در دایرکتوری src/ قرار دارد ایمپورت کنیم. برای import این کامپوننت باید از دستور زیر استفاده کنید:

      import Header from './components/header'

    

این به این معنی است که از دایرکتوری فعلی، به دنبال فولدر components بروید که شامل فایل header است.

همچنین اطمینان حاصل کنید که از اسم صحیح ماژول‌ها استفاده می‌کنید و در نظر داشته باشید که نام فایل‌ها در سیستم‌های فایل حساس به حروف بزرگ و کوچک است.

گاهی اوقات این خطا ممکن است به دلیل نیاوردن پسوند فایل در زمان ایمپورت اتفاق بیفتد. به همین دلیل می توانید با تغییر تنظیمات webpack، پسوند فایل مورد نظرتان را به تنظیمات آن اضافه کنید:

       module.exports = {
  resolve: {
    extensions: ['.js', '.jsx']
  }
};