使用 create react app --template typescript 时 .env 未定义的问题?
Issue with .env being undefinde when using create react app --template typescript?
我在使用 npx create-react-app my-app --template 打字稿在 React 应用程序中定义 env 文件时遇到问题,以下是有关 env 文件结构不应该如何工作的所有必要信息开箱即用?或者这是一些新问题? ,基本上我在创建应用程序后没有任何想法只是将控制台日志放在应用程序 js 中所以我可以看到行为。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
console.log(process.env);
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
Learn React
</a>
</header>
</div>
);
}
export default App;
// .env file
REACT_APP_PAYPAL_CLIENT_ID : AWLe2ytIee-lQTYPM_1v1fSnXxiJj-xDgr0xngrbX2vIDNA0zPw_028LsGlLBStEeHhTFzsnLjvqIPij
// Package
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^16.11.21",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
来自Adding Development Environment Variables In .env,
格式应为 key=value
,而不是 key: value
。将 :
替换为 =
.env
:
REACT_APP_PAYPAL_CLIENT_ID=AWLe2ytIee-lQTYPM_1v1fSnXxiJj-xDgr0xngrbX2vIDNA0zPw_028LsGlLBStEeHhTFzsnLjvqIPij
我在使用 npx create-react-app my-app --template 打字稿在 React 应用程序中定义 env 文件时遇到问题,以下是有关 env 文件结构不应该如何工作的所有必要信息开箱即用?或者这是一些新问题? ,基本上我在创建应用程序后没有任何想法只是将控制台日志放在应用程序 js 中所以我可以看到行为。
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
console.log(process.env);
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
Learn React
</a>
</header>
</div>
);
}
export default App;
// .env file
REACT_APP_PAYPAL_CLIENT_ID : AWLe2ytIee-lQTYPM_1v1fSnXxiJj-xDgr0xngrbX2vIDNA0zPw_028LsGlLBStEeHhTFzsnLjvqIPij
// Package
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^16.11.21",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
来自Adding Development Environment Variables In .env,
格式应为 key=value
,而不是 key: value
。将 :
替换为 =
.env
:
REACT_APP_PAYPAL_CLIENT_ID=AWLe2ytIee-lQTYPM_1v1fSnXxiJj-xDgr0xngrbX2vIDNA0zPw_028LsGlLBStEeHhTFzsnLjvqIPij