javascript - Ohanterat ReferenceError: process är inte definierad

Jag använder node.js för att skapa en webbapplikation. När jag kör applikationen (antingen genom att öppna index.html i webbläsaren eller använda kommandot "npm start" i terminalen) får jag två fel:

Okontrollerat ReferenceError: process är inte definierad

Okontrollerat ReferenceError: require är inte definierad

Jag löste felet "require is not defined" genom att specifikt inkludera i min index.html-head-tagg länken till detta skript, där require-funktionen är definierad. Däremot kan jag inte hitta något liknande för process-funktionen.

Min fråga är tvådelad:

  1. Varför behöver inbyggda Node.js-moduler definieras om? Varför känns de inte igen som de är, det vill säga "inbyggda moduler"? Betyder inte termen "inbyggd modul" att en modul inte behöver definieras om externt/återigen?

  2. Finns det ett sätt att lösa detta problem? Mitt skript är väldigt enkelt, jag försöker bara använda en grundläggande funktion i node.js, så jag kan inte lista ut vilka fel jag kan ha gjort.

Om någon har stött på detta problem och har hittat en lösning på det eller en anledning till att detta händer, skulle ni vara till stor hjälp.

Svar #1

Nedanstående lösning för Uncaught ReferenceError: process is not defined:

  1. om du använder CRA (create react app), använd process.env.
  2. om du använder ViteJS, använd import.meta.env.

Läs mer här om hur man importerar env-processen i Vite: https://vitejs.dev/guide/env-and-mode.html

Exempel:

CRA: process.env.API_BASE_URL

Vite: import.meta.env.VITE_API_BASE_URL

Svar #2

Webpack kan injicera miljövariabler i "klientsidan" .js-kod (mycket användbart i fall av SPA/PWA). Du bör definiera dem som plugins i webpack.config.js

webpack.config.js

module.exports = {
plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.MY_ENV': JSON.stringify(process.env.MY_ENV),
      ... and so on ...
    })
],
}

Nu kan du få åtkomst till det på klientsidan:

app.js

// Something like that
if(process.env.NODE_ENV === 'debug'){
    setDebugLevel(1)
}

Svar #3

Node.js-kod måste köras av node-processen, inte webbläsaren (koden måste köras på servern).

För att köra koden måste du köra kommandot:

node server.js

Och sedan kan du komma åt din server från en webbläsare genom att skriva "http://localhost:8080", till exempel. Du måste ha en fil server.js (eller vad som helst) med den serverkod du vill ha (i detta fall skapa en webbserver på port 8080).

Du kan följa detta enkla exempel, med express som http-servermodul: http://expressjs.com/starter/hello-world.html

Svar #4

Om du står inför detta problem och använder webpack kan du få den önskade process-datan injicerad i klientpaketet genom att använda DefinePlugin i din webpack.config.js.

I exemplet nedan visar jag hur man lägger till flera saker i process.env-objektet för att göra dem tillgängliga i webbläsaren:

  1. alla miljövariabler i .env med hjälp av biblioteket dotenv
  2. värdet av NODE_ENV, vilket är antingen 'development' eller 'production'

Arbetande exempel

.env

API_KEY=taco-tues-123
API_SECRET=secret_tacos

// webpack.config.js

const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const isDevelopment = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenv.parsed),
      'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'),
    }),
  ].filter(Boolean),
}

// Within client side bundle (React)
// src/App.jsx

console.log(process.env)          // {API_KEY: "taco-tues-123", API_SECRET: "secret_tacos"}
console.log(process.env.NODE_ENV) // development

Observera att console.log(process.env) endast har värdena från .env-filen, och att NODE_ENV inte är en del av process.env-objektet.

I exemplet nedan visar jag hur jag försökte injicera process.env-objektet vilket ledde mig till detta stack overflow. Jag inkluderar också en markering från webpack-dokumentationen om varför koden nedan inte fungerade.

Trasigt exempel

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        ...dotenv.parsed,
        'NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production')
      }
    }),
  ].filter(Boolean),
}

// Within client side bundle (React)
// src/App.jsx

console.log(process.env)          // Uncaught ReferenceError: taco is not defined
console.log(process.env.NODE_ENV) // development

Från webpack DefinePlugin-dokumentationen:

Varning När du definierar värden för processen, föredra

'process.env.NODE_ENV': JSON.stringify('production')

över

process: { env: { NODE_ENV: JSON.stringify('production') } }

Att använda det senare kommer att skriva över processobjektet, vilket kan bryta kompatibiliteten med vissa moduler som förväntar sig att andra värden på processobjektet är definierade.

!Varning!

Att injicera dotenv.parsed i klientpaketet som beskrivs kommer att exponera dessa hemligheter för klienten. För utvecklingsändamål är det inte ett stort problem, men i en distribuerad produktionsmiljö kommer alla lösenord eller privata API-nycklar att vara synliga för vem som helst som letar efter dem.

Relaterade artiklar