Configure webpack for .env

.babelrc

@@ -4,7 +4,6 @@
     "transform-class-properties",
     "transform-object-rest-spread",
     ["transform-runtime", { "polyfill": false, "regenerator": true }],
-    ["emotion"],
-    ["babel-plugin-dotenv", { "replacedModuleName": "babel-dotenv" }]
+    ["emotion"]
   ]
 }

package.json

@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
-    "babel-plugin-dotenv": "^0.1.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "dotenv-webpack": "^1.7.0",
     "global": "^4.3.2",
     "izitoast": "^1.4.0",
     "moment-timezone": "^0.5.23",

src/containers/Subscriptions.js

@@ -9,7 +9,6 @@ import membership from '../helpers/membershipInfo'
 import LoadingOverlay from 'react-loading-overlay'
 import { RingLoader } from 'react-spinners'
 import ErrorBoundary from '../components/ErrorBoundary'
-import { STRIPE_KEY } from 'babel-dotenv'
 import StripeCheckout from 'react-stripe-checkout'
 import createStripeSubscription from '../actions/createStripeSubscription'
 import { bindActionCreators } from 'redux'
@@ -83,7 +82,7 @@ export const Subscriptions = props => {
                     image={logo}
                     amount={stripePrice}
                     currency='GBP'
-                    stripeKey={STRIPE_KEY}
+                    stripeKey={process.env.STRIPE_KEY}
                     token={onToken}
                   />
                 </Segment>

webpack.config.js

@@ -1,12 +1,12 @@
 const path = require('path')
+const Dotenv = require('dotenv-webpack')
 const HtmlWebPackPlugin = require('html-webpack-plugin')
 require('mini-css-extract-plugin')
 
 const htmlPlugin = new HtmlWebPackPlugin({
   template: './src/index.html',
   filename: './index.html'
 })
-
 module.exports = {
   devServer: { historyApiFallback: true },
   output: { publicPath: '/' },
@@ -27,5 +27,5 @@ module.exports = {
       }
     ]
   },
-  plugins: [htmlPlugin]
+  plugins: [htmlPlugin, new Dotenv()]
 }

yarn.lock

@@ -1789,13 +1789,6 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-dotenv@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dotenv/-/babel-plugin-dotenv-0.1.1.tgz#9c8faea67a7c034fe7e94099187ab2e7573400bc"
-  integrity sha1-nI+upnp8A0/n6UCZGHqy51c0ALw=
-  dependencies:
-    dotenv "^2.0.0"
-
 babel-plugin-emotion@^10.0.6:
   version "10.0.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.6.tgz#fd9bb4a5dc6cf2289b656215dbbc80469fd251b3"
@@ -4073,10 +4066,24 @@ domutils@^1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
-dotenv@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-2.0.0.tgz#bd759c357aaa70365e01c96b7b0bec08a6e0d949"
-  integrity sha1-vXWcNXqqcDZeAclrewvsCKbg2Uk=
+dotenv-defaults@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.0.2.tgz#441cf5f067653fca4bbdce9dd3b803f6f84c585d"
+  integrity sha512-iXFvHtXl/hZPiFj++1hBg4lbKwGM+t/GlvELDnRtOFdjXyWP7mubkVr+eZGWG62kdsbulXAef6v/j6kiWc/xGA==
+  dependencies:
+    dotenv "^6.2.0"
+
+dotenv-webpack@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
+  integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==
+  dependencies:
+    dotenv-defaults "^1.0.2"
+
+dotenv@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
 duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
   version "0.1.4"