fix: issues when importing package outside of browser (#9525)

packages/common/package.json

@@ -13,7 +13,7 @@
       "default": "./dist/prod/index.js"
     },
     "./*": {
-      "types": "./../common/dist/types/common/src/*.d.ts"
+      "types": "./dist/types/common/src/*.d.ts"
     }
   },
   "files": [

packages/common/src/constants.ts

@@ -10,6 +10,7 @@ export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);
 export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
 export const isFirefox =
+  typeof window !== "undefined" &&
   "netscape" in window &&
   navigator.userAgent.indexOf("rv:") > 1 &&
   navigator.userAgent.indexOf("Gecko") > 1;
@@ -255,7 +256,7 @@ export const EXPORT_DATA_TYPES = {
   excalidrawClipboardWithAPI: "excalidraw-api/clipboard",
 } as const;
 
-export const EXPORT_SOURCE =
+export const getExportSource = () =>
   window.EXCALIDRAW_EXPORT_SOURCE || window.location.origin;
 
 // time in milliseconds

packages/element/package.json

@@ -13,7 +13,7 @@
       "default": "./dist/prod/index.js"
     },
     "./*": {
-      "types": "./../element/dist/types/element/src/*.d.ts"
+      "types": "./dist/types/element/src/*.d.ts"
     }
   },
   "files": [

packages/element/src/renderElement.ts

@@ -349,12 +349,22 @@ const generateElementCanvas = (
   };
 };
 
-const IMAGE_PLACEHOLDER_IMG = document.createElement("img");
+export const DEFAULT_LINK_SIZE = 14;
+
+const IMAGE_PLACEHOLDER_IMG =
+  typeof document !== "undefined"
+    ? document.createElement("img")
+    : ({ src: "" } as HTMLImageElement); // mock image element outside of browser
+
 IMAGE_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(
   `<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#888" d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>`,
 )}`;
 
-const IMAGE_ERROR_PLACEHOLDER_IMG = document.createElement("img");
+const IMAGE_ERROR_PLACEHOLDER_IMG =
+  typeof document !== "undefined"
+    ? document.createElement("img")
+    : ({ src: "" } as HTMLImageElement); // mock image element outside of browser
+
 IMAGE_ERROR_PLACEHOLDER_IMG.src = `data:${MIME_TYPES.svg},${encodeURIComponent(
   `<svg viewBox="0 0 668 668" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48ZM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56ZM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.81709 0 0 .81709 124.825 145.825)"/><path d="M256 8C119.034 8 8 119.033 8 256c0 136.967 111.034 248 248 248s248-111.034 248-248S392.967 8 256 8Zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676ZM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676Z" style="fill:#888;fill-rule:nonzero" transform="matrix(.30366 0 0 .30366 506.822 60.065)"/></svg>`,
 )}`;

packages/excalidraw/components/PublishLibrary.tsx

@@ -5,10 +5,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import {
   EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,
-  EXPORT_SOURCE,
   MIME_TYPES,
   VERSIONS,
   chunk,
+  getExportSource,
 } from "@excalidraw/common";
 
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
@@ -281,7 +281,7 @@ const PublishLibrary = ({
     const libContent: ExportedLibraryData = {
       type: EXPORT_DATA_TYPES.excalidrawLibrary,
       version: VERSIONS.excalidrawLibrary,
-      source: EXPORT_SOURCE,
+      source: getExportSource(),
       libraryItems: clonedLibItems,
     };
     const content = JSON.stringify(libContent, null, 2);

packages/excalidraw/data/json.ts

@@ -1,7 +1,7 @@
 import {
   DEFAULT_FILENAME,
   EXPORT_DATA_TYPES,
-  EXPORT_SOURCE,
+  getExportSource,
   MIME_TYPES,
   VERSIONS,
 } from "@excalidraw/common";
@@ -56,7 +56,7 @@ export const serializeAsJSON = (
   const data: ExportedDataState = {
     type: EXPORT_DATA_TYPES.excalidraw,
     version: VERSIONS.excalidraw,
-    source: EXPORT_SOURCE,
+    source: getExportSource(),
     elements:
       type === "local"
         ? clearElementsForExport(elements)
@@ -142,7 +142,7 @@ export const serializeLibraryAsJSON = (libraryItems: LibraryItems) => {
   const data: ExportedLibraryData = {
     type: EXPORT_DATA_TYPES.excalidrawLibrary,
     version: VERSIONS.excalidrawLibrary,
-    source: EXPORT_SOURCE,
+    source: getExportSource(),
     libraryItems,
   };
   return JSON.stringify(data, null, 2);

packages/math/package.json

@@ -13,7 +13,7 @@
       "default": "./dist/prod/index.js"
     },
     "./*": {
-      "types": "./../math/dist/types/math/src/*.d.ts"
+      "types": "./dist/types/math/src/*.d.ts"
     }
   },
   "files": [

packages/utils/package.json

@@ -13,7 +13,7 @@
       "default": "./dist/prod/index.js"
     },
     "./*": {
-      "types": "./../utils/dist/types/utils/src/*.d.ts"
+      "types": "./dist/types/utils/src/*.d.ts"
     }
   },
   "files": [