1

I'm trying to dynamic import async function in Next.js. I got an error

"TS2349: This expression is not callable. Not all constituents of type 'ComponentType<{}>' are callable. Type 'ComponentClass<{}, any>' has no call signatures."

This is my async function:

export const getUsers = async (): Promise<string[]> => {
    let usersList
    try {
        usersList = await window.trustedUsers.getUsersList()
    } catch (error) {
        console.log(error)
    }
}

This is how I import async function. I use dynamic import because at async function I have window call

import { useCallback, useEffect } from 'react'

const  dynamicGetUsers = dynamic(
    () => import('../../getUsers')
        .then((mod: any) => mod.getUsers),
    { ssr: false }
)

export const UsersListComponent = (): JSX.Element => {
    const [users, setUsers] = useState()
    
    const handleUsers = useCallback(async () => {
        const usersList = await dynamicGetUsers() // at dynamicGetUsers() there i have an error
        setUsers(usersList)
    } , [])

    return (
        <>
            {users && users}
            <button onClick={handleUsers} >get users</button>
        </>
    )
}
mc-user
  • 1,769
  • 4
  • 14
  • 25
Imp3ll
  • 41
  • 6
  • `next/dynamic` is used to dynamically import React components, not plain JavaScript functions. For that you can use [ES2020 dynamic `import()`](https://github.com/tc39/proposal-dynamic-import), e.g. `const dynamicGetUsers = (await import('../../getUsers')).getUsers; const usersList = await dynamicGetUsers();`. See [Dynamically import abcjs in Next.js](https://stackoverflow.com/questions/67402056/dynamically-import-abcjs-in-next-js). – juliomalves Apr 11 '22 at 12:31

0 Answers0