Open knightvibhi opened 4 months ago
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.
@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?
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?
Not sure is this link helps https://vitejs.dev/guide/assets
I also faced the same issue. The solution provided by @liuxukun2000 was helpful. 👍🏼
@comsky You were able to build it using vite?
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/@datalayer+jupyter-react@0.10.1_@babel+core@7.24.6_@codemirror+view@6.26.3_@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.
Can you add raw-loader
as dependency in your package.json
?
Can you add
raw-loader
as dependency in yourpackage.json
?
This was tried and nothing changed.
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).
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/@jupyterlab+apputils-extension@4.2.1_bufferutil@4.0.8_utf-8-validate@6.0.4/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/@jupyterlab+apputils-extension@4.2.1_bufferutil@4.0.8_utf-8-validate@6.0.4/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/@jupyterlab+apputils-extension@4.2.1_bufferutil@4.0.8_utf-8-validate@6.0.4/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/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:32265:30)
at async loadImportContent (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/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/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:800:27)
at async parseStyles$1 (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/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/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:800:27)
at async parseStyles$1 (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:708:5)
at async Object.Once (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BjBhdnU2.js:965:22)
at async LazyResult.runAsync (PROJECTDIR/node_modules/.pnpm/postcss@8.4.38/node_modules/postcss/lib/lazy-result.js:261:11)
at async compileCSS (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:32319:25)
at async TransformContext.transform (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:31622:56)
at async Object.transform (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:52312:30)
at async loadAndTransform (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:55067:29)
at async viteTransformMiddleware (file://PROJECTDIR/node_modules/.pnpm/vite@5.2.12_@types+node@20.13.0_sass@1.77.4_terser@5.31.0/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:64914:32)
Error: No route matches URL "/node_modules/.pnpm/@jupyterlab+apputils-extension@4.2.1_bufferutil@4.0.8_utf-8-validate@6.0.4/node_modules/@jupyterlab/apputils-extension/style/base.css"
at getInternalRouterError (PROJECTDIR/node_modules/.pnpm/@remix-run+router@1.16.1/node_modules/@remix-run/router/dist/router.cjs.js:4676:59)
at Object.query (PROJECTDIR/node_modules/.pnpm/@remix-run+router@1.16.1/node_modules/@remix-run/router/dist/router.cjs.js:3394:19)
at handleDocumentRequest (PROJECTDIR/node_modules/.pnpm/@remix-run+server-runtime@2.9.2_typescript@5.4.5/node_modules/@remix-run/server-runtime/dist/server.js:223:35)
at requestHandler (PROJECTDIR/node_modules/.pnpm/@remix-run+server-runtime@2.9.2_typescript@5.4.5/node_modules/@remix-run/server-runtime/dist/server.js:142:24)
at async PROJECTDIR/node_modules/.pnpm/@remix-run+express@2.9.2_express@4.19.2_typescript@5.4.5/node_modules/@remix-run/express/dist/server.js:41:22
No routes matched location "/node_modules/.pnpm/@jupyterlab+apputils-extension@4.2.1_bufferutil@4.0.8_utf-8-validate@6.0.4/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/@jupyterlab+apputils-extension@4.2.1_bufferutil@4.0.8_utf-8-validate@6.0.4/node_modules/@jupyterlab/apputils-extension/style/base.css"',
error: Error: No route matches URL "/node_modules/.pnpm/@jupyterlab+apputils-extension@4.2.1_bufferutil@4.0.8_utf-8-validate@6.0.4/node_modules/@jupyterlab/apputils-extension/style/base.css"
at getInternalRouterError (PROJECTDIR/node_modules/.pnpm/@remix-run+router@1.16.1/node_modules/@remix-run/router/dist/router.cjs.js:4676:59)
at Object.query (PROJECTDIR/node_modules/.pnpm/@remix-run+router@1.16.1/node_modules/@remix-run/router/dist/router.cjs.js:3394:19)
at handleDocumentRequest (PROJECTDIR/node_modules/.pnpm/@remix-run+server-runtime@2.9.2_typescript@5.4.5/node_modules/@remix-run/server-runtime/dist/server.js:223:35)
at requestHandler (PROJECTDIR/node_modules/.pnpm/@remix-run+server-runtime@2.9.2_typescript@5.4.5/node_modules/@remix-run/server-runtime/dist/server.js:142:24)
at async PROJECTDIR/node_modules/.pnpm/@remix-run+express@2.9.2_express@4.19.2_typescript@5.4.5/node_modules/@remix-run/express/dist/server.js:41:22
}
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.Reproduce
npm run dev
Expected behavior
Context
0.9.4
Fedora 39
Not able to run on browser as it didnt compile