Fix/webpack import (#18)

.changeset/friendly-fishes-peel.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/react-hydration-overlay": patch
+---
+
+Chore: use `bunchee` to build lib

.changeset/long-impalas-sell.md

@@ -0,0 +1,5 @@
+---
+"@builder.io/react-hydration-overlay": patch
+---
+
+fix webpack import

.github/workflows/build.yml

@@ -11,8 +11,8 @@ on:
       - main
 
 jobs:
-  publish-sdks:
-    name: Publish package
+  react-hydration-overlay:
+    name: Build react-hydration-overlay
     runs-on: ubuntu-latest
 
     steps:
@@ -45,3 +45,6 @@ jobs:
 
       - name: Install dependencies
         run: pnpm install
+
+      - name: Build everything
+        run: pnpm -r build

packages/lib/package.json

@@ -15,32 +15,33 @@
     "type": "git",
     "url": "git+https://github.com/BuilderIO/hydration-overlay.git"
   },
-  "main": "./dist/HydrationOverlay.js",
+  "main": "./dist/HydrationOverlay.cjs",
   "module": "./dist/HydrationOverlay.mjs",
   "exports": {
     ".": {
       "import": "./dist/HydrationOverlay.mjs",
-      "require": "./dist/HydrationOverlay.js"
+      "require": "./dist/HydrationOverlay.cjs"
     },
     "./next": {
-      "import": "./dist/next-plugin.mjs",
-      "require": "./dist/next-plugin.js"
+      "import": "./dist/next.mjs",
+      "require": "./dist/next.cjs"
     },
     "./webpack": {
       "import": "./dist/webpack.mjs",
-      "require": "./dist/webpack.js"
-    }
+      "require": "./dist/webpack.cjs"
+    },
+    "./hydration-overlay-initializer": "./dist/hydration-overlay-initializer.js"
   },
   "scripts": {
-    "tsc": "tsc",
-    "build": "tsup",
+    "build": "bunchee",
     "pkg:attw": "attw --pack .",
     "pkg:publint": "publint --strict",
     "lint-pkg": "pnpm pkg:publint && pnpm pkg:attw"
   },
   "peerDependencies": {
     "react": ">=16",
-    "react-dom": ">=16"
+    "react-dom": ">=16",
+    "webpack": ">=4"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.13.3",
@@ -49,13 +50,11 @@
     "@types/node": "^20",
     "@types/pretty": "^2.0.3",
     "@types/react": "^18.2.43",
+    "bunchee": "^4.1.1",
     "next": "14.0.4",
     "publint": "^0.2.6",
     "react": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3",
-    "webpack": "^5.89.0"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
     "beautify": "^0.0.8",

packages/lib/src/Overlay.tsx

@@ -17,6 +17,12 @@ export function Overlay() {
   const [hasHydrationMismatch, setHasHydrationMismatch] = useState(false);
 
   useEffect(() => {
+    if (!window.BUILDER_HYDRATION_OVERLAY) {
+      console.warn(
+        "[ReactHydrationOverlay]: No `window.BUILDER_HYDRATION_OVERLAY` found. Make sure the initializer script is properly injected into your app's entry point."
+      );
+      return;
+    }
     const ssrHtml = window.BUILDER_HYDRATION_OVERLAY.SSR_HTML;
     const newCSRHtml = window.BUILDER_HYDRATION_OVERLAY.CSR_HTML;
 

packages/lib/src/next-plugin.ts → packages/lib/src/next.ts

@@ -1,5 +1,5 @@
 import { type NextConfig } from "next";
-import { withHydrationOverlayWebpack } from "./webpack";
+import { withHydrationOverlayWebpack } from "./webpack.js";
 
 export type NextPluginOptions = {
   /**
@@ -9,7 +9,7 @@ export type NextPluginOptions = {
 };
 
 const withHydrationOverlay =
-  (pluginOptions: NextPluginOptions) =>
+  (pluginOptions: NextPluginOptions = {}) =>
   (nextConfig: NextConfig = {}): NextConfig => {
     const extraConfig: NextConfig = {
       webpack(config, ctx) {
@@ -19,12 +19,6 @@ const withHydrationOverlay =
           );
         }
 
-        const isMainAppEntryPoint = (entryPointName: string) =>
-          !ctx.isServer &&
-          (entryPointName === "pages/_app" ||
-            // entrypoint for `/app` pages
-            entryPointName === "main-app");
-
         return withHydrationOverlayWebpack({
           appRootSelector: pluginOptions.appRootSelector || "#__next",
           isMainAppEntryPoint: (entryPointName: string) =>

packages/lib/src/webpack.ts

@@ -2,13 +2,6 @@ import webpack, { Configuration, EntryObject } from "webpack";
 import path from "path";
 import { fileURLToPath } from "url";
 
-let dirname;
-try {
-  dirname = __dirname;
-} catch (e) {
-  dirname = path.dirname(fileURLToPath(import.meta.url));
-}
-
 // `entryPoint` can be a string, array of strings, or object whose `import` property is one of those two
 const getEntryPoint = <T extends keyof EntryObject>(
   entryPoint: EntryObject[T]
@@ -49,7 +42,7 @@ async function addScriptToEntryProperty({
       const currentEntryPoint = newEntryProperty[entryPointName];
       const newEntryPoint = getEntryPoint(currentEntryPoint);
       const injectedScriptPath = path.join(
-        dirname,
+        __dirname,
         "hydration-overlay-initializer.js"
       );
 

packages/lib/tsconfig.json

@@ -2,16 +2,14 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["node"],
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,
     "noImplicitAny": false,
     "strict": true,
     "moduleResolution": "Bundler",
     "jsx": "react",
-    "module": "ESNext",
-    "outDir": "./types"
+    "module": "ESNext"
   },
   "include": ["./src/**/*", "module-augmentations.d.ts"]
 }