fix(react): ssr

fix #32
sneas · Jun 18, 2021 · e023ebe · e023ebe
1 parent d29e14c
commit e023ebe
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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__/**"],