JavaScript API > Import Solace JS API (solclient.js) using ES Module

PubSub+ Event Broker
1

I’ve come across a compatibility issue when importing the solclient.js library as an ES Module:

import './path/to/solclient.js';

Problem:
Importing the UMD build of solclient.js into an ES Module Service Worker (e.g., Chrome extension MV3 with "type": "module" set in the manifest.json file) fails. The worker won’t register, often showing TypeError: Cannot set properties of undefined (setting 'solace') originating from solclient.js.

Cause:
The library’s UMD wrapper uses this to find the global object. In ES Modules, top-level this is undefined, breaking the UMD’s global fallback logic (root["solace"] = factory(); fails because root is undefined).

Workaround (Patch solclient.js):

  1. Locate UMD Invocation: Find the code that passes this as the global object (root) to the UMD wrapper.
    • solclient-full.js (non-minified) (4th line):
/*! For license information please see solclient-full.js.LICENSE.txt */
!function(root, factory) {
    if ("object" === typeof exports && "object" === typeof module) module.exports = factory(); else if ("function" === typeof define && define.amd) define("solace", [], factory); else if ("object" === typeof exports) exports["solace"] = factory(); else root["solace"] = factory();
}(this, () => {
    return (() => {
  • solclient.js (minified):
exports.solace=t():e.solace=t()}(this,(()=>(()=>{var e

  1. Modify: Change the final this in that specific spot to self.

    • solclient-full.js (non-minified):
!function(root, factory) {
    if ("object" === typeof exports && "object" === typeof module) module.exports = factory(); else if ("function" === typeof define && define.amd) define("solace", [], factory); else if ("object" === typeof exports) exports["solace"] = factory(); else root["solace"] = factory();
}(self, () => {
    return (() => {
  • solclient.js (minified):
exports.solace=t():e.solace=t()}(self,(()=>(()=>{var e
  1. Import & Use in Worker:
    • In your module worker (or modules it imports), trigger the script execution:
      import '../lib/solclient.js';
    • Access the API via the worker global self:
      const factoryProps = new self.solace.SolclientFactoryProperties();
let session = self.solace.SolclientFactory.createSession(...);
session.on(self.solace.SessionEventCode.UP_NOTICE, ...);

Why it works: This patch makes the UMD correctly identify the worker’s global scope (self), allowing its fallback mechanism to attach the API object globally, where your module code can then access it.

2

Hi there, I’m Solly AI, I generate responses to your questions using the power of the Solace Agent Mesh:

Please remember that AI technology can make mistakes so ensure that you read our Disclaimer.

AI Generated responses are a work in progress, your help in evaluating my response would be awesome! If my response makes sense, please mark it as a solution or give a :+1:. If my response doesn’t make sense for your topic, please react to it with a :shaking_face:.

I don’t have specific information in the documentation about importing solclient.js as an ES Module in a Service Worker environment. The documentation shows different ways to load the API but does not specifically address ES Module imports in Service Workers.

Here are the documented ways to load the API:

  1. For Node.js:
var solace = require('solclientjs');            // loads production
// OR
var solace = require('solclientjs').production; // loads production
// OR  
var solace = require('solclientjs').full;       // loads full
// OR
var solace = require('solclientjs').debug;      // loads debug
  1. For browser-based JavaScript:
<script src="solclient.js"></script>          <!-- loads production -->
<!-- OR -->
<script src="solclient-full.js"></script>     <!-- loads full -->
<!-- OR -->
<script src="solclient-debug.js"></script>    <!-- loads debug -->

For the most up-to-date information about module loading options, please refer to:

3

Hey @leonard ! Thanks for raising this issue, I have shared it with our team internally and they’re taking a look. Will keep you posted on progress!