Lint, format and type check fixes

Author: goanpeca

.eslintrc.js

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
       - name: Install the npm dependencies
         run: |
           npm install
@@ -45,7 +45,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Install Dependencies
         run: npm install

.github/workflows/build.yml

@@ -11,8 +11,8 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  code-quality:
-    name: Code Quality Checks
+  format-check:
+    name: Format Check (Prettier)
     runs-on: ubuntu-latest
 
     steps:
@@ -22,7 +22,30 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run Format Checks
+        run: |
+          echo "::group::Running Format Checks"
+          npm run format:check
+          echo "✓ Prettier passed"
+          echo "::endgroup::"
+
+  lint-check:
+    name: Lint Check (ESLint)
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
 
       - name: Install dependencies
         run: npm install
@@ -33,18 +56,27 @@ jobs:
           echo "Running ESLint..."
           npm run lint
           echo "✓ ESLint passed"
-          echo ""
           echo "::endgroup::"
 
-      - name: Run Format Checks
-        run: |
-          echo "::group::Running Format Checks"
-          npm run format:check
-          echo "✓ Prettier passed"
-          echo ""
-          echo "::endgroup::"
+  type-check:
+    name: Type Check (TypeScript)
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Install dependencies
+        run: npm install
+
       - name: Build project
         run: npm run build
+
       - name: Run Type Checks
         run: |
           echo "::group::Running Type Checks"

.github/workflows/code-quality.yml

@@ -0,0 +1,5 @@
+# Use legacy peer deps to avoid conflicts
+legacy-peer-deps=true
+
+# Disable progress to reduce CI log noise
+progress=false

.npmrc

@@ -4,14 +4,26 @@
  * MIT License
  */
 
-const webpack = require('webpack');
-const path = require('path');
+import webpack from 'webpack';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import { createRequire } from 'module';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const require = createRequire(import.meta.url);
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
   transpilePackages: ['@jupyterlab/settingregistry', '@jupyterlite/settings'],
-  webpack: (config: any, options: any) => {
+  // Skip Next.js built-in ESLint during build (monorepo has its own ESLint setup)
+  // This avoids ESLint 9 compatibility warnings from Next.js 14's ESLint config
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  webpack: (config, options) => {
+
     config.resolve.fallback = {
       ...config.resolve.fallback,
       buffer: require.resolve('buffer/'),
@@ -25,14 +37,14 @@ const nextConfig = {
     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(/^~/, '');
-      }),
-    );
+
+    // Add resolve modules to look in monorepo node_modules
+    config.resolve.modules = [
+      ...(config.resolve.modules || []),
+      resolve(__dirname, '../../node_modules'),
+      'node_modules',
+    ];
     config.module.rules.push(
       { test: /\.js.map$/, type: 'asset/resource' },
       {
@@ -87,4 +99,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+export default nextConfig;

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

@@ -12,7 +12,7 @@
     "@datalayer/icons-react": "^1.0.0",
     "@datalayer/jupyter-react": "^1.0.7",
     "@datalayer/primer-addons": "^1.0.4",
-    "next": "^15.4.1",
+    "next": "14.2.18",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -24,6 +24,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "buffer": "^6.0.3",
+    "eslint-config-next": "^15.5.5",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

examples/next-js/package.json

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+'use client';
+
+// Disable static generation for error pages
+export const dynamic = 'force-dynamic';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div style={{ padding: '2rem', textAlign: 'center' }}>
+      <h2>Something went wrong!</h2>
+      <p>Please refresh the page or try again.</p>
+      <button
+        onClick={reset}
+        style={{
+          marginTop: '1rem',
+          padding: '0.5rem 1rem',
+          backgroundColor: '#0070f3',
+          color: 'white',
+          border: 'none',
+          borderRadius: '5px',
+          cursor: 'pointer',
+        }}
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

examples/next-js/src/app/error.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+'use client';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div style={{ padding: '2rem', textAlign: 'center' }}>
+          <h2>Something went wrong!</h2>
+          <p>Please refresh the page or try again.</p>
+          <button
+            onClick={reset}
+            style={{
+              marginTop: '1rem',
+              padding: '0.5rem 1rem',
+              backgroundColor: '#0070f3',
+              color: 'white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}