尝试在create-react-app中使用dotenv时,“未捕获的ReferenceError:进程未定义”
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了尝试在create-react-app中使用dotenv时,“未捕获的ReferenceError:进程未定义”相关的知识,希望对你有一定的参考价值。
在存储库https://github.com/khpeek/trailmaps中,我有一个使用react-google-maps
创建的Google Map的示例,其中googleMapUrl
prop包含我的Google Maps API密钥。根据12因素原则,我想将此API密钥移动到.env
文件中并将其插入到URL中。
我正在尝试遵循dotenv
模块(与create-react-app
一起提供)的说明,并尝试了以下方法:
import React, { Component } from 'react';
import './App.css';
import MapWithGroundOverlay from './components/groundOverlay';
require('dotenv').config()
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Custom Overlay</h1>
<h1 className="App-title">{`The API key is ${process.env.GOOGLE_MAPS_API_KEY}`}</h1>
</header>
<MapWithGroundOverlay
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyBimnrhiugaGSNN8WnsjpzMNJcrH_T60GI&v=3.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
}
export default App;
在根目录中,我创建了一个.env
文件,我在其中定义了GOOGLE_MAPS_API_KEY
。但是,如果我npm start
应用程序并去localhost:3000
,我得到process
未定义:
根据Uncaught ReferenceError: process is not defined,Node.js代码必须由Node进程运行,而不是浏览器;据推测,这就是我做错了。但是,我发现这个答案有点高级,可以立即应用于此。很明显,dotenv
应该可以与create-react-app
一起使用,或者它不会与它捆绑在一起,但是我应该在这个例子中使用它吗?
Dotenv不适用于浏览器运行时。我建议添加库文档中概述的自定义环境变量。
https://github.com/khpeek/trailmaps#adding-custom-environment-variables
使用REACT_APP_
对变量进行前缀应该可以正常工作。
以上是关于尝试在create-react-app中使用dotenv时,“未捕获的ReferenceError:进程未定义”的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Windows 7 中使用 create-react-app
在 create-react-app + typescript 中导入静态 JSON
谷歌没有在使用 create-react-app 的反应应用程序中定义
尝试使用 create-react-app 开玩笑地运行打字稿