Fix: Added SSR support, Revised README with CodeSandbox link (#14)

Author: manacy-keyvalue

README.md

@@ -7,7 +7,7 @@
 </div>
 
 A fully customizable, ready to use scatter graph UI package for React.
-Try tweaking React Scatter Graph using this codesandbox link <a href="https://codesandbox.io/s/stupefied-currying-ornk52" >here</a>
+Try tweaking React Scatter Graph using this codesandbox link <a href="https://codesandbox.io/p/sandbox/late-shadow-wzdh9l" >here</a>
 
 ## Installation
 
@@ -17,6 +17,8 @@ npm install @keyvaluesystems/react-scatter-graph
 
 You’ll need to install React separately since it isn't included in the package.
 
+Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
+
 ## Usage
 
 React Scatter Graph can run in a very basic mode like this:

package-lock.json

@@ -69,7 +69,7 @@
     "react-scripts": "5.0.1",
     "sass": "^1.58.3",
     "sass-loader": "^13.2.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.5",
     "ts-jest": "^29.0.5",
     "ts-loader": "^9.4.2",

package.json

@@ -2,48 +2,46 @@ const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const getPackageJson = require('./scripts/getPackageJson');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
 
-const {
-  version,
-  name,
-  license,
-  repository,
-  author,
-} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+const { version, name, license, repository, author } = getPackageJson(
+  'version',
+  'name',
+  'license',
+  'repository',
+  'author'
+);
 
 const banner = `
   ${name} v${version}
   ${repository.url}
 
-  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")} and project contributors.
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, ' ')} and project contributors.
 
   This source code is licensed under the ${license} license found in the
   LICENSE file in the root directory of this source tree.
 `;
 
 module.exports = {
-  mode: "production",
+  mode: 'production',
   devtool: 'source-map',
   entry: './src/index.tsx',
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'build'),
-    library: "ScatterGraph",
+    library: 'ScatterGraph',
     libraryTarget: 'umd',
-    clean: true
+    clean: true,
+    globalObject: 'this'
   },
   externals: {
-    'react': 'react'
+    react: 'react'
   },
   optimization: {
     minimize: true,
-    minimizer: [
-      new TerserPlugin({ extractComments: false }),
-      new CssMinimizerPlugin()
-    ],
+    minimizer: [new TerserPlugin({ extractComments: false }), new CssMinimizerPlugin()]
   },
   module: {
     rules: [
@@ -53,7 +51,7 @@ module.exports = {
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/preset-env', '@babel/preset-react'],
+            presets: ['@babel/preset-env', '@babel/preset-react']
           }
         }
       },
@@ -73,18 +71,16 @@ module.exports = {
   },
   plugins: [
     new MiniCssExtractPlugin({
-        filename: 'css/index.css'
+      filename: 'css/index.css'
     }),
     new webpack.BannerPlugin(banner),
     new MergeIntoSingleFilePlugin({
       files: {
-        'types/index.d.ts': [
-          path.resolve(__dirname, 'src/types/types.d.ts')
-        ]
+        'types/index.d.ts': [path.resolve(__dirname, 'src/types/types.d.ts')]
       }
     })
   ],
   resolve: {
-    extensions: ['.ts', '.js', '.tsx', '.json', ".css", ".scss"]
+    extensions: ['.ts', '.js', '.tsx', '.json', '.css', '.scss']
   }
-};
+};