Merge pull request #4 from karankraina/fix-421

fix 421 error

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-lib/
+lib/
+package-lock.json

README.md

@@ -1,2 +1,78 @@
-# react-hydration-overlay
-React Hydration Overlay
+<h1 align="center">Welcome to react-hydration-overlay 👋</h1>
+<p>
+  <a href="https://www.npmjs.com/package/react-hydration-overlay" target="_blank">
+    <img alt="Version" src="https://img.shields.io/npm/v/react-hydration-overlay.svg">
+  </a>
+  <a href="https://github.com/karankraina/react-hydration-overlay#readme" target="_blank">
+    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
+  </a>
+  <a href="https://github.com/karankraina/react-hydration-overlay/graphs/commit-activity" target="_blank">
+    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
+  </a>
+  <a href="https://github.com/karankraina/react-hydration-overlay/blob/master/LICENSE" target="_blank">
+    <img alt="License: MIT" src="https://img.shields.io/github/license/karankraina/react-hydration-overlay" />
+  </a>
+  <a href="https://twitter.com/karankraina" target="_blank">
+    <img alt="Twitter: karankraina" src="https://img.shields.io/twitter/follow/karankraina.svg?style=social" />
+  </a>
+</p>
+
+> React Hydration Overlay
+
+### 🏠 [Homepage](https://github.com/karankraina/react-hydration-overlay#readme)
+
+### ✨ [Demo](demo-url)
+
+## Install
+
+```sh
+npm install react-hydration-overlay
+```
+
+## Usage
+
+Use the plugin in Webpack. Pass your application query selector in the constructor.
+
+```sh
+const { Overlay } = require('react-hydration-overlay');
+
+// ...
+
+export default {
+    // ...,
+    plugins: [
+        // ...,
+        new Overlay('div#app'),
+    ]
+}
+```
+
+## Run tests
+
+```sh
+npm run test
+```
+
+## Author
+
+👤 **Karan Raina <karanraina1996@gmail.com>**
+
+* Twitter: [@karankraina](https://twitter.com/karankraina)
+* Github: [@karankraina](https://github.com/karankraina)
+* LinkedIn: [@karankraina](https://linkedin.com/in/karankraina)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/karankraina/react-hydration-overlay/issues). You can also take a look at the [contributing guide](https://github.com/karankraina/react-hydration-overlay/blob/master/CONTRIBUTING.md).
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+
+Copyright © 2024 [Karan Raina <karanraina1996@gmail.com>](https://github.com/karankraina).<br />
+This project is [MIT](https://github.com/karankraina/react-hydration-overlay/blob/master/LICENSE) licensed.
+
+***
+_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hydration-overlay",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React Htdration Overlay",
   "main": "lib/index.js",
   "module": "lib/index.js",

src/client/index.tsx

@@ -4,7 +4,7 @@ import { isClient } from './utils';
 
 import { Overlay } from './overlay';
 
-const HYDRATION_ERROR_MIN = /Minified React error #(418|422|423|419)/gi;
+const HYDRATION_ERROR_MIN = /Minified React error #(418|422|423|419|421)/gi;
 const HYDRATION_ERROR_DEV = /(Hydration|hydrating)/gi;
 
 const querySelector = '$$overlayQuerySelector$$';
@@ -13,7 +13,7 @@ if (isClient()) {
   if (!window.executed) {
     window.executed = true;
     if (document.readyState === 'complete') {
-      startObserver()
+      startObserver();
     } else {
       window.addEventListener('DOMContentLoaded', startObserver);
     }