Closed nihal-zaynax closed 1 year ago
@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 😉)
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.
@mihhu thx, next-transpile-modules works perfect and probably also fewer eyebrows are raised on later code revisits ;D
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;
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!
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 (
); };
export default Home; `