For example, can I reuse media-chrome in LWC ?
https://github.com/muxinc/media-chrome : look for "Bundled with npm"
Here is my failing example in an LWR Node app :
<!-- player.html -->
<template>
<media-controller>
<video
slot="media"
src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4"
></video>
</media-controller>
</template>
// player.js
import { LightningElement,api } from 'lwc'
import 'media-chrome'
export default class Player extends LightningElement {}
yarn add media-chrome
yarn dev
Error :
[ERROR]resolveNpmModules(esbuild): {
specifier: 'media/controller',
dest: '/Users/rupert/.../myapp/__lwr_cache__/web_modules'
}
LwrUnresolvableError [DiagnosticsError]: 404: Could not find module entry with specifier "media/controller"
at createSingleDiagnosticError (file:///Users/rupert/.../myapp/node_modules/@lwrjs/diagnostics/build/es/errors.js:6:12)
at LwrModuleRegistry.delegateGetModuleEntryOnServices (file:///Users/rupert/.../myapp/node_modules/@lwrjs/module-registry/build/es/index.js:217:15)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async resolveExternalImport (file:///Users/rupert/.../myapp/node_modules/@lwrjs/module-registry/build/es/module-record.js:39:35)
at async getModuleRecord (file:///Users/rupert/.../myapp/node_modules/@lwrjs/module-registry/build/es/module-record.js:80:44)
at async LwrModuleRegistry.createModuleDefinition (file:///Users/rupert/.../myapp/node_modules/@lwrjs/module-registry/build/es/index.js:106:30)
at async LwrModuleRegistry.getLinkedModule (file:///Users/rupert/.../myapp/node_modules/@lwrjs/module-registry/build/es/index.js:134:27)
at async file:///Users/rupert/.../myapp/node_modules/@lwrjs/core/build/es/middlewares/api-middleware.js:206:31
at async file:///Users/rupert/.../myapp/node_modules/@lwrjs/server/build/es/express/express-server.js:59:13 {
_memoMessage: undefined,
_message: '404: Could not find module entry with specifier "media/controller"',
diagnostics: [ { description: [Object] } ]
}
Watching: /Users/rupert/.../myapp/src/modules/my/player/player.html
It's obvious : LWC/LWR does not know how to load the media-controller component.
How do I achieve this ?
If it's an LWC package, you need to add it as a module in your lwr.config,json config file if you want to use the components, as shown in the doc:
// lwr.config.json
{
"lwc": {
"modules": [
{ "dir": "$rootDir/src/modules" },
{ "npm": "media-chrome" }
]
}
}
