installing into vite project #602

will-moore · 2022-05-19T22:53:36Z

will-moore
May 19, 2022

So I wanted to install viv in a new vite project to have a play & learn...
But I'm stuck on installing peer dependencies...
This is what I tried...

npm create vite@latest
# chose a vanilla react project...
cd viv-test/
npm install
# tried installing peer deps first...
npm install deck.gl @luma.gl/core
# this gave me ERROR 1 below
npm install @hms-dbmi/viv
# tried installing various peerDependencies as listed in package.json - all were "up to date" except `constants`
npm install @deck.gl/geo-layers
npm install @deck.gl/layers
npm install @deck.gl/react
npm install @deck.gl/constants
  npm ERR! code E404
  npm ERR! 404 Not Found - GET https://registry.npmjs.org/@deck.gl%2fconstants - Not found
npm install @luma.gl/shadertools
npm install @luma.gl/webgl
# this gave me ERROR 2 below
npm install @hms-dbmi/viv

Any help appreciated, thanks!

ERROR 1

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.3" from @deck.gl/[email protected]
npm ERR!   node_modules/@deck.gl/react
npm ERR!     peer @deck.gl/react@"~8.6.7" from @hms-dbmi/[email protected]
npm ERR!     node_modules/@hms-dbmi/viv
npm ERR!       @hms-dbmi/viv@"*" from the root project
npm ERR!   peer react@"^18.1.0" from [email protected]
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@">=16.3" from @deck.gl/[email protected]
npm ERR!     node_modules/@deck.gl/react
npm ERR!       peer @deck.gl/react@"~8.6.7" from @hms-dbmi/[email protected]
npm ERR!       node_modules/@hms-dbmi/viv
npm ERR!         @hms-dbmi/viv@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.12.0" from @hms-dbmi/[email protected]
npm ERR! node_modules/@hms-dbmi/viv
npm ERR!   @hms-dbmi/viv@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/wmoore/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wmoore/.npm/_logs/2022-05-19T22_07_36_825Z-debug-0.log

ERROR 2

$ npm install @hms-dbmi/viv
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @deck.gl/[email protected]
npm ERR! node_modules/@deck.gl/geo-layers
npm ERR!   @deck.gl/geo-layers@"^8.7.10" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @deck.gl/geo-layers@"~8.6.7" from @hms-dbmi/[email protected]
npm ERR! node_modules/@hms-dbmi/viv
npm ERR!   @hms-dbmi/viv@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/wmoore/.npm/eresolve-report.txt for a full report.

will-moore · 2022-05-20T14:00:05Z

will-moore
May 20, 2022
Author

Tried an alternative approach:
Started a vanilla JS vite project,
but before npm install I added this to the package.json, (using versions from vizarr):

"dependencies": {
    "@hms-dbmi/viv": "^0.12.5",
    "deck.gl": "^8.6.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "zarr": "^0.5.1"
  },

But this still failed:

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@">=16.3" from @deck.gl/[email protected]
npm ERR!   node_modules/@deck.gl/react
npm ERR!     peer @deck.gl/react@"~8.6.7" from @hms-dbmi/[email protected]
npm ERR!     node_modules/@hms-dbmi/viv
npm ERR!       @hms-dbmi/viv@"^0.12.5" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.12.0" from @hms-dbmi/[email protected]
npm ERR! node_modules/@hms-dbmi/viv
npm ERR!   @hms-dbmi/viv@"^0.12.5" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/wmoore/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wmoore/.npm/_logs/2022-05-20T13_56_36_907Z-debug-0.log

1 reply

ilan-gold May 21, 2022
Maintainer

@will-moore Have you tried using react 16?

will-moore · 2022-05-25T14:46:19Z

will-moore
May 25, 2022
Author

Hi @ilan-gold - Yes, I originally tried creating a react project with the vite setup, and when the install failed I tried replacing react 18 with react 16 (which didn't work)...

Just now I've tried:

npm create vite@latest  (chose to create a vanilla JS project 'vite-vanilla')
cd vite-vanilla
npm install
npm install [email protected]
npm install [email protected]
npm install deck.gl @luma.gl/core
npm install @hms-dbmi/viv

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"16.3" from the root project
npm ERR!   peer react@">=16.3" from @deck.gl/[email protected]
npm ERR!   node_modules/@deck.gl/react
npm ERR!     peer @deck.gl/react@"~8.6.7" from @hms-dbmi/[email protected]
npm ERR!     node_modules/@hms-dbmi/viv
npm ERR!       @hms-dbmi/viv@"*" from the root project
npm ERR!   1 more (react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.12.0" from @hms-dbmi/[email protected]
npm ERR! node_modules/@hms-dbmi/viv
npm ERR!   @hms-dbmi/viv@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/wmoore/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wmoore/.npm/_logs/2022-05-25T13_49_33_339Z-debug-0.log

So then I tried the same again but with react 16.12

npm install [email protected]
npm install [email protected]
npm install deck.gl @luma.gl/core
npm install @hms-dbmi/viv

This looked good!

So I added an App.jsx using the first example at http://viv.gehlenborglab.org/
Renamed main.js to main.jsx etc to render <App/>.

But now I think I'm running into other issues with vite, maybe due to trying to use React in a vanilla vite project without really understanding what I'm doing:

npm run dev

  vite v2.9.9 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 70ms.

✘ [ERROR] No matching export in "browser-external:worker_threads" for import "Worker"

    node_modules/@loaders.gl/worker-utils/dist/esm/lib/worker-farm/worker-thread.js:2:9:
      2 │ import { Worker as NodeWorker } from 'worker_threads';
        ╵          ~~~~~~

3:20:26 PM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@loaders.gl/worker-utils/dist/esm/lib/worker-farm/worker-thread.js:2:9: ERROR: No matching export in "browser-external:worker_threads" for import "Worker"
    at failureErrorWithLog (/Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:1603:15)
    at /Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:1249:28
    at runOnEndCallbacks (/Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:1034:63)
    at buildResponseToResult (/Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:1247:7)
    at /Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:1356:14
    at /Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/Users/wmoore/Desktop/VITE/vite-vanilla2/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:520:28)
    at addChunk (node:internal/streams/readable:315:12)
Vite Error, /node_modules/.vite/deps/react.js?v=d3f2af87 optimized info should be defined
Vite Error, /node_modules/.vite/deps/react-dom.js?v=d3f2af87 optimized info should be defined
Vite Error, /node_modules/.vite/deps/react.js?v=d3f2af87 optimized info should be defined
Vite Error, /node_modules/.vite/deps/@hms-dbmi_viv.js?v=d3f2af87 optimized info should be defined

So I tried to start with a react project from vite...

npm create vite@latest
cd vite-react
# replaced `react@18` with `"react": "^16.12.0"`, and `"react-dom": "^16.12.0"`. Removed `@types/react` from devDependencies as they weren't found for react `16.12.0`
npm install
npm install deck.gl @luma.gl/core
npm install @hms-dbmi/viv

npm run dev
[vite] Internal server error: Failed to resolve import "react-dom/client" from "src/main.jsx".

I removed the /client from import ReactDOM from 'react-dom/client'
and edited main.jsx to use ReactDOM.render(<App />, document.getElementById('root'))

npm run dev

looking good...

So I replaced the App.jsx with the example from viv docs and I now get:

Vite Error, /node_modules/.vite/deps/@hms-dbmi_viv.js?v=f58c7ea8 optimized info should be defined (x3)

So, maybe this is more of a vite issue now...

1 reply

ilan-gold May 27, 2022
Maintainer

@manzt is this related to the bundling of the worker we were having trouble with in Chrome?

will-moore · 2022-05-25T14:54:35Z

will-moore
May 25, 2022
Author

In the meantime I have been experimenting with vanilla JS to render data from zarr.js to a canvas for smallish images/thumbnails. See https://ome-ngff-validator.netlify.app/?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/9836842.zarr
(code e.g. https://github.com/will-moore/ome-ngff-validator/blob/c8e3275832513d0bb81edae2df6954f0483c4204/utils.js#L93)

1 reply

ilan-gold May 27, 2022
Maintainer

Love it @will-moore!

manzt · 2022-05-27T19:10:33Z

manzt
May 27, 2022
Maintainer

In general I think our specification of peer dependencies causes a lot of issues for initial installs (and our requirements for react/react-dom are too strict and outdated). For a clean project I tried:

npm create vite # select react
cd viv-demo
npm install 
npm install @hms-dbmi/viv deck.gl@~8.6.7 --legacy-peer-deps
npm run dev # copy and paste App.jsx from the docs

and it seemed to work. If an issue persists, it might be due to: visgl/deck.gl#6906, which you'll need to pin a version of @loaders.gl/core.

0 replies

manzt · 2022-07-01T18:41:59Z

manzt
Jul 1, 2022
Maintainer

Looked at this today. The primary issue is react as a peer dependency. create vite creates a project with react/react-dom 18. For the time being the best route would be to:

npm create vite viv-app # select react
cd viv-app
npm install react@16 react-dom@16 @types/@react@16 @types/react-dom@16 # downgrade react
npm install @hms-dbmi/viv # peer deps automatically with npm >=v7

and then in src/main.jsx...

- import ReactDOM from 'react-dom/client'
+ import ReactDOM from 'react-dom'

- ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
- )
+ ReactDOM.render(
+   <React.StrictMode>
+     <App />
+   </React.StrictMode>,
+   document.getElementById('root')
+ )

We should hopefully be able to support latest create-vite soon!

1 reply

will-moore Jul 3, 2022
Author

Thanks @manzt

will-moore · 2022-11-23T23:07:19Z

will-moore
Nov 23, 2022
Author

Just getting back to this again...

I followed those pointers (thanks) and managed to get the viv-react app running.
I used a bunch of code from vizarr for loading a Zarr image etc...
The code is at https://github.com/will-moore/viv-examples/tree/master/viv-react
However, I'm not managing to get an Image to show on screen.

I see that the .zattrs and all the .zarray files are loaded for the pyramid, but there's no chunks being loaded.

I also created a vanilla-Js version of the same app, which also has exactly the same issue:
https://github.com/will-moore/viv-examples/tree/master/js_deckgl

Any idea what I'm missing in either of these examples?

Many thanks!

1 reply

ilan-gold Nov 24, 2022
Maintainer

It looks like the returned value of loadOmeroMultiscales is an object that you have defined, but doesn't quite look like our layer definition. See here for the list of props to pass to the layer and here for a quick demo that (probably) should work, including a full definition of a props object that will render something:

// Hardcoded rendering properties.
const props = {
  selections: [
    { z: 0, t: 0, c: 0 },
    { z: 0, t: 0, c: 1 },
    { z: 0, t: 0, c: 2 },
  ],
  colors: [
    [0, 0, 255],
    [0, 255, 0],
    [255, 0, 0],
  ],
  contrastLimits: [
    [0, 255],
    [0, 255],
    [0, 255],
  ],
  channelsVisible: [true, true, true],
}

will-moore · 2022-11-24T15:10:36Z

will-moore
Nov 24, 2022
Author

Thanks @ilan-gold - loadOmeroMultiscales() is from vizarr code, but I missed the mapping between it's returned object and the required layerProps.
Both those examples are working now, Cheers!

1 reply

ilan-gold Nov 24, 2022
Maintainer

np!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

installing into vite project #602

{{title}}

Replies: 7 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

installing into vite project #602

will-moore May 19, 2022

Replies: 7 comments · 6 replies

will-moore May 20, 2022 Author

ilan-gold May 21, 2022 Maintainer

will-moore May 25, 2022 Author

ilan-gold May 27, 2022 Maintainer

will-moore May 25, 2022 Author

ilan-gold May 27, 2022 Maintainer

manzt May 27, 2022 Maintainer

manzt Jul 1, 2022 Maintainer

will-moore Jul 3, 2022 Author

will-moore Nov 23, 2022 Author

ilan-gold Nov 24, 2022 Maintainer

will-moore Nov 24, 2022 Author

ilan-gold Nov 24, 2022 Maintainer

will-moore
May 19, 2022

Replies: 7 comments 6 replies

will-moore
May 20, 2022
Author

ilan-gold May 21, 2022
Maintainer

will-moore
May 25, 2022
Author

ilan-gold May 27, 2022
Maintainer

will-moore
May 25, 2022
Author

ilan-gold May 27, 2022
Maintainer

manzt
May 27, 2022
Maintainer

manzt
Jul 1, 2022
Maintainer

will-moore Jul 3, 2022
Author

will-moore
Nov 23, 2022
Author

ilan-gold Nov 24, 2022
Maintainer

will-moore
Nov 24, 2022
Author

ilan-gold Nov 24, 2022
Maintainer