await import in React/NextJS/Typescript-CodePudding

I'm running this code on a node.js development server:

import { useRouter } from 'next/router'
import nextBase64 from 'next-base64';
   
const Load = () => {
  const router = useRouter()
  const { obj } = router.query
  var decoded = nextBase64.decode(obj)

  return <p>Post: {decoded}</p>
}

export default Load

When I navigate to the page, which is a base64 encoded string, It tells me:

Server Error

TypeError: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined This error happened while generating the page. Any console logs will be displayed in the terminal window. Source

pages/media/load/[obj].tsx (15:16) @ Load

  13 | const router = useRouter()
  14 | const { obj } = router.query
> 15 | var decoded = nextBase64.decode(obj)
     |              ^
  16 | 
  17 | return <p>Post: {decoded}</p>
  18 | }

However, if I remove the nextBase64.decode(obj) and print the obj it works, printing the encoded string. But here's the kicker. When I revert the change it also works and prints the decoded string.

I think the import nextBase64 from 'next-base64'; statement isn't imported in time for when the function is exported.

What is best practice here, should I do some kind of await import (I tried and failed) or should I import inside the function somehow?

CodePudding user response：

this is the normal behavior of