SyntaxError: Cannot use import statement outside a module

I follow through this guide Send your first message | UIKit React SDK | Sendbird Docs and then get error as below:

SyntaxError: Cannot use import statement outside a module

Call Stack

/Users/rootfolder/Documents/project/node_modules/ (sendbird/uikit-react/App.js (1)

Object.compileFunction

node:vm (352:18)

wrapSafe

node:internal/modules/cjs/loader (1031:15

My react version is “react”: “^17.0.2”,
and nextjs version: “next”: “^12.1.6”,

I am unable to proceed with development, please solve this as soon as possible, sendbird team.

Hi @Michael_Leung,

Welcome to the Sendbird Community. My apologies for the delayed response.

I’m not super familiar with nextjs. Could you recreate this in a simple example in something like CodeSandbox where I can investigate it a bit deeper?

check this out: sendbird.zip - Google Drive
unzip and then run npm run dev to reproduce the problem

error - C:\Users\michael\Downloads\sendbird\node_modules@sendbird\uikit-react\App.js:1
import { a as _slicedToArray } from ‘./_rollupPluginBabelHelpers-abbcef5e.js’;
^^^^^^

SyntaxError: Cannot use import statement outside a module

source code:
import React from “react”;
import { App as SendbirdApp } from “@sendbird/uikit-react/App”;
import “@sendbird/uikit-react/dist/index.css”;
import styles from “…/styles/conversations.module.css”;

export default function Conversations() {
const USER_ID = “000”;
return (


<SendbirdApp
// Add the two lines below.
appId={“xxx”} // Specify your Sendbird application ID.
userId={USER_ID} // Specify your user ID.
/>
)
}

Hi @Michael_Leung,

This is an issue with NextJs and SSR. In order to resolve the issue you need to import the module with dynamic on pages that go through SSR.

import dynamic from 'next/dynamic';
const SendbirdApp = dynamic(() => import('@sendbird/uikit-react/App'), {
  ssr: false,
});
import '@sendbird/uikit-react/dist/index.css';
import styles from '../styles/conversations.module.css';

export default function Conversations() {
  const USER_ID = '002';
  return (
    <div className={styles.App}>
      <SendbirdApp
        // Add the two lines below.
        appId={'E556C1C7-011B-4511-8C7A-ADBAA7AB799F'} // Specify your Sendbird application ID.
        userId={USER_ID} // Specify your user ID.
      />
    </div>
  );
}