Mirador and Webpack 5

[rsimon]

I'm trying to instantiate Mirador (v3.3.0) in a project using Webpack 5. I'm getting the following build error:

ERROR in ./node_modules/normalize-url/index.js 29:45-63
Module not found: Error: Can't resolve 'url' in './node_modules/normalize-url'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

Do you have any advice on how to best handle this?

In addition, I get the following warning:

WARNING in ./node_modules/react-mosaic-component/lib/util/OptionalBlueprint.js 55:4-40
Module not found: Error: Can't resolve '@blueprintjs/core' in './node_modules/react-mosaic-component/lib/util'
@ ./node_modules/react-mosaic-component/lib/MosaicWindow.js 88:26-61
 @ ./node_modules/react-mosaic-component/lib/index.js 158:21-46
 @ ./node_modules/mirador/dist/es/src/components/WorkspaceMosaic.js 107:0-125 212:22-31 219:17-45 234:15-43 253:46-58 283:46-74
 @ ./node_modules/mirador/dist/es/src/containers/WorkspaceMosaic.js 60:0-64 105:23-38
 @ ./node_modules/mirador/dist/es/src/components/Workspace.js 111:0-60 179:50-65
 @ ./node_modules/mirador/dist/es/src/containers/Workspace.js 6:0-52 66:23-32
 @ ./node_modules/mirador/dist/es/src/components/WorkspaceArea.js 110:0-48 151:121-130
 @ ./node_modules/mirador/dist/es/src/containers/WorkspaceArea.js 6:0-60 45:23-36
 @ ./node_modules/mirador/dist/es/src/components/App.js 110:9-46
 @ ./node_modules/mirador/dist/es/src/lib/MiradorViewer.js 26:0-39 57:42-48
 @ ./node_modules/mirador/dist/es/src/init.js 1:0-48 17:13-26
 @ ./node_modules/mirador/dist/es/src/index.js 54:0-26 56:47-51
 @ ./src/index.js 3:0-30 11:22-36

and another identifcal one Module not found: [...] @blueprintjs/icons.

Probably not a big deal, since it's just warnings. Just thought I'd report.

[D-Groenewegen]

[Edited] I had the same issue (and others, which added some noise), but this utimately worked for me:

1. Add this to your package.json > dependencies:

"url": "^0.11.0",

2. Make sure that url (https://www.npmjs.com/package/url) is installed.

3. To webpack.config json > module.exports, add

 resolve: {
   fallback: {
     "url": require.resolve('/url')
   }
 },

If you're unfamiliar with the dot syntax (resolve.fallback), this may not seem obvious to you.

It's probably worth updating the integration example to reflect this situation.

[enriquediaz]

Hi @D-Groenewegen just writing for some clarification: when you say "it's probably worth updating the integration example" do you mean an example that's in the Mirador documentation or elsewhere?

[D-Groenewegen]

Hi, it's been a while, but I suppose that comment was referring to the documentation about integrating Mirador, which is linked from the main page https://github.com/ProjectMirador/mirador.