سلام.
هنگام استفاده از vite(version 5.1) در صورت استفاده از سینتکس jsx درون فایلهای با فرمت js، با خطا مواجه میشم.
یک راهکار اینه که فرمت فایل js رو به jsx تغییر بدم. اما این راهکار صحیح نیست چراکه همین مشکل در فایلهای ts هم وجود داره(زمانی که از سینتکس tsx درونشون استفاده شده باشه). همچنین همین ایرادی که vite میگیره میتونه در انبوه فایلهای درون پوشه node_modules رخ بده.
توی اینترنت راهکارهای زیادی وجود داره که مبنی بر تغییر فایل vite.config.js هستش. گاهی اوقات میتونم برای مدتی از شر این خطاهای متفاوت راحت بشم. اما به نوعی دوباره باهاشون برمیخورم. هر چقدر این فایل رو با کدهای پیشنهادی موجود در اینترنت جایگزین میکنم باز با مشکل دیگه ای در همین مورد مواجه میشم.
کد فایل vite.config.js به صورت پیشفرض اینطور نیست و من تغییرش دادم. در اینجا یکی از کدهای پیشنهادی اینترنت رو استفاده کردم.
مخصوص اعضای ویژه 
import { defineConfig, transformWithEsbuild } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
{
name: 'treat-js-files-as-jsx',
async transform(code, id) {
if (!id.match(/src\/.*\.js$/)) return null
// Use the exposed transform from vite, instead of directly
// transforming with esbuild
return transformWithEsbuild(code, id, {
loader: 'jsx',
jsx: 'automatic',
})
},
},
react(),
],
optimizeDeps: {
force: true,
esbuildOptions: {
loader: {
'.js': 'jsx',
},
},
},
})نمونه خطاها: در تصویر دو خطا رو مشاهده میکنید. دومی ظاهرا vite به یکی از فایلهای درون node_modules گیر داده
ممنون می شم اگر راهنمایی کنید.
سلام دوستان
در مورد مشکل(خطای) اول، vite تمایل داره که فایلهای jsx و js جدا از هم باشن و هر کدام کار خودشو انجام بدن، چرا که سردرگمی در یک پایگاه کد بزرگو کاهش میده. با این حال میشه با تغییر پیکربندی vite اونو مجبور کرد که از سینتکس jsx درون فایلهای js ایراد نگیره. نکته جالب اینه که تازگی پیکربندی vite رو به حالت اولیه برگردوندم و از من در این خصوص ایرادی نمیگیره. در حالی که قبلا ایراد میگرفت. چرا اینطور رفتاری میکنه؟! نمیدونم.
این پیکربندی vite.config.js هست.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})مورد یا خطای دوم در خصوص فراخوانی مجدد یکی از پکیجهای vite به صورت سهوی بود. درون این پکیج یک متغیر سراسری وجود داشت که با فراخوانی دوباره اون، سعی در تعریف مجددش داشت که منجربه خطا شده بود. این که تعریف مجدد متغیر باعث خطا شده بود در متن error قابل تشخیصه ولی این که از کدام فایل ناشی شده مشخص نبود. در خطا تنها به مسیر درون node_modules اشاره شده بود که همین ماجرارو پیچیده میکرد. پیشنهادات استک اورفلو در خصوص let, const, var بود و ربطی به فایلی که منبع خطا بود نداشت.
تنها زمانی منبع خطا پیدا شد که قسمتهای مختلف کد comment و بخش به بخش فعال شد. درون یکی از کامپننتها سعی در کانفیگ مجدد vite شده بود. همین باعث این خطا بود. این که این کد درون یک فایل چه کار میکرد؟! سوال خوبیه
