SyntaxError: Cannot use import statement outside a module on NextJS13 using Pages Router
hosnipogi opened this issue · 3 comments
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
- Create a next-app
npx create-next-app
- Use typescript, use the "Pages Router" instead of "App Router"
- Install video react sdk
npm install @stream-io/video-react-sdk
- Create a video page for example -
pages/video.tsx
- Paste everything from
https://codesandbox.io/embed/stream-video-quickstart-y0wo3m
into the video page - Run
npm run dev
- navigate to the video page
- get the following error:
Server Error SyntaxError: Cannot use import statement outside a module
Expected behavior
The project runs successfully
Screenshots
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
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.
Hi @oliverlaz this workaround fixed the issue for us! thanks!
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?