Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update plugin for Mirador 4 #49

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

Update plugin for Mirador 4 #49

wants to merge 18 commits into from

Conversation

cbeer
Copy link
Contributor

@cbeer cbeer commented Mar 15, 2024 •
edited
Loading

These changes prepare the plugin for the Mirador 4/MUI5/React18 update:

  • use RTL instead of Enzyme (not compatible with React 17+)
  • Replace nwb with babel/webpack (nwb doesn't support webpack 5+, and might be abandoned)

Then we do the Mirador 4 (etc) update:

  • update the package.json dependencies
  • run the MUI 5 codemods (or do them manually), and fix up anything it gets wrong
  • update whatever code or other dependencies need work
  • switch out mui/styles for emotion (there's another codemod to do this, but it might be better + easier to do manually.. the codemod gets a lot wrong)

cbeer added 17 commits March 15, 2024 11:17
@cbeer
Move code from miradorImageToolsPlugin.js to the src/index.js
ccebfb4
@cbeer
Pass width down to the individual image tools
6b9dfba
@cbeer
Replace enzyme with react-testing-library
a233a50
@cbeer
Use alpha instead of fade
15e46ce
@cbeer
Import the upstream babel configuration
1e035f0
@cbeer
Replace nwb with webpack v5 directly
8e4e9da
@cbeer
Update to Mirador 4 dependencies
c64aee5
@cbeer
tell jest to ignore react-dnd dependencies
a8edb1f
@cbeer
Run the MUI v5.0.0/preset-safe codemods
4bcd720
@cbeer
Don't use adaptV4Theme; upstream is using MUI5 now
beb7e54
@cbeer
Add the sizeMe placeholder for jest testing
b7e3497
@cbeer
Update redux-thunk import
c317dba
@cbeer
Update testing-library/react dependency
2602654
@cbeer
Use the connected MiradorMenuButton so we don't need to pass containe…
afc3738 
…rId everywhere
@cbeer
Update eslint
bd8c03a
@cbeer
Handle responsive design using a placeholder container (and it's resp…
b077630 
…onsive to the actual Mirador window size, not the browser viewport)
@cbeer
Switch from mui/styles to emotion
8d88064
@cbeer cbeer marked this pull request as ready for review March 15, 2024 20:48
@cbeer cbeer changed the title Mirador4 compat clean Update plugin for Mirador 4 Mar 15, 2024
@cbeer cbeer mentioned this pull request Mar 15, 2024
Closed
@marlo-longley
Copy link
Member

Hi @cbeer -- I tested this using the mirador-integration repo code which imports mirador-image-tools. I pulled this branch down and used a local version of the plugin.

Some context: mirador-integration is set up to use the es6 module build using webpack or parcel, depending on the build.

I had some difficulties importing the es version of this branch of image tools due to the webpack config, I think. After editing the webpack.config.js of this branch to more closely resemble what we have in mirador itself, I had success. This meant standardizing the outputs into a /dist folder, and then importing it similarly to how we import mirador:

import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools/dist/es/src/index';

So in the output block of webpack.config.js I changed it to:

  output: {
    filename: 'mirador-image-tools.min.js',
    hashFunction: 'md5',
    library: 'MiradorImageTools',
    libraryExport: 'default',
    libraryTarget: 'umd',
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
  },

And then the build itself in package.json

  "name": "mirador-image-tools",
  "version": "1.0.0-alpha.1",
  "description": "mirador-image-tools React component",
  "main": "dist/cjs/src/index.js",
  "module": "dist/es/src/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "NODE_ENV=production webpack --mode=production",
    "build:demo": "NODE_ENV=development webpack --mode=development",
    "build:es": "mkdir -p dist/es && cp -r src dist/es && NODE_ENV=production MODULE_FORMAT=es npx babel dist/es -d dist/es",
    "build:cjs": "mkdir -p dist/cjs && cp -r src dist/cjs && NODE_ENV=production MODULE_FORMAT=cjs npx babel dist/cjs -d dist/cjs",
    "clean": "rm -rf ./demo/dist && rm -rf ./dist",
    "lint": "eslint ./src ./__tests__",
    ... [rest of the file is the same]

Hopefully this is helpful, but the main takeaway is that es imports didn't work for me in mirador-integration with this current webpack config.

@ColeDCrawford
Copy link

Similar experience as @marlo-longley. I could not get this branch to build directly from Github in a fork of mirador-integrations which I tried to update to M4. I cloned mirador-image-tools and linked it locally; Mirador would not display any images with the current version of this branch. I tried updating my local clone with Marlo's suggested changes and that didn't work either. I'm getting these errors when running npm run parcel:

Details ``` localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received. index.js:1 Warning: MosaicRenderPreview: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at MosaicRenderPreview (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:22530:19) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at div at div at InternalMosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:21834:47) at ConnectedInternalMosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:21999:37) at MosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:22061:42) at div at div at MosaicRoot (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:20199:47) at div at MosaicWithoutDragDropContext (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:19939:24) at DndProvider (http://localhost:1234/index.975ef6c8.js:114981:11) at Mosaic (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:20051:42) at http://localhost:1234/index.975ef6c8.js:50543:43 at WorkspaceMosaic (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:19496:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at div at http://localhost:1234/index.975ef6c8.js:50543:43 at div at IIIFDropTarget (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:23781:26) at Workspace (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:12600:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at main at http://localhost:1234/index.975ef6c8.js:50543:43 at div at http://localhost:1234/index.975ef6c8.js:50543:43 at WorkspaceArea (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:794:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at Suspense at DndProvider (http://localhost:1234/index.975ef6c8.js:114981:11) at MaybeDndProvider (http://localhost:1234/index.975ef6c8.js:114664:28) at RtlProvider (http://localhost:1234/index.975ef6c8.js:57464:11) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56338:13) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56233:13) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:60027:18) at StyledEngineProvider (http://localhost:1234/index.975ef6c8.js:52558:13) at I18nextProvider (http://localhost:1234/index.975ef6c8.js:30424:11) at div at FullScreen (http://localhost:1234/index.975ef6c8.js:114807:23) at FullScreenShim (http://localhost:1234/index.975ef6c8.js:114679:25) at AppProviders (http://localhost:1234/index.975ef6c8.js:114693:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at PluginProvider (http://localhost:1234/index.975ef6c8.js:27861:25) at App (http://localhost:1234/index.975ef6c8.js:27767:9) at Provider (http://localhost:1234/index.975ef6c8.js:27445:21) console. @ index.js:1 Show 1 more frame Show less index.js:1 Warning: BackgroundPluginArea: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. at BackgroundPluginArea at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at main at http://localhost:1234/index.975ef6c8.js:50543:43 at div at http://localhost:1234/index.975ef6c8.js:50543:43 at WorkspaceArea (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:794:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at Suspense at DndProvider (http://localhost:1234/index.975ef6c8.js:114981:11) at MaybeDndProvider (http://localhost:1234/index.975ef6c8.js:114664:28) at RtlProvider (http://localhost:1234/index.975ef6c8.js:57464:11) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56338:13) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56233:13) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:60027:18) at StyledEngineProvider (http://localhost:1234/index.975ef6c8.js:52558:13) at I18nextProvider (http://localhost:1234/index.975ef6c8.js:30424:11) at div at FullScreen (http://localhost:1234/index.975ef6c8.js:114807:23) at FullScreenShim (http://localhost:1234/index.975ef6c8.js:114679:25) at AppProviders (http://localhost:1234/index.975ef6c8.js:114693:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at PluginProvider (http://localhost:1234/index.975ef6c8.js:27861:25) at App (http://localhost:1234/index.975ef6c8.js:27767:9) at Provider (http://localhost:1234/index.975ef6c8.js:27445:21) console. @ index.js:1 Show 1 more frame Show less index.js:1 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node at SizeAwareComponent (http://localhost:1234/index.975ef6c8.js:74632:17) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at WindowSideBarInfoPanel (http://localhost:1234/index.975ef6c8.js:79867:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at CompanionWindowFactory (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:17116:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at div at http://localhost:1234/index.975ef6c8.js:50543:43 at Transition (http://localhost:1234/index.975ef6c8.js:64392:34) at Slide (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:4344:48) at div at http://localhost:1234/index.975ef6c8.js:50543:43 at CompanionArea (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:16871:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at div at http://localhost:1234/index.975ef6c8.js:50543:43 at PrimaryWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:15838:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at http://localhost:1234/index.975ef6c8.js:50543:43 at div at http://localhost:1234/index.975ef6c8.js:50543:43 at div at http://localhost:1234/index.975ef6c8.js:50543:43 at section at http://localhost:1234/index.975ef6c8.js:50543:43 at Paper (http://localhost:1234/index.975ef6c8.js:48213:53) at http://localhost:1234/index.975ef6c8.js:50543:43 at Window (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:13017:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at div at div at InternalMosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:21834:47) at ConnectedInternalMosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:21999:37) at MosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:22061:42) at div at div at MosaicRoot (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:20199:47) at div at MosaicWithoutDragDropContext (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:19939:24) at DndProvider (http://localhost:1234/index.975ef6c8.js:114981:11) at Mosaic (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:20051:42) at http://localhost:1234/index.975ef6c8.js:50543:43 at WorkspaceMosaic (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:19496:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at div at http://localhost:1234/index.975ef6c8.js:50543:43 at div at IIIFDropTarget (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:23781:26) at Workspace (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:12600:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at main at http://localhost:1234/index.975ef6c8.js:50543:43 at div at http://localhost:1234/index.975ef6c8.js:50543:43 at WorkspaceArea (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:794:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19) at Suspense at DndProvider (http://localhost:1234/index.975ef6c8.js:114981:11) at MaybeDndProvider (http://localhost:1234/index.975ef6c8.js:114664:28) at RtlProvider (http://localhost:1234/index.975ef6c8.js:57464:11) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56338:13) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56233:13) at ThemeProvider (http://localhost:1234/index.975ef6c8.js:60027:18) at StyledEngineProvider (http://localhost:1234/index.975ef6c8.js:52558:13) at I18nextProvider (http://localhost:1234/index.975ef6c8.js:30424:11) at div at FullScreen (http://localhost:1234/index.975ef6c8.js:114807:23) at FullScreenShim (http://localhost:1234/index.975ef6c8.js:114679:25) at AppProviders (http://localhost:1234/index.975ef6c8.js:114693:9) at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47) at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80) at PluginProvider (http://localhost:1234/index.975ef6c8.js:27861:25) at App (http://localhost:1234/index.975ef6c8.js:27767:9) at Provider (http://localhost:1234/index.975ef6c8.js:27445:21) console. @ index.js:1 Show 1 more frame Show less index.2179ba3b.js:1 no user in cache de @ index.2179ba3b.js:1 await in de (async) (anonymous) @ index.2179ba3b.js:1 Show 2 more frames Show less index.js:1 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node console. @ index.js:1 Show 1 more frame Show less 2index.js:1 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. console. @ index.js:1 Show 1 more frame Show less react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at useContext (react.development.js:1618:21) at emotion-element-43c6fea0.browser.esm.js:37:26 at renderWithHooks (react-dom.development.js:15486:18) at updateForwardRef (react-dom.development.js:19245:20) at beginWork (react-dom.development.js:21675:16) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) at invokeGuardedCallback (react-dom.development.js:4277:31) at beginWork$1 (react-dom.development.js:27490:7) at performUnitOfWork (react-dom.development.js:26596:12) at workLoopSync (react-dom.development.js:26505:5) at renderRootSync (react-dom.development.js:26473:7) at performConcurrentWorkOnRoot (react-dom.development.js:25777:74) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14) at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21) useContext @ react.development.js:1618 (anonymous) @ emotion-element-43c6fea0.browser.esm.js:37 renderWithHooks @ react-dom.development.js:15486 updateForwardRef @ react-dom.development.js:19245 beginWork @ react-dom.development.js:21675 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27490 performUnitOfWork @ react-dom.development.js:26596 workLoopSync @ react-dom.development.js:26505 renderRootSync @ react-dom.development.js:26473 performConcurrentWorkOnRoot @ react-dom.development.js:25777 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 Show 16 more frames Show less 2index.js:1 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. console. @ index.js:1 Show 1 more frame Show less react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext') at useContext (react.development.js:1618:21) at emotion-element-43c6fea0.browser.esm.js:37:26 at renderWithHooks (react-dom.development.js:15486:18) at updateForwardRef (react-dom.development.js:19245:20) at beginWork (react-dom.development.js:21675:16) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16) at invokeGuardedCallback (react-dom.development.js:4277:31) at beginWork$1 (react-dom.development.js:27490:7) at performUnitOfWork (react-dom.development.js:26596:12) at workLoopSync (react-dom.development.js:26505:5) at renderRootSync (react-dom.development.js:26473:7) at recoverFromConcurrentError (react-dom.development.js:25889:20) at performConcurrentWorkOnRoot (react-dom.development.js:25789:22) at workLoop (scheduler.development.js:266:34) at flushWork (scheduler.development.js:239:14) at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21) useContext @ react.development.js:1618 (anonymous) @ emotion-element-43c6fea0.browser.esm.js:37 renderWithHooks @ react-dom.development.js:15486 updateForwardRef @ react-dom.development.js:19245 beginWork @ react-dom.development.js:21675 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27490 performUnitOfWork @ react-dom.development.js:26596 workLoopSync @ react-dom.development.js:26505 renderRootSync @ react-dom.development.js:26473 recoverFromConcurrentError @ react-dom.development.js:25889 performConcurrentWorkOnRoot @ react-dom.development.js:25789 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 Show 17 more frames Show less index.js:1 The above error occurred in the component: 
at http://localhost:1234/index.975ef6c8.js:175952:43
at MiradorImageTools (http://localhost:1234/index.975ef6c8.js:145085:9)
at ReferenceWrapper (http://localhost:1234/index.975ef6c8.js:147775:9)
at SizeMeRenderer (http://localhost:1234/index.975ef6c8.js:147813:33)
at SizeAwareComponent (http://localhost:1234/index.975ef6c8.js:147862:17)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at http://localhost:1234/index.975ef6c8.js:81758:34
at section
at http://localhost:1234/index.975ef6c8.js:50543:43
at OpenSeadragonViewer (http://localhost:1234/OpenSeadragonViewer.570eae9d.js?1716842930664:852:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19)
at Suspense
at WindowViewer (http://localhost:1234/WindowViewer.c68b16d5.js?1716842930486:712:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at Suspense
at div
at http://localhost:1234/index.975ef6c8.js:50543:43
at PrimaryWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:15838:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at http://localhost:1234/index.975ef6c8.js:50543:43
at div
at http://localhost:1234/index.975ef6c8.js:50543:43
at div
at http://localhost:1234/index.975ef6c8.js:50543:43
at section
at http://localhost:1234/index.975ef6c8.js:50543:43
at Paper (http://localhost:1234/index.975ef6c8.js:48213:53)
at http://localhost:1234/index.975ef6c8.js:50543:43
at Window (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:13017:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19)
at div
at div
at InternalMosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:21834:47)
at ConnectedInternalMosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:21999:37)
at MosaicWindow (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:22061:42)
at div
at div
at MosaicRoot (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:20199:47)
at div
at MosaicWithoutDragDropContext (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:19939:24)
at DndProvider (http://localhost:1234/index.975ef6c8.js:114981:11)
at Mosaic (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:20051:42)
at http://localhost:1234/index.975ef6c8.js:50543:43
at WorkspaceMosaic (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:19496:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at div
at http://localhost:1234/index.975ef6c8.js:50543:43
at div
at IIIFDropTarget (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:23781:26)
at Workspace (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:12600:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19)
at main
at http://localhost:1234/index.975ef6c8.js:50543:43
at div
at http://localhost:1234/index.975ef6c8.js:50543:43
at WorkspaceArea (http://localhost:1234/WorkspaceArea.764e32ad.js?1716842929987:794:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at I18nextWithTranslation (http://localhost:1234/index.975ef6c8.js:30379:19)
at Suspense
at DndProvider (http://localhost:1234/index.975ef6c8.js:114981:11)
at MaybeDndProvider (http://localhost:1234/index.975ef6c8.js:114664:28)
at RtlProvider (http://localhost:1234/index.975ef6c8.js:57464:11)
at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56338:13)
at ThemeProvider (http://localhost:1234/index.975ef6c8.js:56233:13)
at ThemeProvider (http://localhost:1234/index.975ef6c8.js:60027:18)
at StyledEngineProvider (http://localhost:1234/index.975ef6c8.js:52558:13)
at I18nextProvider (http://localhost:1234/index.975ef6c8.js:30424:11)
at div
at FullScreen (http://localhost:1234/index.975ef6c8.js:114807:23)
at FullScreenShim (http://localhost:1234/index.975ef6c8.js:114679:25)
at AppProviders (http://localhost:1234/index.975ef6c8.js:114693:9)
at PluginHoc (http://localhost:1234/index.975ef6c8.js:30551:47)
at ConnectFunction (http://localhost:1234/index.975ef6c8.js:27284:80)
at PluginProvider (http://localhost:1234/index.975ef6c8.js:27861:25)
at App (http://localhost:1234/index.975ef6c8.js:27767:9)
at Provider (http://localhost:1234/index.975ef6c8.js:27445:21)

React will try to recreate this component tree from scratch using the error boundary you provided, WindowViewer.
console. @ index.js:1
Show 1 more frame
Show less
2index.js:1 Could not get the stack frames of error: Error: "/mirador-image-tools/node_modules/react/cjs/react.development.js" is not in the SourceMap.
at c.sourceContentFor (index.js:1:28259)
at e.value (index.js:1:42421)
at index.js:1:44811
at Array.map ()
at index.js:1:44586
at s (index.js:1:14189)
at Generator._invoke (index.js:1:13977)
at Generator.next (index.js:1:14614)
at N (index.js:1:41680)
at i (index.js:1:41883)
```

And local Python server for the webpack version:

Webpack details ``` TypeError: Cannot read properties of null (reading 'useContext') at t.useContext (main.js:2:337940) at main.js:2:10100 at ma (main.js:152:330193) at xs (main.js:152:342674) at Ol (main.js:152:391181) at bc (main.js:152:378386) at vc (main.js:152:378314) at mc (main.js:152:378177) at ic (main.js:152:375012) at oc (main.js:152:373568) ```

@fstoe
Copy link

fstoe commented Jul 31, 2024

Hello,
I made the image-cropper m4-compat-clean branch work as it is.
For it to work I forked the mirador-integration repro, updated to react and webpack and installed the locally bundled image-tools from this branch (i built it with build:es)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@cbeer @marlo-longley @ColeDCrawford @fstoe