SendBird SyncManager bundle issues

Hi, I am integrating sendbird syncmanager with sendbird application in react-js.

Whenever I write the below statement the project compiles but on loading the project, it gives error:

import SendBirdSyncManager from 'sendbird-syncmanager';


vendors~dashboard.bundle.js:106 Uncaught SyntaxError: Unexpected token ':'

If I remove the import statement, the project loads without any error.

Following is my package.json

	"name": "chat",
	"version": "0.0.1",
	"description": "sendbird chat",
	"main": "index.js",
	"scripts": {
		"dev": "webpack-dev-server --config --progress --open",
		"build-dev": "webpack --env.NODE_ENV=development",
		"build-prod": "webpack --config",
		"fix:other": "yarn prettier --write",
		"fix:code": "yarn test:code --fix",
		"fix": "yarn fix:code",
		"prettier": "prettier \"**/*.{json,md,scss,yaml,yml}\"",
		"test:other": "yarn prettier --list-different",
		"test:code": "eslint --ignore-path .gitignore --ext .js,.jsx .",
		"test": "yarn test:other && yarn test:code"
	"license": "ISC",
	"dependencies": {
		"@material-ui/core": "^4.11.0",
		"@sentry/browser": "^5.25.0",
		"axios": "^0.20.0",
		"easy-peasy": "^3.3.1",
		"eslint": "^7.9.0",
		"eslint-config-airbnb": "^18.2.0",
		"eslint-plugin-import": "^2.22.0",
		"eslint-plugin-jsx-a11y": "^6.3.1",
		"eslint-plugin-react": "^7.21.2",
		"formik": "^2.1.5",
		"husky": "^4.3.0",
		"js-cookie": "^2.2.1",
		"jwt-decode": "^3.0.0-beta.2",
		"lint-staged": "^10.4.0",
		"localforage": "^1.9.0",
		"lodash": "^4.17.20",
		"moment": "^2.29.0",
		"prettier": "^2.1.2",
		"react": "^16.13.1",
		"react-bottom-scroll-listener": "^4.1.0",
		"react-copy-to-clipboard": "^5.0.2",
		"react-device-detect": "^1.13.1",
		"react-dom": "^16.13.1",
		"react-redux": "^7.2.1",
		"react-router-config": "^5.1.1",
		"react-router-dom": "^5.2.0",
		"redux": "^4.0.5",
		"redux-persist": "^6.0.0",
		"redux-thunk": "^2.3.0",
		"sendbird": "^3.0.111",
		"sendbird-syncmanager": "^1.1.14",
		"yup": "^0.29.3"
	"devDependencies": {
		"@babel/core": "^7.11.6",
		"@babel/plugin-transform-runtime": "^7.11.5",
		"@babel/preset-env": "^7.11.5",
		"@babel/preset-react": "^7.10.4",
		"@loadable/babel-plugin": "^5.13.2",
		"@loadable/component": "^5.13.2",
		"apollo-cache-inmemory": "^1.6.6",
		"apollo-client": "^2.6.10",
		"apollo-link-http": "^1.5.17",
		"autoprefixer": "^10.0.1",
		"babel-eslint": "^10.1.0",
		"babel-loader": "^8.1.0",
		"babel-plugin-module-resolver": "^4.0.0",
		"clean-webpack-plugin": "^3.0.0",
		"copy-webpack-plugin": "^6.2.0",
		"css-loader": "^4.3.0",
		"dotenv-webpack": "^3.0.0",
		"extract-css-chunks-webpack-plugin": "^4.7.5",
		"file-loader": "^6.1.0",
		"html-loader": "^1.3.1",
		"html-webpack-plugin": "^4.5.0",
		"mini-css-extract-plugin": "^0.11.3",
		"optimize-css-assets-webpack-plugin": "^5.0.4",
		"path": "^0.12.7",
		"postcss": "^8.1.1",
		"postcss-loader": "^4.0.3",
		"precss": "^4.0.0",
		"resolve-url-loader": "^3.1.1",
		"sass": "^1.26.11",
		"sass-loader": "^10.0.2",
		"style-loader": "^1.2.1",
		"terser-webpack-plugin": "^4.2.2",
		"url-loader": "^4.1.0",
		"webpack": "^4.44.2",
		"webpack-cli": "^3.3.12",
		"webpack-dev-server": "^3.11.0",
		"webpack-merge": "^5.1.4"
	"husky": {
		"hooks": {
			"post-commit": "lint-staged"
	"lint-staged": {
		"*.{js,jsx}": [
			"npm run fix",
			"git add"
		"*.{json,md,css,scss,yaml,yml}": [
			"prettier --write"

Has anyone any idea what might be wrong here or if someone encountered this issue before ?

Hey @freakytanmay,

First off, welcome to the Sendbird Community! We’re happy to have you here.

I threw the same version of SyncManager into a project I’m currently working on and did not have any issues with unexpected tokens. Can you provide a snippet of where SyncManager is implemented and where you’re seeing the error?


Hey Tyler, thanks for the fast response. Wherever I use the import statement it starts giving me error. For example as simple as this code:

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { useStoreActions } from 'easy-peasy';

import { SendBirdAction } from 'components/SendBird/sendBirdAction';
import SendBirdSyncManager from 'sendbird-syncmanager';

const Init = () => {

  // eslint-disable-next-line prefer-const
  let history = useHistory();

  // initialize sendbirdAction class
  const sb = new SendBirdAction();

  const _logOut = () => {

  useEffect(() => {
    const cookieToken = getToken();
    if (cookieToken) {
      // update the token and userId if its valid
              } else {
  }, []);

  return null;

export default Init;

If I remove the import statement, it works perfectly. I am also amazed by the fact that just by importing it is giving the error.

That is very interesting. Out of curiosity, if you were to import SyncManager without also importing or calling your SendbirdAction, do you still get the error? Just curious if its a bit more in-depth than simply importing the SyncManager.


Yes, I commented out all the import statements and the functions of sendBirdAction class in other files. I still get the same error and on removing import statement for syncManager, it works fine.


Just wanted to touch base. I’m still trying to reproduce this issue, but have not been able to do so despite using the same version as yourself. Can I have you update to the latest versions of both the sendbird and sendbird-syncmanager packages?


Hello, freakytanmay.

  1. Check installation location sendbird-syncmanager-javascript
    (GitHub - sendbird/sendbird-syncmanager-javascript: Sendbird SyncManager for JavaScript is an add-on for reliable chat data caching with Chat SDK features.)

  2. ← Web Basic Sample with SyncManager
    Test the sample and see what makes a difference.

  • Scott Kim

Hey Tyler, I had done that and still got the same error. I had also tried the versions on the sample code for syncmanager on GitHub but that also didn’t work out.

Hey ScottKim, I had tried using the same class from Web Basic Sample with SyncManager. I also tried to comment out the other functionalities of sendbird except connecting to sendbird server but I was still getting the same error on importing the sendbird-syncmanager.

As for the location of sendbird-syncmanager, I had included it in package.json and had run npm install which installs it in the current directory. Should I install it globally?

If you failed to run the sample, you may have problems with the installation process. I’ll explain it in a more easy way.

The fastest way to test the Chat SDK is to build your chat app on top of our sample app. To create a project for the sample app, download the app from our GitHub repository. The link is down below.

  1. → unzip your pc or laptop
  2. change directory “Sendbird-JavaScript-master/web-basic-sample-syncmanager”
    (Change because you want ‘web-basic-sample-syncmanager’)
  3. typing on the console : npm install
  4. typing on the console : npm start
  5. open browser and typing :

show sample page. (ID, password, what you want it, or ID:test, Pass:test)

good luck.

Hey Scottkim, I think there was a misunderstanding. I didn’t mean that the sample app was failing, it was running with no issues. I meant that I reused some of the code from sample code in my own code.

Till the moment, I used sendbird code, the project works fine. As soon as I simply import the sendbird-syncmanager, it crashes in bundle.js.

Also, I couldn’t build the application on top of the sample project since we use react in a different way than the way described in the sample app.

Please, Just check it out ‘package-lock.json’ file ?

I deleted package-lock.json and node-modules and reinstalled npm dependencies. It still gives the same bundling error.

Can it be because of conflict from other node modules although I have never seen bundling errors in those modules(using it various projects).

Found the Solution: I changed dotenv-webpack version to 1.7.0 from 3.0.0 and it worked fine. I think there might be some compatibility issue.

That is an interesting find. I’ll see if I can find anything that stands out.

Thanks for letting us know!