Issue with .env being undefinde when using create react app --template typescript?

I am having an issue defining env file in react app using the npx create-react-app my-app --template typescript, below are all the needed info on how the structure is shouldn't the env file work right out of the box ? or is this some new issue ? , basically I didn't touch any think after creating the app just put the console log in the app js so I could see the behavour.

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

enter image description here

// 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"
    ]
  }
}

enter image description here

From the Adding Development Environment Variables In .env,

The format should be key=value, NOT key: value. Replace : to =

.env:

REACT_APP_PAYPAL_CLIENT_ID=AWLe2ytIee-lQTYPM_1v1fSnXxiJj-xDgr0xngrbX2vIDNA0zPw_028LsGlLBStEeHhTFzsnLjvqIPij

enter image description here

Issue with .env being undefinde when using create react app --template typescript?

Related

Recent Posts