Reagieren Sie eine App, die keine .env-Dateien aufnimmt?

Ich verwende die Create React App, um meine App zu booten.

Ich habe zwei .envDateien hinzugefügt .env.developmentund .env.productionim Stammverzeichnis.

Meine .env.developmentbeinhaltet:

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

Wenn ich meine App mit react-scripts startund tröste, process.envspuckt sie aus

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

Ich habe verschiedene Dinge ausprobiert, aber es werden einfach nicht die Überprüfungen in meiner Entwicklungsdatei erfasst. Was mache ich falsch?!

Die Struktur der Direktiven lautet:

/.env.development
/src/index.js

Das Skript Package.json lautet:

"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",

Bearbeiten:

@jamcreencia richtig darauf hingewiesen , meine Variablen sollte vorangestellt werden , mit REACT_APP.

Bearbeiten 2

Es funktioniert in Ordnung, wenn ich die Datei benenne, .envaber nicht, wenn ich .env.developmentoder benutze.end.production

Mit create-react-appmüssen Sie REACT_APP_dem Variablennamen ein Präfix voranstellen , um darauf zugreifen zu können.

Beispiel:

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

Weitere Informationen finden Sie hier

Stellen Sie sicher, dass sich Ihre .env-Datei im Stammverzeichnis befindet und nicht im Ordner src.

Hatte das gleiche Problem! Die Lösung bestand darin, die Verbindung zu meinem Knotenserver zu schließen (dies ist mit STRG + C möglich). Starten Sie dann Ihren Server mit 'npm run start' neu und .env sollte ordnungsgemäß funktionieren.

Quelle: Github

Wenn Sie mehrere Umgebungen wie verwenden möchten .env.development .env.production

Verwenden Sie das Paket dotenv-cli

Hinzufügen .env.developmentund .env.productionim Projektstammordner

und dein 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"   
},

dann entsprechend der Umgebung wie bauen

npm run-script build-dev 

In Bezug auf env-cmd . Gemäß VMois 'freundlichem Beitrag auf gitHub wurde env- cmd aktualisiert (Version 9.0.1 zum Zeitpunkt des Schreibens). Umgebungsvariablen funktionieren in Ihrem React- Projekt wie folgt :

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

In Ihrer package.json- Datei.

Zu diesem Zweck gibt es ein env-cmd- Modul. Installieren Sie über npm npm i env-cmddann in Ihrer package.jsonDatei im scriptsAbschnitt:

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

In Ihrem Projektstamm müssen Sie zwei Dateien mit denselben env-Variablen, aber unterschiedlichen Werten erstellen:

.env.development
.env.production

Dann schließen Sie sie von der Öffentlichkeit aus. Fügen Sie dazu in Ihrer .gitignoreDatei zwei Zeilen hinzu:

.env.development
.env.production

Dies ist also ein geeigneter Weg, um verschiedene env-Variablen für dev und prod zu verwenden.

Ich hatte das gleiche Problem, aber es lag daran, dass ich meine .env- Datei im YAML-Format anstelle von JS hatte.

Es war

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

aber es musste sein

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

Wenn die .envDatei funktioniert , aber .env.developmentoder .env.productionnicht, dann eine leere erstellen .envDatei neben diesen beiden. Ich weiß nicht warum, aber das funktioniert bei mir.

Und denken Sie daran, nach dem API-Schlüssel in der env-Datei kein Semikolon zu haben.

REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';

sollte sein

REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'

das war mein fehler

Ab den neuesten React-Skripten (3.2.0) ist es einfach zu sagen

PORT=4000
BROWSER=none

in Ihrer .env- oder .env.development-Datei (..etc), die sich im Stammordner befinden soll.

Es funktioniert NICHT mit dem Präfix REACT_APP (die Dokumente sind vermutlich veraltet) und es sind KEINE zusätzlichen npm-Pakete erforderlich (React-Skripte enthalten bereits dotenv 6.2.0).