SyntaxError: Cannot use import statement outside a module on NextJS13 using Pages Router

[hosnipogi]

SyntaxError: Cannot use import statement outside a module on NextJS13 using Pages Router
Which package/packages do you use?

• [✓ ] @stream-io/video-react-sdk
• [✓ ] @stream-io/video-client
• @stream-io/video-react-native-sdk

Describe the bug

We want to integrate this library into our existing NextJS 13 project which uses the Pages Router. Importing from @stream-io/video-react-sdk when on a "Pages Router" on a NextJS v13^ Typescript app fails with the following error:
SyntaxError: Cannot use import statement outside a module

The library works on the App Router though.

To Reproduce

1. Create a next-app npx create-next-app
2. Use typescript, use the "Pages Router" instead of "App Router"
3. Install video react sdk npm install @stream-io/video-react-sdk
4. Create a video page for example - pages/video.tsx
5. Paste everything from https://codesandbox.io/embed/stream-video-quickstart-y0wo3m into the video page
6. Run npm run dev
7. navigate to the video page
8. get the following error:
   Server Error SyntaxError: Cannot use import statement outside a module

Expected behavior

The project runs successfully

Screenshots

Pages Router:

App Router (working):

Version

• SDK version - @stream-io/video-react-sdk@0.3.12

Env:

Fill out what's applicable

React / JS client - NextJS v13.4.19 using the Pages Router

• Browser - tested on chrome and safari

Node JS client

• Node version 18.17.1

Additional context

Here is a demo repo to see the problem:
using pages router branch:
https://github.com/hosnipogi/getstream-video-react-test/tree/pagesdir
useing app router branch:
https://github.com/hosnipogi/getstream-video-react-test/tree/appdir

[oliverlaz]

Hi, @hosnipogi thanks for reporting this issue and providing a repository that makes it easy to reproduce it. I appreciate it!

I took a look at it and it seems that Next 13 uses different module resolutions for its "pages" router.
In our sample app, which is built with Next 13 and uses a pages router, we haven't noticed it. Anyway, I'll try to solve this in the SDK in the upcoming days.

In the meantime, as a workaround, you can apply this configuration to your next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    '@stream-io/video-client',
    '@stream-io/i18n',
    '@stream-io/video-react-bindings',
    '@stream-io/video-react-sdk',
  ],
};

module.exports = nextConfig;

Please let me know if this fixes the issue for you as well.

[hosnipogi]

Hi @oliverlaz this workaround fixed the issue for us! thanks!

[oliverlaz]

hi @hosnipogi, we've just released @stream-io/video-react-sdk-0.3.42.

This version fixes the underlying bundling issues and makes the transpilePackages workarounds in Next.js unnecessary.
Can you please check if this fixes the problem on your side?