openseadragon package error with Vite

[viconx98]

I am fairly new to using annotorious and annotorious-openseadragon so apologies if this is a naïve question.

Question: I have a React project with Vite as build tool, If I want to use annotorious-openseadragon with it do I need to install the openseadragon package separately?

The Getting started guide doesn't mention anything about installing openseadragon explicitly and it seems to work as expected for development build.

But when I try to deploy a production build on Render I keep getting the following error.

Sep 7 07:32:26 PM  > render_build_test@0.0.0 build /opt/render/project/src
Sep 7 07:32:26 PM  > vite build
Sep 7 07:32:26 PM  
Sep 7 07:32:26 PM  vite v4.4.9 building for production...
Sep 7 07:32:26 PM  transforming...
Sep 7 07:32:27 PM  ✓ 5 modules transformed.
Sep 7 07:32:27 PM  ✓ built in 132ms
Sep 7 07:32:27 PM  [vite]: Rollup failed to resolve import "openseadragon" from "/opt/render/project/src/src/App.tsx".
Sep 7 07:32:27 PM  This is most likely unintended because it can break your application at runtime.
Sep 7 07:32:27 PM  If you do want to externalize this module explicitly add it to
Sep 7 07:32:27 PM  `build.rollupOptions.external`
Sep 7 07:32:27 PM  error during build:
Sep 7 07:32:27 PM  Error: [vite]: Rollup failed to resolve import "openseadragon" from "/opt/render/project/src/src/App.tsx".
Sep 7 07:32:27 PM  This is most likely unintended because it can break your application at runtime.
Sep 7 07:32:27 PM  If you do want to externalize this module explicitly add it to
Sep 7 07:32:27 PM  `build.rollupOptions.external`
Sep 7 07:32:27 PM      at viteWarn (file:///opt/render/project/src/node_modules/vite/dist/node/chunks/dep-df561101.js:48142:27)
Sep 7 07:32:27 PM      at onwarn (file:///opt/render/project/src/node_modules/@vitejs/plugin-react/dist/index.mjs:238:9)
Sep 7 07:32:27 PM      at onRollupWarning (file:///opt/render/project/src/node_modules/vite/dist/node/chunks/dep-df561101.js:48171:9)
Sep 7 07:32:27 PM      at onwarn (file:///opt/render/project/src/node_modules/vite/dist/node/chunks/dep-df561101.js:47902:13)
Sep 7 07:32:27 PM      at file:///opt/render/project/src/node_modules/rollup/dist/es/shared/node-entry.js:24250:13
Sep 7 07:32:27 PM      at Object.logger [as onLog] (file:///opt/render/project/src/node_modules/rollup/dist/es/shared/node-entry.js:25924:9)
Sep 7 07:32:27 PM      at ModuleLoader.handleInvalidResolvedId (file:///opt/render/project/src/node_modules/rollup/dist/es/shared/node-entry.js:24836:26)
Sep 7 07:32:27 PM      at file:///opt/render/project/src/node_modules/rollup/dist/es/shared/node-entry.js:24796:26
Sep 7 07:32:27 PM      at processTicksAndRejections (internal/process/task_queues.js:95:5)

Looking at the logs it seems it can't find the openseadragon package. I am not entirely familiar with Vite's build process but it may be because openseadragon is listed as peerDependancy of annotorious-openseadragon

Adding openseadragon as a direct dependency (npm i openseadragon) to my project makes this error go away so I am slightly confused as to what is the correct approach here.

I am happy to share more details if needed. Thanks!

[rsimon]

Hi, the build config is a bit brittle... (one of the reasons why I'm working on Annotorious 3, which will be a full rewrite)

But, yes, OpenSeadragon is not automatically pulled in by annotorious-openseadragon. Installing it as a direct dependency to your project is the correct way to go.

[viconx98]

Thanks for the quick response. I am looking forward to v3!

Going to close this issue since it answers my question. :)