Lib-jitsi-meet integration, packaging, versioning moving forward

I’ve run into some roadblocks lately using the lib-jitsi-meet library and have accumulated some questions about various angles of this. I’ll try and consolidate all of the questions/concerns here:

  • It looks like @solyd’s repo was the best reccomended practice for typed installation via npm but now that the repo is read-only and not being maintained, what is?

  • how does versioning work in lib-jitsi-meet? i see in my server that the version included in the index.html script tag is v=6854 but the highest version in the lib-jitsi-meet repo is 1557. how should these be correlated? and why is the version in the latest jitsi-meet master branch v=139? Is matching this version to the serverside package versions what is referred to? If so, how to correlate this version number with the versions in the lib-jitsi-meet repo?

  • though the typing is a work in progress for @jitsi/lib-jitsi-meet is it still recommended to use these types in development? or should that app be treated as totally untyped? Are there and new guidelines for using this official repo in apps, React in particular, since the @solyd repo is no longer being maintained?

My team and I have been developing prototype apps using the @solyd lib but we have run into some problems and wonder if are caused by version mis-matches between this lib and our server versions. Now that we see the @solyd lib, and its predecessors, are no longer being maintained, we are wondering how to reliably build upon the lib-jitsi-meet package moving forward.

Many thanks!

1 Like

The versions you see in index.html are only to be able to avoid caching. On every build in ci the versions you see in code are replaced with the current jitsi-meet-web debian package version that is currently being built.
This is how versions of lib-jitsi-meet are used in jitsi-meet

These are the versions Releases · jitsi/lib-jitsi-meet · GitHub

Ah, that’s very informative about the way versions are being used. How can I find out what version of lib-jitsi-meet is being used on our server install? The quick install version is bundled and there is no package.json file.

The more difficult problem I mentioned above is how to integrate the library overall though. when installing lib-jitsi-meet via GitHub release as is done in Jitsi Meet, the package cannot be found when trying to import, with error:

Cannot find module 'lib-jitsi-meet' or its corresponding type declarations.

when trying to import from lib-jitsi-meet/dist/esm this error is seen:

Could not find a declaration file for module 'lib-jitsi-meet/dist/esm'. '/Users/dgbau/src/jitsi-lib-test/node_modules/lib-jitsi-meet/dist/esm/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/lib-jitsi-meet` if it exists or add a new declaration (.d.ts) file containing `declare module 'lib-jitsi-meet/dist/esm';`

and when creating a jitsi.d.ts file with declare module 'lib-jitsi-meet'; the import errors go away but then the lib cannot be instantiated, giving a long list of Strophe errors similar to this when trying to serve the app:

      detail: undefined,
      id: '',
      location: {
        column: 9,
        file: 'node_modules/lib-jitsi-meet/dist/esm/JitsiConference.js',
        length: 7,
        line: 14,
        lineText: "import { Strophe } from 'strophe.js';",
        namespace: '',
        suggestion: ''
      notes: [],
      pluginName: '',
      text: 'No matching export in "node_modules/lib-jitsi-meet/node_modules/strophe.js/dist/strophe.esm.js" for import "Strophe"'

We are still very much lost as to how this library can be imported and used in a React app! Now that the @solyd library is no longer being maintained, there are no actively maintained, typed modules to use LJM that we can find.

If anyone who has steps to get around this, your help will be very much appreciated!

Jitsi-meet is a react app.

Load it and start using it.

Hi, thanks very much for the replies. This is the heart of the matter for us, we can’t get it to work in this way, or trying to follow what we see in the JM repo. We have cloned the JM repo and looked around extensively to find how the lib is being implemented but still can’t figure out how to mirror what is working in JM. Your help in getting to the bottom of what we are doing wrong will be very much appreciated, and I’m sure moving towards a working solution for TS React with the official LJM library will be very useful for the whole community. We are certainly very happy to share what works for us as we go forward if we can get some help integrating the package!

We have embedded the script tag as you’ve suggested but that does not enable the lib to be brought into React code and used. Since we are using an NPM install, and not a local minified copy like JM does, we figure that script tag must be something like this:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/src/styles.scss" />
 <script src="node_modules/lib-jitsi-meet/dist/esm/index.js"></script>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>

I do see that in our built JM app on the server, the file "libs/app.bundle.min.js exists and can be imported but this app is already build and bundled… in the JM github repo that i clone, when installing all packages, the only instance of LJM I can see is that in the node_modules folder, exported from node_modules/lib-jitsi-meet//dist/umd/lib-jitsi-meet.min.js

So, we do see how the script tag is needed in the root html file but it is not clear to us where it should link, and also how this script tag relates to the installed package via this dependency in our pacakge.json file:

    "lib-jitsi-meet": "",

we are stuck on is how to actually import the library in the TS files.

import JitsiMeetJS from 'lib-jitsi-meet';

does not work, with the failures posted above.

We see in the JM repo that in react/features/base/lib-jitsi-meet/index.ts the lib is being imported as:

import JitsiMeetJS from './_';
export { JitsiMeetJS as default };

and that seems to refer to the _.native.js and/or _.web.js files, where in _.native.js it is being imported as

import './native';
import JitsiMeetJS from 'lib-jitsi-meet';
export { JitsiMeetJS as default };

and for _.web.js it is is being declared as:

// @flow
declare var JitsiMeetJS: Object;
export default JitsiMeetJS;

but that is where we’re losing understanding of what is going on. I have tried also dropping these files into our project but trying to import JitsiMeetJS from './_' fails. with Cannot find module './_' or its corresponding type declarations. The way that the lib is being imported and used in JM, with this underscore, is using a method we have never seen before, and we can’t understand how to do the same for our own React project.

Apologies for the long post, just trying to describe in better detail the issue we are facing, what we are trying to achieve and what we have already tried. Many thanks again!

This downloads and installs locally that specific lib-jitsi-meet. One you do a make/deploy of you app you also need to copy the lib-jitsi-meet bundle so you can expose it to the client, so you can include it.
For example jitsi-meet does that here: jitsi-meet/Makefile at 77e02a09946ace8600ad68d3617e1b6e39be40b1 · jitsi/jitsi-meet · GitHub
Copies the ljm bundle files to libs folder.

Then you source it like this:

Which is equivalent to you need to have that file in your webserver.