Update dependencies to work with Vite and NextJS, combine css files into a single css file

.babelrc

@@ -5,5 +5,20 @@
     ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
     ["@babel/plugin-proposal-private-methods", { "loose": true }]
   ],
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "env": {
+    "lib": {
+      "plugins": [
+        "@babel/plugin-transform-runtime",
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        [
+          "@babel/plugin-proposal-private-property-in-object",
+          { "loose": true }
+        ],
+        ["@babel/plugin-proposal-private-methods", { "loose": true }],
+        ["babel-plugin-transform-remove-imports", { "test": "\\.(scss)$" }]
+      ],
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
+    }
+  }
 }

.circleci/continue_config.yml

@@ -227,7 +227,7 @@ jobs:
           command: npm run lint
       - run:
           name: Run JavaScript tests
-          command: npm run build:css && npm run test:ci
+          command: npm run test:ci
       - run:
           name: Run Javascript end to end tests
           command: npm run cy:ci

README.md

@@ -154,16 +154,26 @@ train_evaluation.r2_score_linear_regression:
 
 ### Standalone React component usage
 
-To use Kedro-Viz as a standalone React component, import the component and supply a data JSON as prop:
+To use Kedro-Viz as a standalone React component, you can follow the example below. However, please note that Kedro-Viz does not support server-side rendering (SSR). If you're using Next.js or another SSR framework, you should be aware of this limitation.
 
 ```javascript
 import KedroViz from '@quantumblack/kedro-viz';
+import '@quantumblack/kedro-viz/lib/styles/styles.min.css';
 
-const MyApp = () => (
-  <div style={{ height: '100vh' }}>
-    <KedroViz data={json} />
-  </div>
-);
+const MyApp = () => <KedroViz data={json} />;
+```
+
+To use with NextJS:
+
+```javascript
+import '@quantumblack/kedro-viz/lib/styles/styles.min.css';
+import dynamic from 'next/dynamic';
+
+const NoSSRKedro = dynamic(() => import('@quantumblack/kedro-viz'), {
+  ssr: false,
+});
+
+const MyApp = () => <NoSSRKedro data={json} />;
 ```
 
 The JSON can be obtained by running:

RELEASE.md

@@ -11,6 +11,12 @@ Please follow the established format:
 
 - Fix for Kedro Viz Connection Error (#1507)
 
+# Release 6.5.1
+
+## Bug fixes and other changes
+
+- Updated dependencies to ensure compatibility with Vite and Next.js environments; combine CSS into a single file when used as a React component. (#1510)
+
 # Release 6.5.0
 
 ## Major features and improvements
@@ -23,7 +29,6 @@ Please follow the established format:
 - Add favicon to Kedro-Viz. (#1509)
 - Remove python upper-bound requirements and add KedroVizPythonVersion warning. (#1506)
 
-
 # Release 6.4.0
 
 ## Major features and improvements