Implement pusher for real-time web notifications in nextjs

Question

I am getting the below error after initializing pusher on nextjs application:

export { Client, RegistrationState, TokenProvider };
^^^^^^
SyntaxError: Unexpected token 'export'

I have also tried modifying the next.config.js file to the following:

const withTM = require("next-transpile-modules")(["@pusher/push-notifications-web"])
module.exports = withTM({
  env: {
    apiBaseUrl: "",
    apiBaseUrlChat: ""
  },
});

When I am trying to execute npm run dev, it is giving me the following error:

TypeError: modules.map is not a function

Matriarchy

This looks to have been answered at #65936722. In short, you may need to: Try to modify the webpack config in next.config.js file to let the babel loader transpile the es6 dependency. You may want to use this package next-transpile-modules – Jaborandi

Thanks for your response @doydoy, can you share code sample for that? – Matriarchy

The problem for me was that the lib I used was missing an entry file. What fixed it for me was to add an empty index.js to the package, doing so next-transpile-modules worked and I was able to use the lib. Sounds stupid, but that did the job in my case. – Belletrist

Thanks @Tim. But I don't push node_modules file to the server. I can't do that. – Matriarchy

@Matriarchy But you could try to manually add an index.js to your client's node_modules to check whether or not this is the issue. – Belletrist

@Tim I tried that, but I get the following error: ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5 info - automatically enabled Fast Refresh for 1 custom loader (node:18500) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined – Matriarchy