SyntaxError: Cannot use import statement outside a module

[HamedMP]

Hi,

Thanks for this cool component. I'm having problems using it, unfortunately.

I'm using Next.js and after installing react-vim-wasm, I am importing it in the following way (for now in index.js for test purposes) but I'm getting the following error:

It took me a while to understand the path to wasm worker in the documentation but I guess this should be the right one?

What is going wrong here?

import Header from '../components/Header/Header';
import Footer from '../components/Footer/Footer';
import styles from '../styles/Home.module.sass';
import { useCallback } from 'react';
import { Vim, useVim } from 'react-vim-wasm';

import { checkVimWasmIsAvailable } from 'react-vim-wasm';

export default function Home() {
  const errmsg = checkVimWasmIsAvailable();
  if (errmsg) {
    alert(errmsg);
  }

  const onVimExit = useCallback(s => alert(`Vim exited with status ${s}`), []);
  const onFileExport = useCallback(
    (f, buf) => console.log('file exported:', f, buf),
    []
  );
  const onError = useCallback(e => alert(`Error! ${e.message}`), []);

  return (
    <div className={styles.container}>
      <Header />

      <main className={styles.main}>
        <Vim
          worker="../node_modules/vim-wasm/vim.js"
          onVimExit={onVimExit}
          onFileExport={onFileExport}
          readClipboard={navigator.clipboard && navigator.clipboard.readText}
          onWriteClipboard={
            navigator.clipboard && navigator.clipboard.writeText
          }
          onError={onError}
        />
      </main>

      <Footer />
    </div>
  );
}

Full error message:

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
<unknown>
file:///Users/hamedmohammadpour/dev/udemy/react/code/vim-ninja-next/node_modules/react-vim-wasm/index.js (1)
wrapSafe
internal/modules/cjs/loader.js (979:16)
Module._compile
internal/modules/cjs/loader.js (1027:27)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1092:10)
Module.load
internal/modules/cjs/loader.js (928:32)
Function.Module._load
internal/modules/cjs/loader.js (769:14)
Module.require
internal/modules/cjs/loader.js (952:19)
require
internal/modules/cjs/helpers.js (88:18)
external%20%22react-vim-wasm%22 (1:0) @ eval

> 1 | module.exports = require("react-vim-wasm");
Call Stack
Object.react-vim-wasm
file:///Users/hamedmohammadpour/dev/udemy/react/code/vim-ninja-next/.next/server/pages/index.js (172:1)
__webpack_require__
file:///Users/hamedmohammadpour/dev/udemy/react/code/vim-ninja-next/.next/server/pages/index.js (23:31)
eval
webpack-internal:///./pages/index.js (11:72)
Module../pages/index.js
file:///Users/hamedmohammadpour/dev/udemy/react/code/vim-ninja-next/.next/server/pages/index.js (128:1)
__webpack_require__
file:///Users/hamedmohammadpour/dev/udemy/react/code/vim-ninja-next/.next/server/pages/index.js (23:31)
<unknown>
file:///Users/hamedmohammadpour/dev/udemy/react/code/vim-ninja-next/.next/server/pages/index.js (91:18)
Object.<anonymous>
file:///Users/hamedmohammadpour/dev/udemy/react/code/vim-ninja-next/.next/server/pages/index.js (94:10)
Module._compile
internal/modules/cjs/loader.js (1063:30)