Getting an error running in Nextjs project

[alex-cory]

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.

I'm not familiar with @most/core

[semmel]

In 861e2bcc8703f2a6975d235ff2783fd3f2930448 i.e. v2.1.0. I migrated the project to an ES6 module.

This changes some properties in package.json and should make the project more integration friendly. Especially I hope that the error above

Cannot use import statement outside module

will be fixed.

Sorry I have not used Next.js yet.

Thanks for reporting!

[alex-cory]

Wait so it is fixed, or it is not fixed yet? Because I only see documentation updates.

[alex-cory]

I would submit a PR myself but like I said, not familiar with @most/core

[semmel]

Cannot use import outside a module

is clearly caused by webpack (or whatever Nextjs needs) loading oskd as commonjs. That should change if you upgrade to version 2.1.0.

I see no need to change the implementation using @most/core, since the detection works fine.

[alex-cory]

Ah, I totally missed your previous commits. Thanks for the quick turnaround

[zhicong]

I ran into the same issue on Next.js myself, and ended up working around it by requiring the package only when rendering on the client.

useEffect(() => {
    const { subscribe } = require('on-screen-keyboard-detector')
    return subscribe(visibility => { ... })
}, [])

[alex-cory]

@zhicong Do you mean something like this?

useEffect(() => {
  const getSubscribe = async () => {
    const keyboardDetector = await import('on-screen-keyboard-detector')
	return keyboardDetector.subscribe
  }
  const subscribe = getSubscribe()
  return subscribe(visibility => { ... })
}, [])

I'm surprised your code works. The only way your code would work is if nextjs was transpiling your code since require ins't available in the browser.

[Alwinator]

This issue should be fixed with https://github.com/semmel/on-screen-keyboard-detector/pull/14.