Merge pull request #1036 from ProvableHQ/fix/amplitude-webpack-config

fix amplitude webpack config

Author: christianwwwwwwww

website/package.json

@@ -42,6 +42,7 @@
         "@vitejs/plugin-react-swc": "^3.7.2",
         "copy-webpack-plugin": "^12.0.2",
         "css-loader": "^7.1.2",
+        "dotenv": "^16.3.1",
         "eslint": "^9.19.0",
         "eslint-plugin-react": "^7.37.4",
         "eslint-plugin-react-hooks": "^5.1.0",

website/src/index.jsx

@@ -8,7 +8,7 @@ import { init } from '@amplitude/analytics-browser';
 import { autocapturePlugin } from '@amplitude/plugin-autocapture-browser';
 
 // Initialize Amplitude with your API key
-const AMPLITUDE_API_KEY = import.meta.env.VITE_AMPLITUDE_API_KEY;
+const AMPLITUDE_API_KEY = process.env.VITE_AMPLITUDE_API_KEY;
 
 if (AMPLITUDE_API_KEY) {
   init(AMPLITUDE_API_KEY, {

website/webpack.config.js

@@ -1,9 +1,17 @@
 import CopyPlugin from "copy-webpack-plugin";
 import TerserPlugin from "terser-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
-
+import webpack from "webpack";
+import dotenv from "dotenv";
 import path from "path";
 
+const env = dotenv.config().parsed || {};
+const envKeys = Object.keys(env).reduce((acc, key) => {
+  acc[`process.env.${key}`] = JSON.stringify(env[key]);
+  return acc;
+}, {});
+
+
 const appConfig = {
     mode: "production",
     entry: {
@@ -52,6 +60,7 @@ const appConfig = {
         new HtmlWebpackPlugin({
             template: "./index.html",
         }),
+        new webpack.DefinePlugin(envKeys),
     ],
     optimization: {
         minimize: true,