How do I use a browser specific vanilla JS library in react with dependancies

js/reactjs product to interface with a janus webrtc gateway. I'm trying to use the janus.js library provided in the meetecho janus-gateway sourcecode as I know that:

A: This library will check whether the browser is compatible with Janus. B: This library is maintained by the core team and kept up to date.

So I know I'm already going to have to give up JSX and use either jQuery or standard JavaScript to manipulate an empty provided by react.

I just need to know how to import scripts that are designed to be imported via a script tag in html, that in itself also has dependancies. Preferably I'd be attempting to not load it on every page of the website, by using a stub index.html file. The project is getting quite large and heavy as is.

Worst comes to worst I'll just have to use one of the other API's (Such as meetecho's restful API) and check browser compatibility myself. But I'd rather not repeat all that work if I don't have to. And also not have to try to work out how webrtc connections work this early in the prototyping stage.

Just trying to get the jQuery dependancy to work first:

//import $ from '../Api/janus/jquery.min.js';

//import $ from 'jquery';
//import jQuery from 'jquery';
//import adapter from 'webrtc-adapter';
const jQuery = require('jquery');

import {Janus as JanusAPI} from "../Api/janus/janus.js";

Error Log:

./src/Api/janus/janus.js
  Line 55:    'error' is not defined    no-undef
  Line 56:    'error' is not defined    no-undef
  Line 57:   'error' is not defined    no-undef
  Line 98:   'adapter' is not defined  no-undef
  Line 161:  'jQuery' is not defined   no-undef
  Line 167:  'adapter' is not defined  no-undef

Search for the keywords to learn more about each error.

Solution

Hi thought I'd answer my own post as I have gotten a bit further.

If you want npm to recognise Janus as a module this piece of documentation has the basics:

https://janus.conf.meetecho.com/docs/js-modules.html

You will likely need to modify the enty point of the janus-gateway npm project to import the required dependancies before npm rollup rolls up the module.

You will then have to modify the rollup config to either include dependancies in the module or look for them in the project where the module is imported, a good starting point on how to do this with rollup can be found here:

https://engineering.mixmax.com/blog/rollup-externals

my module.js from the janus-gateway/npm project

/* eslint-disable */
/*
 * Module shim for rollup.js to work with.
 * Simply re-export Janus from janus.js, the real 'magic' is in the rollup config.
 *
 * Since this counts as 'autogenerated' code, ESLint is instructed to ignore the contents of this file when linting your project.
 */
//var adapter = require('webrtc-adapter');
import adapter from 'webrtc-adapter';

@JANUS_CODE@

export default Janus;

And rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonJS from 'rollup-plugin-commonjs';

import replace from 'rollup-plugin-replace';
import * as fs from 'fs';

export default {
    name: 'Janus',
    input: 'module.js',
    output: {
        strict: false
    },
    plugins: [
        resolve(),
        commonJS({
//              namedExports: {
//
//              }
                include: 'node_modules/**'
        }),
        replace({
            JANUS_CODE: fs.readFileSync('../html/janus.js', 'utf-8'),
            delimiters: ['@','@'],
            includes: 'module.js'
        })
    ]
};

Haven't got to implementing any UI with Janus with this method but I've at least got the API to initialise with default dependacies, and can create/destroy sessions and attach plugins to said sessions.

Hopefully this helps :)