I'm having issue in React, when implement Pusher SDK

[PriyaNspire]

    I'm having issue in React, when implement Pusher SDK

 /Users/developer/Documents/projects/node_modules/@pusher/push-notifications-web/dist/push-notifications-esm.js:2604
    export { Client, RegistrationState, TokenProvider };
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      16 | import { messageSelector } from '../redux/message/selector';
      17 | import { cloneDeep } from 'lodash';
    > 18 | import PusherPushNotifications from "@pusher/push-notifications-web";
         | ^
      19 |
      20 | const PusherContext = createContext();
      21 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/context/PusherContext.js:18:1)

The strange thing is that I have other packages that use ES6 and they work just fine.

Just adding that this error happens when I do `import * as PusherPushNotifications from "@pusher/push-notifications-web"`

Can anyone please tell how to solve in react.

[benjamin-tang-pusher]

Are you using Next.js? Your issue may be the same as https://github.com/pusher/push-notifications-web/issues/78.

The solution for them was https://github.com/pusher/push-notifications-web/issues/78#issuecomment-825348735

[PriyaNspire]

Thanks @benjamin-tang-pusher for response. I am not using Next.js. Above mentioned issue raised in React.

This issue show when I execute npm test comment in the terminal.

[benjamin-tang-pusher]

I get the same error with npm test, but npm start works fine (I can also go on to call start()).

I may have encountered this issue with the jest tester in the past. Let me see if I can dig up past cases of this.

[PriyaNspire]

Thanks @benjamin-tang-pusher

Please tell me know, If you get solution of this error.

[benjamin-tang-pusher]

I got past this error message by following this StackOverflow, and changing my package.json to this:

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@pusher/push-notifications-web)/\"",

I bumped into another error that doesn't look related:

Pusher Beams does not support this browser version (IndexedDB not supported)

I think Beams with jest needs extra configuration with IndexedDB, but I'm not familiar with these two, and will need to do further investigation. Will let you know what I find.

[benjamin-tang-pusher]

I used fakeIndexedDB (npm install --save-dev fake-indexeddb and put import "fake-indexeddb/auto"; in App.test.js) to mock an IndexedDB api for the Beams library to use when run with jest. It goes onto another error message Pusher Beams relies on Service Workers, which only work in secure contexts. Check that your page is being served from localhost/over HTTPS, so there's more to be done. But I'd say your original error message has been solved by my previous comment.

As for how to run the React test with jest whilst importing Beams, unfortunately I'm not very familiar with jest. Our Beams library expects to run in a web browser environment, which jest by itself won't provide (it just simulates the DOM, and its not an actual headless web browser). Has anyone else managed to get their React tests running with Beams?

[benjamin-tang-pusher]

After further investigation, I'm going to have to admit that full headless web browser testing is an another topic that you're going to have to ask on their stack overflow https://stackoverflow.com/questions/tagged/jestjs . I don't think many people are using jest with Beams. I will close this GH issue.