error - SyntaxError: Unexpected token 'export' - NEXT.JS

[nihal-zaynax]

i got this error on my Next.js app > "error - SyntaxError: Unexpected token 'export' " IS THIS @jitsi/react-sdk ONLY SUPPORTS IN REACT (create-react-app) ??

here is my code >>

`import { JitsiMeeting } from "@jitsi/react-sdk"; import type { NextPage } from "next";

const Home: NextPage = () => { return (

handleApiReady(externalApi)} // onReadyToClose={handleReadyToClose} // getIFrameRef={handleJitsiIFrameRef1} />

); };

export default Home; `

[foxesdocode]

@nihal-zaynax i've the same problem, it's not pretty but for me this works 🙂:

import dynamic from "next/dynamic";
import { FC } from "react";
import { IJitsiMeetingProps } from "@jitsi/react-sdk/lib/types";

const JitsiMeeting = dynamic(
  () =>
    import("@jitsi/react-sdk").then(({ JitsiMeeting }) => JitsiMeeting) as any,
  {
    ssr: false,
  }
) as FC<IJitsiMeetingProps>;

i think the problem is, that loading this module on server side part is not possible (maybe if it's compiled to a lower target or something but didn't tested it 😉)

[mihhu]

Hello @nihal-zaynax, thank you for reporting this problem! The issue seems to be caused by a design decision made by nextjs not to transpile ES6 packages from node_modules. I've seen multiple similar issues and it seems to boil down to that. There are some associated updates in the latest versions of nextjs but as I'm not familiar with them I can't help you any further.

However, a commonly accepted workaround seems to be to import next-transpile-modules and configure it to transpile the SDK into ES5. Please let me know if that helps.

@foxesdocode, I'm glad that solved this for you, I've noticed the dynamic import suggestion as well but it didn't seem to work for everyone.

[foxesdocode]

@mihhu thx, next-transpile-modules works perfect and probably also fewer eyebrows are raised on later code revisits ;D

[Felistus]

Using the next transpilePackages (available from next13.) solved the issue I added it to the next config file like so:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@jitsi/react-sdk'],
};

module.exports = nextConfig;

[lagupa]

Using the next transpilePackages (available from next13.) solved the issue I added it to the next config file like so:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@jitsi/react-sdk'],
};

module.exports = nextConfig;

This one works very well and it is neater!