fix: inline ENV variables when building excalidraw package (#4311)

package.json

@@ -62,6 +62,7 @@
     "@types/pako": "1.0.2",
     "@types/resize-observer-browser": "0.1.6",
     "chai": "4.3.4",
+    "dotenv": "10.0.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "3.3.1",
     "firebase-tools": "9.23.0",

src/packages/excalidraw/env.js

@@ -0,0 +1,14 @@
+const dotenv = require("dotenv");
+const { readFileSync } = require("fs");
+
+const parseEnvVariables = (filepath) => {
+  return Object.entries(dotenv.parse(readFileSync(filepath))).reduce(
+    (env, [key, value]) => {
+      env[key] = JSON.stringify(value);
+      return env;
+    },
+    {},
+  );
+};
+
+module.exports = { parseEnvVariables };

src/packages/excalidraw/package.json

@@ -75,5 +75,8 @@
     "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack"
+  },
+  "dependencies": {
+    "dotenv": "10.0.0"
   }
 }

src/packages/excalidraw/webpack.dev.config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const webpack = require("webpack");
 const autoprefixer = require("autoprefixer");
+const { parseEnvVariables } = require("./env");
 
 module.exports = {
   mode: "development",
@@ -76,7 +77,14 @@ module.exports = {
       },
     },
   },
-  plugins: [new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ })],
+  plugins: [
+    new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ }),
+    new webpack.DefinePlugin({
+      "process.env": parseEnvVariables(
+        path.resolve(__dirname, "../../../.env.development"),
+      ),
+    }),
+  ],
   externals: {
     react: {
       root: "React",

src/packages/excalidraw/webpack.prod.config.js

@@ -3,6 +3,8 @@ const TerserPlugin = require("terser-webpack-plugin");
 const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const autoprefixer = require("autoprefixer");
+const webpack = require("webpack");
+const { parseEnvVariables } = require("./env");
 
 module.exports = {
   mode: "production",
@@ -104,6 +106,11 @@ module.exports = {
   },
   plugins: [
     ...(process.env.ANALYZER === "true" ? [new BundleAnalyzerPlugin()] : []),
+    new webpack.DefinePlugin({
+      "process.env": parseEnvVariables(
+        path.resolve(__dirname, "../../../.env.production"),
+      ),
+    }),
   ],
   externals: {
     react: {

src/packages/excalidraw/yarn.lock

@@ -1688,6 +1688,11 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
+dotenv@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
 duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"

src/setupTests.ts

@@ -1,6 +1,13 @@
 import "@testing-library/jest-dom";
 import "jest-canvas-mock";
 
+import dotenv from "dotenv";
+
+// jest doesn't know of .env.development so we need to init it ourselves
+dotenv.config({
+  path: require("path").resolve(__dirname, "../.env.development"),
+});
+
 jest.mock("nanoid", () => {
   return {
     nanoid: jest.fn(() => "test-id"),

yarn.lock

@@ -5537,6 +5537,11 @@ dotenv-expand@5.1.0:
   resolved "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz"
   integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
+dotenv@10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
+
 dotenv@8.2.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"