رفع خطای vite برای reactjs – global تعریف نشده و فرآیند تعریف نشده است

Summarize this content to 400 words in Persian Lang
در سناریویی که در حال اجرای یک برنامه vite با الگوی reactjs برای یک پروژه هستید و سعی می‌کنید متغیر محیطی را از آن واکشی کنید. .env فایل همانطور که روش محبوب برای واکشی متغیرهای محیطی از .env استفاده از آن است process.env.SOMETHING برای متغیر به صورت:

SOMETHING=SECRETSAUCE

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مرحله vite.config.ts به نظر می رسد:

import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اما واکشی متغیر بلافاصله در vite کار نمی کند و راه های زیادی برای حل این مشکل وجود دارد. من اکثر آنها را امتحان کردم و احساس کردم به راه ساده و مستقیم ادامه می دهم.

احتمالا با تعریف بالا و منطق واکشی پیش فرض با process.env.*، شما باید خطا داشته باشید Uncaught ReferenceError: global is not defined.

من منابع زیادی را در stackoverflow پیدا می کنم و گیج می شوم.

راه حل رفع خطا این است که در پیکربندی به صورت زیر global را تعریف کنید.

import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
define: {
global: {},
},
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، این احتمالاً منجر به یک خطای رایج دیگر می شود Uncaught ReferenceError: process is not defined.

باز هم، راه حل های زیادی در وب وجود دارد و برخی دیگر قدیمی هستند. به نظر من مرتبط‌ترین و آسان‌ترین کار، واردات است loadEnv از کتابخانه vite و منطق سفارشی را مانند زیر بسازید.

import { defineConfig, loadEnv } from ‘vite’
import react from ‘@vitejs/plugin-react’

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), ”);
return {
define: {
global: {},
‘process.env’: env
},
plugins: [react()],
}
})

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و جادو بلافاصله اتفاق می افتد!!

همچنین لازم به ذکر است که ما نیازی به استفاده از آن نداریم dotenv وابستگی به عنوان متغیر محیطی واکشی در کد با process.env.* بدون آن به خوبی کار می کند

کد نویسی مبارک!

SOMETHING=SECRETSAUCE

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
  },
})

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  return {
    define: {
      global: {},
      'process.env': env
    },
    plugins: [react()],
  }
})