Error on initializing ably.Realtime

[ahadg]

I get this error some times on initializing ably; Error: BufferUtils.toBuffer expected an arraybuffer, typed array, or CryptoJS wordarray at _0x5b9ce7.. [as toBuffer] (leasemagnets.js:20:391027) at _0x5b9ce7.. [as base64Encode] (leasemagnets.js:20:391792) at Object._0x5ac238 [as normaliseOptions] (leasemagnets.js:20:66804) at _0x2c09a0._0x31152f (leasemagnets.js:20:182651) at new _0x2c09a0 (leasemagnets.js:20:347634) at leasemagnets.js:45:398659 at _0x4d1419 (leasemagnets.js:44:60006) at Generator._invoke (leasemagnets.js:44:59346) at Generator.next (leasemagnets.js:44:60804) at _0xba4d5e (leasemagnets.js:1:341460)

┆Issue is synchronized with this Jira Task by Unito

[sync-by-unito[bot]]

➤ Automation for Jira commented:

The link to the corresponding Jira issue is https://ably.atlassian.net/browse/SDK-3657

[owenpearson]

Hey @ahadg, this appears to be an error with encoding the clientId option. Are you able to tell us more about:

1. which web browser you are using? the version would be helpful too.
2. are you using ably-js in a serviceworker/webworker or just on a normal page?
3. how you are bundling the leasemagnets.js file? if you are using webpack or a similar bundler it might help to share the relevant configuration

[ahadg]

sure @owenpearson ,

1. Chrome Version 114.0.5735.133 (Official Build) (arm64)
2. normal page
3. here is webpack config const webpack = require('webpack'); // TODO: Upgrade Webpack version? const JavaScriptObfuscator = require('webpack-obfuscator'); const CopyPlugin = require('copy-webpack-plugin'); // TODO: Use dynamic-cdn-webpack-plugin? const values = require('postcss-modules-values'); const autoprefixer = require('autoprefixer'); const path = require('path'); const dotenv = require('dotenv').config({ path: path.join(__dirname, '.env') });

const _salt = Math.random(); const hash = (str) => Array.from(str + _salt).reduce( (s, c) => (Math.imul(31, s) + c.charCodeAt(0)) | 0, 0 );

const devMode = process.env.NODE_ENV !== 'production';

// babel-plugin-react-css-modules and css-loader generated names must match const generateScopedCSSName = (localName) => devMode ? localName + '' // Tweak names in dev mode to make sure everything works : '' + localName + '_' + hash(localName);

module.exports = { mode: process.env.NODE_ENV || 'development', target: 'web', entry: './src/Embed.js', plugins: [ new CopyPlugin({ patterns: [{ from: 'public', to: '.' }] }), // Copy index.html into dist/ !devMode && new JavaScriptObfuscator(), // TODO: This DOUBLES the bundle size!! new webpack.EnvironmentPlugin(dotenv.parsed), ].filter(Boolean), module: { rules: [ { test: /.(js|jsx)$/, exclude: /(nodemodules|webpack.config.js)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: [ '@babel/plugin-transform-async-to-generator', '@babel/plugin-transform-runtime', [ 'babel-plugin-react-css-modules', { webpackHotModuleReloading: true, // TODO: HMR doesn't actually work autoResolveMultipleImports: true, generateScopedName: generateScopedCSSName, }, ], ], }, }, }, { test: /.css$/, use: [ 'to-string-loader', { loader: 'css-loader', options: { // TODO: Remove CSS modules? No longer needed with shadow DOM modules: { getLocalIdent: (, __, localName, _) => generateScopedCSSName(localName), }, }, }, { loader: 'postcss-loader', options: { sourceMap: devMode, postcssOptions: { plugins: [autoprefixer(), values()] }, }, }, ], }, // TODO: Do we want to extract our CSS? // TODO: Minify/optimize CSS ], }, resolve: { extensions: ['*', '.js', '.jsx'], }, output: { path: path.join(dirname, 'dist'), publicPath: '/', filename: 'leasemagnets.js', library: 'LeaseMagnets', libraryExport: 'default', libraryTarget: 'umd', // umdNamedDefine: true, }, devServer: { contentBase: path.join(__dirname, 'public'), port: 3000, }, node: { fs: 'empty', }, };