undefined ترجمتها «غير معرّف»، ولما تطلع مكان قيمة مثل import.meta.env.VITE_API_URL، معناها: الكود يقرأ إعداد من متغيرات البيئة (Environment Variables)، والإعداد هذا ما وصل للنسخة المنشورة من منتجك.
الترجمة كلمة بكلمة
| الرسالة | الترجمة | إيش تعني |
|---|---|---|
undefined | غير معرّف | المتغير ما له قيمة في هذي النسخة |
import.meta.env.VITE_... | متغيرات البيئة في Vite | طريقة قراءة الإعدادات في أغلب مشاريع Lovable و Bolt |
process.env.NEXT_PUBLIC_... | متغيرات البيئة في Next.js | طريقتها في أغلب مشاريع v0 |
ReferenceError: process is not defined | process غير معرّف | كود مكتوب لـ Next.js أو Node يشتغل في مشروع Vite |
Environment Variables | متغيرات البيئة | إعدادات تعطيها للمنتج من برّا الكود: روابط ومفاتيح |
وين تشوفها، وليش ما تطلع بالعربي
تشوف undefined في Console (اضغط F12)، أو داخل رابط في تبويب Network، مثل undefined/api/orders. وهذي رسائل JavaScript، فتطلع بالإنجليزي حتى لو لغة Chrome عربي.
مشكلتك ولا مشكلة الموقع؟
- إذا أنت زائر: المشكلة في نسخة الموقع المنشورة، مو في جهازك. ما فيه شي تسويه من عندك.
- إذا الموقع موقعك: المشكلة في إعدادات النشر، مو في جهاز أحد. أشهر الأسباب: اسم المتغير ما يبدأ بالبادئة الصح (VITE_ أو NEXT_PUBLIC_)، أو أضفته في الاستضافة وما أعدت النشر، أو مفعّل لبيئة Preview فقط.
وانتبه: قيم الواجهة تنكتب داخل ملفات الموقع وقت البناء، وأي زائر يقدر يشوفها. فالحل عمره ما يكون إنك تحط مفتاح سري ببادئة عامة.
إيش تكتب لـ Lovable أو Bolt أو Cursor
أسهل اقتراح من الأدوات لما مفتاح سري يطلع undefined: «غيّر اسمه إلى VITE_OPENAI_KEY». المشكلة تنحل، والمفتاح صار مكشوف لكل زائر. انسخ هذا:
After deploying, <variable name> is undefined in the browser (it works locally).
The app uses <Vite / Next.js>, hosted on <Vercel / Netlify / other>.
List every environment variable the code reads, and for each one say whether it is
read in the browser or on the server.
Do not move any secret key (OpenAI, payment secret, Supabase service_role)
to a public VITE_ or NEXT_PUBLIC_ variable. Keep secrets on the server.الحل خطوة بخطوة
الأسباب الستة، وكيف تتأكد إن القيمة وصلت فعلًا، والفخ الأمني بالتفصيل، في درس import.meta.env فاضي بعد النشر؟ ليش تطلع undefined. وإذا مفتاح انكشف فعلًا، ابدأ من مفتاح OpenAI انكشف؟ كيف تعرف وتحمي فاتورتك.
وإذا عندك مفاتيح كثيرة ومو متأكد أي واحد مكشوف، حل مشاكل تطبيقك ينقل الأسرار للسيرفر ويرتّب الإعدادات لكل بيئة.