SyntaxError: Cannot use import statement outside a module

Sendbird Chat UIKit React
1

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.

2

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?

3

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

4

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.
/>
)
}

5

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>
  );
}
1 Like
6

This error occurs when you try to use an import statement outside a module. This can happen in different cases depending on whether you’re working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind this error, and the solution depends on how you call the module or script tag. Solutions:

Add type=“module” inside the script tag
Add “type”: “module” to your package.json
Use the extension .mjs in your files
Use import by required

If you’re still getting the error even though you’re using import in a module file, make sure that your JavaScript environment supports modules. Some older browsers and Node.js versions do not support modules natively, and you may need to use a module bundler like Webpack or rollup.js to transform your module code into a format that can be used in your environment.