SyntaxError: Unexpected token 'export'

[dudusotero]

When I try to import the SDK into my application this error occurs

/Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/node_modules/@pusher/push-notifications-web/dist/push-notifications-esm.js:2604
export { Client, RegistrationState, TokenProvider };
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at eval (webpack-internal:///@pusher/push-notifications-web:1:18)
    at Object.@pusher/push-notifications-web (/Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/.next/server/pages/_app.js:127:1)
    at __webpack_require__ (/Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/.next/server/pages/_app.js:23:31)
    at eval (webpack-internal:///./pages/_app.js:8:88)
    at Module../pages/_app.js (/Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/.next/server/pages/_app.js:104:1)
    at __webpack_require__ (/Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/.next/server/pages/_app.js:23:31)
    at Object.0 (/Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/.next/server/pages/_app.js:115:18)
    at __webpack_require__ (/Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/.next/server/pages/_app.js:23:31)
    at /Users/eduardosotero/Documents/NextJS/nextjs-pusher-polling-app/.next/server/pages/_app.js:91:18

I'm using import { Client } from "@pusher/push-notifications-web"; and import * as PusherNotifications from "@pusher/push-notifications-web";

Should I downgrade the web SDK version?

[benw-pusher]

At what point does this error get thrown? I believe this error is related to NextJS support for ES6. Many have found that using next-transpile-modules resolves this issue. See https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/230 and https://github.com/vercel/next.js/issues/706.

[AmitMirgal]

@dudusotero this is how i fixed the issue.. might be helpful for you

// next.config.js

const withTM = require("next-transpile-modules")([
    "@pusher/push-notifications-web",
]); // pass the modules you would like to see transpiled

module.exports = withTM();

[wulman16]

I'm having the exact same issue in React:

 /usr/app/node_modules/@pusher/push-notifications-web/dist/push-notifications-esm.js:2604
 export { Client, RegistrationState, TokenProvider };
 ^^^^^^

 SyntaxError: Unexpected token 'export'
     at compileFunction (<anonymous>)
     at wrapSafe (node:internal/modules/cjs/loader:1018:16)
     at Module._compile (node:internal/modules/cjs/loader:1066:27)
     at Module._compile (/usr/app/node_modules/@babel/register/node_modules/pirates/lib/index.js:99:24)
     at Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
     at Object.newLoader [as .js] (/usr/app/node_modules/@babel/register/node_modules/pirates/lib/index.js:104:7)
     at Module.load (node:internal/modules/cjs/loader:967:32)
     at Function.Module._load (node:internal/modules/cjs/loader:807:14)
     at Module.require (node:internal/modules/cjs/loader:991:19)
     at Module.Hook._require.Module.require (/usr/app/node_modules/require-in-the-middle/index.js:80:39)
     at Module.Hook._require.Module.require (/usr/app/node_modules/require-in-the-middle/index.js:80:39)
     at Module.Hook._require.Module.require (/usr/app/node_modules/require-in-the-middle/index.js:80:39)
     at Module.Hook._require.Module.require (/usr/app/node_modules/require-in-the-middle/index.js:80:39)
     at require (node:internal/modules/cjs/helpers:92:18)
     at Object.<anonymous> (/usr/app/server/app/signin.js:13:1)
     at Module._compile (node:internal/modules/cjs/loader:1102:14)

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

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

[rafaelvicio]

same problem here

[benw-pusher]

At what point does this error get thrown? I believe this error is related to NextJS support for ES6. Many have found that using next-transpile-modules resolves this issue. See react-syntax-highlighter/react-syntax-highlighter#230 and vercel/next.js#706.

Does this resolve your issue? Or perhaps the resolution at https://github.com/pusher/push-notifications-web/issues/78#issuecomment-825348735?

[heymartinadams]

@benw-pusher https://github.com/pusher/push-notifications-web/issues/78#issuecomment-825348735 completely resolves this issue for anyone who uses NextJS (as the user who posted this issue does). I believe you can close this issue.

[enyo]

I'm experiencing the same issue with svelte kit. This is also the only library that I'm having issues with.

[enyo]

Adding this to the svelte.config.js seems to have solved it:

kit: {
  vite: {
    ssr: {
      noExternal: ['@pusher/push-notifications-web'],
    },
    //  ...

[fischeversenker]

I just stumbled upon this issue. The problem seems to be that the package.json of this package points to an ESM file in the main property, without specifying "type": "module" in that package.json.

This is a not a problem with some users' configurations. So this should not be fixed in the users's configurations. I recommend to add "type": "module" to the package.json to fix this for all users, regardless of the bundler/compiler they are using. As far as I know there are no downsides to adding this flag, it simply signals to other tools that this package provides ESM code.

How I fixed it: Add "type": "module" to your local node_modules/@pusher/push-notifications-web/package.json.

[ealexhaywood]

Using next-transpile-modules worked for me

[Tam2]

This is still an open issue for SvelteKit

[mikefogg]

For anyone still running across this using Next.js, next-transpile-modules functionality has been moved into Next.js – so it's now as easy as adding transpilePackages: ['@pusher/push-notifications-web'] to your next.config file!