Create React Appで構築をしていない時の環境変数の設定の方法について

Reactで作るアプリケーションで環境変数を使いたい

現在React学習中で、自分で環境を構築してアプリを作っています。

　（Create React Appを使ってアプリを作っていないです）

緯度経度情報を取得するためにGoogleMAPのAPIKeyを使用しています
githubでソースを公開しているため、自身のAPIKeyを環境変数で管理して使用したいと考えています

環境

node 11.15.0
yarn 1.21.1
下記はpackage.jsonの記述

json
1{
2  "dependencies": {
3    "axios": "^0.16.2",
4    "babel-core": "^6.25.0",
5    "babel-loader": "^7.1.1",
6    "babel-preset-es2015": "^6.24.1",
7    "babel-preset-react": "^6.24.1",
8    "css-loader": "^0.28.4",
9    "dotenv": "^8.2.0",
10    "extract-text-webpack-plugin": "^3.0.0",
11    "geolib": "^2.0.22",
12    "import-glob-loader": "^1.1.0",
13    "lodash": "^4.17.4",
14    "node-sass": "^4.5.3",
15    "prop-types": "^15.5.10",
16    "query-string": "^5.0.0",
17    "react": "^15.6.1",
18    "react-dom": "^15.6.1",
19    "react-google-maps": "^7.2.0",
20    "sass-loader": "^6.0.6",
21    "style-loader": "^0.18.2",
22    "webpack": "^3.3.0",
23    "webpack-dev-server": "^2.5.1"
24  }
25}

やったこと

yarn add dotenv でdotenvをインストール
利用したいコンポーネントに import dotenv from 'dotenv'; でインポート
ルートディレクトリー直下に.envファイルを作って、そこにAPIKeyの情報を格納
prosecc.env で.envで定義したAPIを取得する記述をする
値が取れているか確認するためにconsole.logで確認すると
この記事に書いてある内容をそのままやってみました

コンソールに出るエラーメッセージ

bundle.js:33634 Uncaught Error: Cannot find module "fs"

更にやったこと

webpack.config.jsonに「target: 'node'」を追加
こちらの記事を参考

コンソールに出るエラーメッセージ

bundle.js:4734 Uncaught ReferenceError: require is not defined

Create React Appで作ったアプリに環境変数を使いたい場合は接頭辞にREACT_APPをつけると使えるという記事をよく散見するのですが、今回は自分で構築しているため適用できず、同じそうなご経験された方いらっしゃいましたらお知見をお借りしたいです

og24715

2020/01/22 07:19

React は Web ブラウザー JavaScript で動く UI ライブラリなんですが、どうして fs モジュールが見つからないとエラーが出て Webpack のビルドターゲットに node を指定したんですか？記事にそう書いてあったからではなく、ご自分の言葉で理由を説明してください。参考に Webpack の target オプションが何をするものなのかわかる "公式"のドキュメントを置いておきますね。 https://webpack.js.org/configuration/target/#target

yk-port

2020/02/22 04:20

ご返信誠にありがとうございます！ > どうして fs モジュールが見つからないとエラーが出て Webpack のビルドターゲットに node を指定したんですか？記事にそう書いてあったからではなく、ご自分の言葉で理由を説明してください。結論、教材に書いてあった内容をそのまま実施し、「なぜ自分でそのような指定をしたのか」さえ理解していなかったため、上記のような記述・指定の方法をしました。おかげで公式ドキュメントを見て自己解決しました。ありがとうございます！