Next JS: SyntaxError: Cannot use import statement outside a module

[Simoneth]

Hi,
I'm using your awesome library like: import db from "src/components/Dexie/db"; and got this server side error "SyntaxError: Cannot use import statement outside a module".

//db.jsx

import Dexie from 'dexie';

export const db = new Dexie('dex22');
db.version(1).stores({
    upload_form: '++id, array', // Primary key and indexed props
});
export default db;

Any solution? I tried this: const db = dynamic(import('src/components/Dexie/db'), { ssr: false })
but it's almost the same, I get the same error...and db is undefined.

"next": "12.0.7",
"react": "17.0.2",
"dexie": "^3.2.2",
"dexie-react-hooks": "^1.1.1"

[jhanstra]

I am having the same issue for dexie-cloud-addon specifically:

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.
Call Stack
<unknown>
/Users/jth/coprime/jot/node_modules/.pnpm/dexie-cloud-addon (4.0.0-beta.21_hu4p3lbq27shgt2nbxpn5m6qi4/node_modules/dexie-cloud-addon/dist/modern/dexie-cloud-addon.js (19)
Object.compileFunction
node:vm (360:18)

I am not sure why Dexie itself is working for me. I did add this to my _app.js, I'm not sure if that is causing it to not render on the server and therefore not break:

 const [render, setRender] = useState(false)
  useEffect(() => {
    if (typeof window !== 'undefined' && typeof window.crypto !== 'undefined' && typeof window.indexedDB !== 'undefined') {
      setRender(true)
    }
  }, [])

  if (render)
    return (<App />)
)}

@Simoneth let me know if that is helpful at all.

[dfahlander]

I think this is an issue with nextjs not able to run ESM modules in the SSR part.

Googling this ends up with other issues regarding nextjs and ESM modules.

Since dexie shall run on client only so if you can omit dexie code from being imported on the SSR part, it should work better.

• [BUG] NextJS: SyntaxError: Cannot use import statement outside a module asyncapi/asyncapi-react#177 (comment)

• useLiveQuery - MissingAPIError: IndexedDB API missing. #1472 (comment)

• I use Nuxt framework, using SSR rendering will appear UnhandledPromiseRejectionWarning: MissingAPIError: no t found with indexedDB API. #804 (comment)

There's a similar problem with Sveltekit that also use server-side rendering and all queries need to be omitted on SSR rendering: https://dexie.org/docs/Tutorial/Svelte#using-sveltekit.

[dfahlander]

Upgrade dexie-react-hooks (and dexie-cloud-addon if using it) to latest and everything should just work.