Fix vite and next.js examples (#381)

* fix: nextjs example

* lint

* readme

* readme

Author: echarles

examples/next-js/README.md

@@ -4,47 +4,67 @@
 
 # Jupyter UI for Next.js
 
+> Live example on https://jupyter-nextjs-example.vercel.app
+
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 <div align="center" style="text-align: center">
   <img alt="Jupyter UI Next.js" src="https://datalayer-jupyter-examples.s3.amazonaws.com/jupyter-react-nextjs.png" />
 </div>
 
-Read more on the [Datalayer documentation website](https://jupyter-ui.datalayer.tech/docs/examples/next-js) (ensure you have tne needed [Setup](https://jupyter-ui.datalayer.tech/docs/develop/setup)).
+Read more on the [documentation website](https://jupyter-ui.datalayer.tech/docs/examples/next-js) (ensure you have tne needed [development environment](https://jupyter-ui.datalayer.tech/docs/develop/setup)).
 
 ## Getting Started
 
-> You have to use Yarn V3 to make this work.
-
-First, run the development server:
+First, run the development server.
 
 ```bash
+npm i
 npm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
+## Production Build
+
+To create a production build, you first need to patch `@jupyter-widgets/controls` to avoid issues with early loadings via `require.js`.
+
+```patch
+diff --git a/node_modules/@jupyter-widgets/controls/lib/index.js b/node_modules/@jupyter-widgets/controls/lib/index.js
+index 0063f69..ade0862 100644
+--- a/node_modules/@jupyter-widgets/controls/lib/index.js
++++ b/node_modules/@jupyter-widgets/controls/lib/index.js
+@@ -22,5 +22,5 @@ export * from './widget_tagsinput';
+ export * from './widget_string';
+ export * from './widget_description';
+ export * from './widget_upload';
+-export const version = require('../package.json').version;
++export const version = "0.1.0";
+ //# sourceMappingURL=index.js.map
+\ No newline at end of file
+diff --git a/node_modules/@jupyter-widgets/controls/src/index.ts b/node_modules/@jupyter-widgets/controls/src/index.ts
+index 912458d..5edaa11 100644
+--- a/node_modules/@jupyter-widgets/controls/src/index.ts
++++ b/node_modules/@jupyter-widgets/controls/src/index.ts
+@@ -24,4 +24,4 @@ export * from './widget_string';
+ export * from './widget_description';
+ export * from './widget_upload';
+ 
+-export const version = (require('../package.json') as any).version;
++export const version = "5.0.12";
+```
+
 You can create a static version of the application that you will find under the `out` folder.
 
 ```bash
 npm run build
+npm start
 ```
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
+## ⚖️ License
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Copyright (c) 2025 Datalayer, Inc.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Released under the terms of the MIT license (see [LICENSE](https://github.com/datalayer/jupyter-ui/blob/main/LICENSE).

examples/next-js/next.config.js renamed to examples/next-js/next.config.ts

@@ -4,10 +4,38 @@
  * MIT License
  */
 
+const webpack = require('webpack');
+const path = require('path');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
-  webpack: (config, options) => {
+  transpilePackages: ['@jupyterlab/settingregistry', '@jupyterlite/settings'],
+  webpack: (config: any, options: any) => {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      buffer: require.resolve('buffer/'),
+    };
+    config.plugins.push(
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      })
+    );
+    // Fix json5 import issue for JupyterLab packages
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'json5': require.resolve('json5/lib/index.js'),
+      '~': path.resolve(__dirname, 'node_modules'),
+    };
+    // Add a plugin to strip `~` from import paths
+    config.plugins.push(
+      new webpack.NormalModuleReplacementPlugin(
+        /^~(.*)/,
+        (resource: any) => {
+          resource.request = resource.request.replace(/^~/, '');
+        },
+      ),
+    );    
     config.module.rules.push(
       { test: /\.js.map$/, type: 'asset/resource' },
       {
@@ -42,6 +70,14 @@ const nextConfig = {
           filename: 'pypi/[name][ext][query]',
         },
       },
+      // Rule for Python wheel files
+      {
+        test: /\.whl$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'pypi/[name][ext][query]',
+        },
+      },
       {
         test: /pyodide-kernel-extension\/schema\/.*/,
         type: 'asset/resource',
@@ -54,4 +90,4 @@ const nextConfig = {
   },
 }
 
-module.exports = nextConfig
+module.exports = nextConfig;

examples/next-js/package.json

@@ -4,31 +4,27 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "clean": "rimraf node_modules lib dist build tsconfig.tsbuildinfo",
-    "build:prod": "next build",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@datalayer/icons-react": "^1.0.0",
     "@datalayer/jupyter-react": "^1.0.1",
     "@datalayer/primer-addons": "^1.0.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^9.0.0",
-    "eslint-config-next": "^15.3.0",
-    "next": "^14.2.3",
-    "next-themes": "^0.2.1",
-    "postcss": "^8.4.23",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "svg-url-loader": "^7.1.1",
-    "tailwindcss": "^3.3.2"
+    "next": "^15.4.1",
+    "next-themes": "^0.4.6",
+    "react": "^18.2.0",
+    "react-dom": "^18",
+    "svg-url-loader": "^8.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.14.1",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
-    "raw-loader": "^4.0.2",
-    "typescript": "^5.8.3"
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "buffer": "^6.0.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

examples/next-js/postcss.config.js

@@ -0,0 +1,7 @@
+const config = {
+  plugins: [
+    "@tailwindcss/postcss"
+  ],
+};
+
+export default config;

examples/next-js/postcss.config.mjs

@@ -1,5 +1,26 @@
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}