From e023ebe3a4974aeca838dc998576dac5145447f0 Mon Sep 17 00:00:00 2001
From: Dima Snisarenko <snisarenkodima@gmail.com>
Date: Fri, 18 Jun 2021 10:18:39 +0200
Subject: [PATCH] fix(react): ssr

fix #32
---
 bindings/react/package.json  |  4 ++--
 bindings/react/src/index.tsx | 10 +++++++---
 bindings/react/tsconfig.json |  4 ++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/bindings/react/package.json b/bindings/react/package.json
index 964996e..6d6326f 100644
--- a/bindings/react/package.json
+++ b/bindings/react/package.json
@@ -4,7 +4,6 @@
   "description": "React wrapper for img-comparison-slider",
   "homepage": "https://sneas.github.io/img-comparison-slider",
   "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist/"
@@ -17,7 +16,8 @@
   "scripts": {
     "build": "npm run clean && npm run compile",
     "clean": "rimraf dist",
-    "compile": "npm run tsc",
+    "compile": "tsc",
+    "watch": "tsc --watch",
     "tsc": "tsc -p ."
   },
   "devDependencies": {
diff --git a/bindings/react/src/index.tsx b/bindings/react/src/index.tsx
index 1a2f2af..6db0735 100644
--- a/bindings/react/src/index.tsx
+++ b/bindings/react/src/index.tsx
@@ -1,14 +1,18 @@
 import React, { FC, AllHTMLAttributes, PropsWithChildren } from 'react';
-import 'img-comparison-slider';
+
+if (typeof document !== 'undefined') {
+  import('img-comparison-slider');
+}
 
 type ImgComparisonSliderProps = AllHTMLAttributes<HTMLElement>;
 
 export const ImgComparisonSlider: FC<ImgComparisonSliderProps> = ({
   children,
   ...props
-}: PropsWithChildren<ImgComparisonSliderProps>) =>
-  React.createElement(
+}: PropsWithChildren<ImgComparisonSliderProps>) => {
+  return React.createElement(
     'img-comparison-slider',
     Object.assign({}, props),
     children
   );
+};
diff --git a/bindings/react/tsconfig.json b/bindings/react/tsconfig.json
index 932bf33..bb343a0 100644
--- a/bindings/react/tsconfig.json
+++ b/bindings/react/tsconfig.json
@@ -7,7 +7,7 @@
     "experimentalDecorators": true,
     "esModuleInterop": true,
     "lib": ["dom", "es2015"],
-    "module": "es2015",
+    "module": "CommonJS",
     "moduleResolution": "node",
     "noImplicitAny": true,
     "noImplicitReturns": true,
@@ -17,7 +17,7 @@
     "removeComments": false,
     "sourceMap": true,
     "jsx": "react",
-    "target": "es2015"
+    "target": "ESNext"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["**/__tests__/**"],