test

Author: goanpeca

examples/next-js/empty.css

@@ -32,8 +32,6 @@ const nextConfig = {
     config.resolve.alias = {
       ...config.resolve.alias,
       json5: require.resolve('json5/lib/index.js'),
-      // Map the problematic CSS import to our empty file
-      '~react-toastify/dist/ReactToastify.min.css': resolve(__dirname, 'empty.css'),
     };
 
     // Add resolve modules to look in monorepo node_modules
@@ -42,25 +40,6 @@ const nextConfig = {
       resolve(__dirname, '../../node_modules'),
       'node_modules',
     ];
-
-    // Handle ~ prefix imports by rewriting them to resolve from node_modules
-    // The ~ prefix is a webpack convention that some packages use
-    config.plugins.push(
-      new webpack.NormalModuleReplacementPlugin(/^~/, (resource) => {
-        // Get the path after the ~ prefix
-        const requestPath = resource.request.substring(1);
-
-        // Special case: ignore react-toastify CSS that JupyterLab imports but we don't need
-        if (requestPath.includes('react-toastify/dist/ReactToastify.min.css')) {
-          // Replace with an empty CSS file from this directory
-          resource.request = resolve(__dirname, 'empty.css');
-          return;
-        }
-
-        // For other ~ imports, resolve from node_modules
-        resource.request = resolve(__dirname, '../../node_modules', requestPath);
-      }),
-    );
     config.module.rules.push(
       { test: /\.js.map$/, type: 'asset/resource' },
       {

examples/next-js/next.config.mjs

@@ -0,0 +1,14 @@
+diff --git a/node_modules/@jupyterlab/apputils-extension/style/notification.css b/node_modules/@jupyterlab/apputils-extension/style/notification.css
+index f84dac3..9cf698c 100644
+--- a/node_modules/@jupyterlab/apputils-extension/style/notification.css
++++ b/node_modules/@jupyterlab/apputils-extension/style/notification.css
+@@ -3,7 +3,8 @@
+  * Distributed under the terms of the Modified BSD License.
+  */
+ 
+-@import '~react-toastify/dist/ReactToastify.min.css';
++/* Commented out to avoid webpack resolution issues with ~ prefix in Next.js */
++/* @import '~react-toastify/dist/ReactToastify.min.css'; */
+ 
+ :root {
+   --toastify-color-light: var(--jp-layout-color1);