SendBird SyncManager bundle issues

Sendbird Chat API/SDK JavaScript
, ,
1

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:

Statement:
import SendBirdSyncManager from 'sendbird-syncmanager';

Error:

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 webpack.dev.js --progress --open",
		"build-dev": "webpack --env.NODE_ENV=development",
		"build-prod": "webpack --config webpack.prod.js",
		"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 ?

2

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?

Thanks,
Tyler

3

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 = () => {
    history.replace('/login');
  };

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

  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.

4

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.

-Tyler

5

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.

6

@freakytanmay,

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?

Thanks,
Tyler

7

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. http://sample.sendbird.com ← Web Basic Sample with SyncManager
    Test the sample and see what makes a difference.

  • Scott Kim
8

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.

9

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?

10

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.

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

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

good luck.

11

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.

13

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

14

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).

15

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.

16

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

Thanks for letting us know!

-Tyler