jupyter-ui Issue with Vite Example

Description

Wanted to integrate this our React app which is using Vite + SWC. but ran into issue. So i tried to run vite example found here https://github.com/datalayer-examples/jupyter-react-vite-example ran into similar errors again.

✘ [ERROR] No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl

    node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:3:35:
      3 │ export * as ipykernelWheelUrl from '../pypi/ipykernel-6.9.2-py3-none-any.whl';
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/widgetsnbextension-4.0.10-py3-none-any.whl

    node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:7:45:
      7 │ export * as widgetsnbextensionWheelUrl1 from '../pypi/widgetsnbextension-4.0.10-py3-none-any.whl';
        ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/piplite-0.2.3-py3-none-any.whl

    node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:4:33:
      4 │ export * as pipliteWheelUrl from '../pypi/piplite-0.2.3-py3-none-any.whl';
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/pyodide_kernel-0.2.3-py3-none-any.whl

    node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:5:40:
      5 │ export * as pyodide_kernelWheelUrl from '../pypi/pyodide_kernel-0.2.3-py3-none-any.whl';
        ╵                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

✘ [ERROR] No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/widgetsnbextension-3.6.6-py3-none-any.whl

    node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:6:44:
      6 │ export * as widgetsnbextensionWheelUrl from '../pypi/widgetsnbextension-3.6.6-py3-none-any.whl';
        ╵                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

/home/vibhigupta/work/jupyter-react-vite-example/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1649
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 5 errors:
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:3:35: ERROR: No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:4:33: ERROR: No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/piplite-0.2.3-py3-none-any.whl
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:5:40: ERROR: No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/pyodide_kernel-0.2.3-py3-none-any.whl
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:6:44: ERROR: No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/widgetsnbextension-3.6.6-py3-none-any.whl
node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js:7:45: ERROR: No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/widgetsnbextension-4.0.10-py3-none-any.whl
    at failureErrorWithLog (/home/vibhigupta/work/jupyter-react-vite-example/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1649:15)
    at /home/vibhigupta/work/jupyter-react-vite-example/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1058:25
    at /home/vibhigupta/work/jupyter-react-vite-example/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 35,
        file: 'node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js',
        length: 42,
        line: 3,
        lineText: "export * as ipykernelWheelUrl from '../pypi/ipykernel-6.9.2-py3-none-any.whl';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/ipykernel-6.9.2-py3-none-any.whl'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 33,
        file: 'node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js',
        length: 40,
        line: 4,
        lineText: "export * as pipliteWheelUrl from '../pypi/piplite-0.2.3-py3-none-any.whl';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/piplite-0.2.3-py3-none-any.whl'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 40,
        file: 'node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js',
        length: 47,
        line: 5,
        lineText: "export * as pyodide_kernelWheelUrl from '../pypi/pyodide_kernel-0.2.3-py3-none-any.whl';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/pyodide_kernel-0.2.3-py3-none-any.whl'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 44,
        file: 'node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js',
        length: 51,
        line: 6,
        lineText: "export * as widgetsnbextensionWheelUrl from '../pypi/widgetsnbextension-3.6.6-py3-none-any.whl';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/widgetsnbextension-3.6.6-py3-none-any.whl'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 45,
        file: 'node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/lib/_pypi.js',
        length: 52,
        line: 7,
        lineText: "export * as widgetsnbextensionWheelUrl1 from '../pypi/widgetsnbextension-4.0.10-py3-none-any.whl';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'No loader is configured for ".whl" files: node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@jupyterlite/pyodide-kernel/pypi/widgetsnbextension-4.0.10-py3-none-any.whl'
    }
  ],
  warnings: []
}

Node.js v18.16.0

 WARN  3 deprecated subdependencies found: @microsoft/[email protected], [email protected], [email protected]
Packages: +938
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 960, reused 781, downloaded 157, added 938, done

dependencies:
+ @datalayer/jupyter-react 0.9.4
+ react 18.2.0
+ react-dom 18.2.0

devDependencies:
+ @types/react 18.2.12 (18.2.55 is available)
+ @types/react-dom 18.2.5 (18.2.15 is available)
+ @vitejs/plugin-react 4.2.1
+ typescript 5.0.3 (5.2.2 is available)
+ vite 4.4.7 (4.5.0 is available)
+ vite-plugin-require 1.1.11 (1.1.14 is available)
+ vite-plugin-treat-umd-as-commonjs 0.1.3

 WARN  Issues with peer dependencies found
.
├─┬ vite-plugin-require 1.1.11
│ └── ✕ unmet peer vite@latest: found 4.4.7
├─┬ vite-plugin-treat-umd-as-commonjs 0.1.3
│ └── ✕ unmet peer vite@^2.0.4: found 4.4.7
└─┬ @datalayer/jupyter-react 0.9.4
  ├─┬ @datalayer/typescript-fsa-redux-observable 0.18.0
  │ └── ✕ unmet peer [email protected]: found 3.0.0
  └─┬ @jupyter/collaboration-extension 1.2.0
    └─┬ @jupyter/collaboration 1.2.1
      └─┬ @jupyter/docprovider 1.2.1
        └─┬ y-websocket 1.4.5
          └─┬ ws 6.2.2
            └── ✕ unmet peer utf-8-validate@^5.0.2: found 6.0.3 in @datalayer/jupyter-react

Done in 52.3s

Reproduce

Go to 'https://github.com/datalayer-examples/jupyter-react-vite-example`
Install dependencies
run npm run dev
See error '...'

Expected behavior

Context

Datalayer version: 0.9.4
Operating System and version: Fedora 39
Browser and version: Not able to run on browser as it didnt compile

Feb 12 '24 08:02 knightvibhi

Hi there,

I came across the same issue in my project. To resolve this, I adjusted the Vite configuration to treat .whl files as text. This can be achieved by adding the following configuration to your vite.config.ts file:

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".whl": "text",
      },
    },
  },
  // ... other configurations ...
});

This configuration instructs Vite's esbuild to handle .whl files as plain text, which effectively bypasses the issue. While this is more of a workaround than a permanent solution, it did the trick in my case. I hope this helps you out!

If you have any further insights or a more robust solution, I'd love to hear it.

Feb 17 '24 00:02 liuxukun2000

@liuxukun2000 Thank you, I was able to run it in vite dev but build is not working. do you able to build the app using the workaround or its for just development?

Feb 19 '24 06:02 knightvibhi

The pyodide support has introduced requirements for webpack/vite configs. I have pushed the proposed workaround for dev mode in https://github.com/datalayer-examples/jupyter-react-vite-example/commit/95fe1df03edf3250ea3b416e999549180cb033dd

Maybe @fcollonval knows more on how to fix the wheel loading for vite.js?

Feb 19 '24 07:02 echarles

Not sure is this link helps https://vitejs.dev/guide/assets

Feb 19 '24 07:02 echarles

I also faced the same issue. The solution provided by @liuxukun2000 was helpful. 👍🏼

Feb 23 '24 08:02 comsky

@comsky You were able to build it using vite?

May 24 '24 06:05 knightvibhi

Seems like this solved one of my problems, but I'm getting another error message:

✘ [ERROR] Could not resolve "!!raw-loader!@jupyterlab/theme-light-extension/style/variables.css"

    node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@lezer+common@1
.2._j2e4yzovy4ljbtuxe37z4bz3vm/node_modules/@datalayer/jupyter-react/lib/jupyter/lab/JupyterLabCss.js:48:31:
      48 │                 theme = import('!!raw-loader!@jupyterlab/theme-light-extension/style/variables.css');
         ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "!!raw-loader!@jupyterlab/theme-dark-extension/style/variables.css" as
  external to exclude it from the bundle, which will remove this error and leave the unresolved path
  in the bundle. You can also add ".catch()" here to handle this failure at run-time instead of
  bundle-time.

Jun 01 '24 00:06 cidrmill

Can you add raw-loader as dependency in your package.json?

Jun 01 '24 01:06 echarles

Can you add raw-loader as dependency in your package.json?

This was tried and nothing changed.

Jun 01 '24 09:06 cidrmill

Webpack's raw-loader has been introduced to deal with the color theme change in next-js https://github.com/datalayer/jupyter-ui/blob/026bc319e35a896abf700bcdbda127654c748acb/packages/react/src/jupyter/lab/JupyterLabCss.tsx#L55-L65

That sounds finally like a bad idea, as the webpack loader are not compatible with other bundlers like vite. We could revert that solution to unblock vite, while having to find another way to fix the colorscheme change in the next.js case.

You could just remove that code block in your node-module assets (or remote in the source code).

Jun 01 '24 09:06 echarles

Seems like this was just one obstacle of many. Removing that block seems to have fixed the error but there's a bunch more imports-related errors in the way.

Unable to resolve `@import "~react-toastify/dist/ReactToastify.min.css"` from PROJECTDIR/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@jupyterlab/apputils-extension/style

1:05:31 PM [vite] Pre-transform error: [postcss] ENOENT: no such file or directory, open '~react-toastify/dist/ReactToastify.min.css'

Unable to resolve `@import "~react-toastify/dist/ReactToastify.min.css"` from PROJECTDIR/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@jupyterlab/apputils-extension/style

1:05:32 PM [vite] Internal server error: [postcss] ENOENT: no such file or directory, open '~react-toastify/dist/ReactToastify.min.css'
  Plugin: vite:css
  File: PROJECTDIR/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@jupyterlab/apputils-extension/style/base.css:undefined:NaN
      at async open (node:internal/fs/promises:641:25)
      at async Object.readFile (node:internal/fs/promises:1254:14)
      at async Object.load (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:32265:30)
      at async loadImportContent (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:844:19)
      at async Promise.all (index 0)
      at async resolveImportId (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:800:27)
      at async parseStyles$1 (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:708:5)
      at async Promise.all (index 0)
      at async resolveImportId (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:800:27)
      at async parseStyles$1 (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:708:5)
      at async Object.Once (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:965:22)
      at async LazyResult.runAsync (PROJECTDIR/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:261:11)
      at async compileCSS (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:32319:25)
      at async TransformContext.transform (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:31622:56)
      at async Object.transform (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:52312:30)
      at async loadAndTransform (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:55067:29)
      at async viteTransformMiddleware (file://PROJECTDIR/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:64914:32)

Error: No route matches URL "/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@jupyterlab/apputils-extension/style/base.css"
    at getInternalRouterError (PROJECTDIR/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/router/dist/router.cjs.js:4676:59)
    at Object.query (PROJECTDIR/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/router/dist/router.cjs.js:3394:19)
    at handleDocumentRequest (PROJECTDIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@remix-run/server-runtime/dist/server.js:223:35)
    at requestHandler (PROJECTDIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@remix-run/server-runtime/dist/server.js:142:24)
    at async PROJECTDIR/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@remix-run/express/dist/server.js:41:22

No routes matched location "/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@jupyterlab/apputils-extension/style/base.css" 
ErrorResponseImpl {
  status: 404,
  statusText: 'Not Found',
  internal: true,
  data: 'Error: No route matches URL "/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@jupyterlab/apputils-extension/style/base.css"',
  error: Error: No route matches URL "/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@jupyterlab/apputils-extension/style/base.css"
      at getInternalRouterError (PROJECTDIR/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/router/dist/router.cjs.js:4676:59)
      at Object.query (PROJECTDIR/node_modules/.pnpm/@[email protected]/node_modules/@remix-run/router/dist/router.cjs.js:3394:19)
      at handleDocumentRequest (PROJECTDIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@remix-run/server-runtime/dist/server.js:223:35)
      at requestHandler (PROJECTDIR/node_modules/.pnpm/@[email protected][email protected]/node_modules/@remix-run/server-runtime/dist/server.js:142:24)
      at async PROJECTDIR/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@remix-run/express/dist/server.js:41:22
}

Jun 01 '24 20:06 cidrmill

jupyter-ui jupyter-ui copied to clipboard

Issue with Vite Example

Description

Reproduce

Expected behavior

Context

jupyter-ui
jupyter-ui copied to clipboard