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

.babelrc

@@ -3,7 +3,8 @@
     "@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-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,10 +154,11 @@ 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.min.css';
 
 const MyApp = () => (
   <div style={{ height: '100vh' }}>
@@ -166,6 +167,23 @@ const MyApp = () => (
 );
 ```
 
+To use with NextJS:
+
+```javascript
+import '@quantumblack/kedro-viz/lib/styles.min.css';
+import dynamic from 'next/dynamic';
+
+const NoSSRKedro = dynamic(() => import('@quantumblack/kedro-viz'), {
+  ssr: false,
+});
+
+const MyApp = () => (
+  <div style={{ height: '100vh' }}>
+    <NoSSRKedro data={json} />
+  </div>
+);
+```
+
 The JSON can be obtained by running:
 
 ```bash

RELEASE.md

@@ -6,6 +6,12 @@ Please follow the established format:
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
 
+# Release 6.5.1
+
+## Bug fixes and other changes
+
+- Updated dependencies to ensure compatibility with Vite and Next.js environments, combine css into a signle file for npm library (#1510)
+
 # Release 6.5.0
 
 ## Major features and improvements
@@ -17,7 +23,7 @@ Please follow the established format:
 - Fix to search for a '<lambda' Python function in the sidebar. (#1497)
 - Add favicon to Kedro-Viz. (#1509)
 - Remove python upper-bound requirements and add KedroVizPythonVersion warning. (#1506)
-
+- Resolved various bugs affecting server-side rendering, updated dependencies to ensure compatibility with Vite and Next.js environments (#1508)
 
 # Release 6.4.0