สร้างแอป react ไม่รับไฟล์. env?

117

ฉันใช้แอปสร้างปฏิกิริยาเพื่อบูตแอปของฉัน

ฉันได้เพิ่มสอง.envไฟล์.env.developmentและ.env.productionในรูท

ของฉัน.env.developmentรวมถึง:

API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback

เมื่อฉันเรียกใช้แอปของฉันโดยใช้react-scripts startและคอนโซลprocess.envมันจะพ่นออก

{ NODE_ENV: "development", PUBLIC_URL: "" }

ฉันได้ลองสิ่งต่างๆแล้ว แต่มันไม่ได้รับข้อมูลที่สามารถตรวจสอบได้ในไฟล์การพัฒนาของฉันฉันทำอะไรผิด?!

โครงสร้าง Directry คือ:

/.env.development
/src/index.js

สคริปต์ Package.json คือ:

"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
    "client:start": "export PORT=3005; react-scripts start",
    "server:start": "node server.js",
    "build": "react-scripts build",

แก้ไข:

@jamcreencia ชี้ให้เห็นอย่างถูกต้องว่าตัวแปรของฉันควรขึ้นต้นด้วยREACT_APP.

แก้ไข 2

ใช้งานได้ดีถ้าฉันตั้งชื่อไฟล์.envแต่ไม่ใช่ถ้าฉันใช้.env.developmentหรือ.end.production

reactjs create-react-app

— Shenku
แหล่งที่มา

คุณสามารถโพสต์package.jsonไฟล์ของคุณได้หรือไม่?

— Steve Chamaillard

2

process.envเป็นสิ่งที่ back-end (Node หรืออะไรก็ตามที่คุณใช้) สามารถอ่านได้ ฟรอนต์เอนด์บันเดิลไม่รู้ว่าprocess.envมันคืออะไรในเบราว์เซอร์ คุณสามารถกำหนดค่า webpack ให้ส่งผ่านในบันเดิลเมื่อรวมกลุ่มหรือง่ายกว่านั้นคุณสามารถส่งผ่านจากแบ็คเอนด์ในไฟล์ดัชนีที่คุณกำลังแสดงผลเป็นตัวแปรส่วนกลาง

— Raul Rene

อาจไม่ใช่กรณีนี้ แต่ฉันพบปัญหานี้สองสามครั้งและปัญหาที่ฉันพบคือเมื่อคอมพิวเตอร์ของฉันใช้หน่วยความจำมากฉันไม่ได้โหลดตัวแปร. env ของฉัน ฉันใช้ ubuntu 16.4 ลองโหลดตัวแปรจากเทอร์มินัลreact-scripts start API_URL=http://localhost:3000/api CALLBACK_URL=http://localhost:3005/callbackหากคุณยังไม่เห็นฉันจะรีสตาร์ทระบบเพื่อลดการใช้หน่วยความจำและลองอีกครั้งโดยปกติสิ่งนี้จะช่วยแก้ปัญหาให้ฉันได้

— Femi Oni

@RaulRene create-react-app จัดการ. env นอกกรอบเพื่อให้คุณไม่จำเป็นต้องกำหนดค่าเพิ่มเติม

— Femi Oni

245

ด้วยcreate-react-appคุณต้องนำหน้าREACT_APP_ชื่อตัวแปรเพื่อให้สามารถเข้าถึงได้

ตัวอย่าง:

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback

ดูข้อมูลเพิ่มเติมที่นี่

— jamcreencia
แหล่งที่มา

9

นี่เป็นสิ่งสำคัญ ฉันพลาดไป แต่ใช่มันใช้ไม่ได้กับคำนำหน้า

— Femi Oni

8

ใช้งานได้เมื่อฉันใช้.envแต่ไม่ใช่สำหรับ.env.developmentหรือ.env.production?

— shenku

@shenku คุณจัดการเพื่อค้นหาว่าทำไมมันถึงใช้ได้เฉพาะกับ.envและไม่ใช่กับ.env.developmentและenv.production

— Constantin Chirila

สำหรับ Devs ที่ทำงาน front-end เนื่องจากคุณไม่มี NodeJs ในเบราว์เซอร์คุณจะต้องใช้ webpack ... meh

— Stephane

2

ขอขอบคุณ. ฉันหาคำตอบมาหลายชั่วโมงแล้ว

— Fahmid

62

ตรวจสอบว่าไฟล์. env ของคุณอยู่ในไดเร็กทอรีรากไม่ใช่ในโฟลเดอร์ src

— Ryan Dhungel
แหล่งที่มา

1

แม้ว่าในขณะที่อ่านเอกสารฉันเห็นว่าควรอยู่ในไดเรกทอรีราก แต่ฉันก็ยังสามารถเพิ่มไฟล์. env ในโฟลเดอร์ src ... (facepalm) ได้ขอบคุณสำหรับคำตอบของคุณ

— Corné

ฉันมีปัญหาเดียวกันมันใช้งานไม่ได้เมื่ออยู่ในโฟลเดอร์ src แต่ใช้งานได้หลังจากย้ายไปที่โฟลเดอร์รูทในเวอร์ชัน 3.4.3

— Vinod Kumar

ใช่นี่คือปัญหาขอบคุณมาก

— Akash Maurya

29

มีปัญหาเดียวกันนี้! วิธีแก้ปัญหาคือปิดการเชื่อมต่อกับเซิร์ฟเวอร์โหนดของฉัน (คุณสามารถทำได้ด้วย CTRL + C) จากนั้นรีสตาร์ทเซิร์ฟเวอร์ของคุณด้วย 'npm run start' และ. env ควรทำงานได้อย่างถูกต้อง

ที่มา: Github

— เจเอสปีเตอร์สัน
แหล่งที่มา

21

หากคุณต้องการใช้หลายสภาพแวดล้อมเช่น .env.development .env.production

ใช้แพ็คเกจ dotenv-cli

เพิ่ม.env.developmentและ .env.productionในโฟลเดอร์รูทของโปรเจ็กต์

และ package.json ของคุณ

"scripts": {
    "start": "react-app-rewired start",
    "build-dev": "dotenv -e .env.development react-app-rewired build",
    "build-prod": "dotenv -e .env.production react-app-rewired build",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"   
},

จากนั้นสร้างตามสภาพแวดล้อมเช่น

npm run-script build-dev

— Maria Jeysingh Anbu
แหล่งที่มา

นี่dotenvหรือdotenv-cli?

— Drazen Bjelovuk

2

มีไฟล์ .env ที่แตกต่างกันสำหรับสภาพแวดล้อมที่แตกต่างกันอยู่ในขณะนี้ยังสนับสนุนออกจากกล่องโดยสร้างปฏิกิริยาแอปสร้างปฏิกิริยาแอปเอกสาร ไม่จำเป็นต้องใช้ dotenv อย่างโจ่งแจ้ง (create-react-app ใช้งานจริงเบื้องหลังเพื่อจัดการตัวแปรสภาพแวดล้อม)

— Marnix.hoh

@MariaJeysinghAnbu ไวยากรณ์นั้นเป็นของdotenv-cliไม่ใช่dotenv: npmjs.com/package/dotenv-cli

— AMS777

@ AMS777 ฉันใช้dotenv npm ไม่ใช่dotenv-cli

— Maria Jeysingh Anbu

@MariaJeysinghAnbu ฉันต้องการใช้dotenvแต่มีข้อผิดพลาด ฉันตรวจสอบเอกสาร แต่ไม่พบ-eตัวเลือกนั้นสำหรับบรรทัดคำสั่ง อย่างไรก็ตามฉันพบมันในdotenv-cliเอกสาร นั่นเป็นเหตุผลที่ฉันพูด ในที่สุดฉันก็ใช้env-cmdงานไม่ต้องมีdotenvและdotenv-cliติดตั้งในเวลาเดียวกันซึ่งอาจทำให้เกิดความสับสน

— AMS777

10

เกี่ยวกับenv-cmd . ตามชนิดของ VMois โพสต์บน GitHub , env-cmdได้รับการปรับปรุง (เวอร์ชั่น 9.0.1 เช่นการเขียน) ตัวแปรสภาพแวดล้อมจะทำงานดังต่อไปนี้คุณตอบสนองโครงการ:

"scripts": {
    "build:local": "env-cmd -f ./.env.production.local npm run build",
    "build:production": "env-cmd -f ./.env.production npm run build"
  }

ในไฟล์package.jsonของคุณ

— ทิม
แหล่งที่มา

1

ขอบคุณมากความคิดเห็นนี้ช่วยฉันได้ เอกสาร create-react-app ไม่ได้อัปเดตสิ่งนี้ดังนั้นฉันจึงพบว่ามีอะไรผิดปกติ

— CKA

1

คุณช่วยฉันไว้ที่นี่โดยสิ้นเชิง ฉันกำลังหมุนอยู่กับสิ่งนี้ ขอบคุณ

— MDiesel

มีคนให้เหรียญผู้ชายคนนี้

— Rittesh PV

7

เพื่อจุดประสงค์นี้มีโมดูลenv-cmd ติดตั้งผ่าน npm npm i env-cmdจากนั้นในpackage.jsonไฟล์ของคุณในscriptsส่วน:

  "scripts": {
    "start": "env-cmd .env.development react-scripts start",
    "build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
  }

ในรูทโปรเจ็กต์ของคุณคุณต้องสร้างไฟล์สองไฟล์ที่มีตัวแปร env เดียวกัน แต่มีค่าต่างกัน:

.env.development
.env.production

จากนั้นแยกออกจากสาธารณะ สำหรับสิ่งนี้ใน.gitignoreไฟล์ของคุณให้เพิ่มสองบรรทัด:

.env.development
.env.production

ดังนั้นนี่เป็นวิธีที่เหมาะสมในการใช้ตัวแปร env ที่แตกต่างกันสำหรับ dev และ prod

— Nastro
แหล่งที่มา

พยายามใช้เส้นทางแบบเต็มเช่น ./node_modules/.bin/env-cmd

— Nastro

แต่ฉันไม่แนะนำแนวทางในคำตอบของฉัน ตอนนี้ฉันรู้แล้วว่า react ทำให้ build in ช่างทำงานกับ. env

— Nastro

6

ฉันประสบปัญหาเดียวกัน แต่เป็นเพราะฉันมีไฟล์. envในรูปแบบ YAML แทนที่จะเป็น JS

มันเป็น

REACT_APP_API_PATH: 'https://my.api.path'

แต่จำเป็นต้องเป็น

REACT_APP_API_PATH = 'https://my.api.path'

— cchapman
แหล่งที่มา

ช่างเป็นจุดที่เรียบง่าย แต่ดี ฉันได้ทำเช่นเดียวกันและมองไม่เห็นไม้สำหรับต้นไม้ ขอบคุณ

— Andy Allison

ขอบคุณสำหรับสิ่งนี้! ฉันค้นหาทั้งวันโดยไม่สังเกตเห็นข้อผิดพลาดเล็กน้อยนี้ :)

— chia yongkang

3

หาก.envไฟล์ใช้งานได้ แต่.env.developmentหรือ.env.productionไม่ทำงานให้สร้าง.envไฟล์เปล่าข้างสองไฟล์นั้น ฉันไม่รู้ว่าทำไม แต่มันเหมาะกับฉัน

— Stjepan Golemac
แหล่งที่มา

0

และอย่าลืมว่าอย่าให้มีเซมิโคลอนหลังคีย์ API ในไฟล์ env

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

ควรจะเป็น

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

นั่นเป็นข้อผิดพลาดของฉัน

— หมาป่าทะเล
แหล่งที่มา

-3

จากสคริปต์ตอบสนองล่าสุด (3.2.0) มันง่ายอย่างที่พูด

PORT=4000
BROWSER=none

ในไฟล์. env หรือ. env.development (..etc) ของคุณซึ่งควรจะอยู่ในโฟลเดอร์รูท

มันจะใช้ไม่ได้กับคำนำหน้า REACT_APP (ฉันเดาว่าเอกสารล้าสมัยแล้ว) และไม่ต้องการแพ็คเกจ npm เพิ่มเติมใด ๆ (สคริปต์ตอบกลับมี dotenv 6.2.0 อยู่แล้ว)

— คริสตอสทาติทซิคิดิส
แหล่งที่มา

4

นี่เป็นเท็จ github.com/facebook/create-react-app/blob/…

— Gudgip