Dynamic import SDK on client side Next.js 10

Question

I have tried

const TRTC = dynamic(() => import('trtc-js-sdk').then((module) => module.NamedExport), { ssr: false });

It gives error TRTC.createClient is not a constructor. i have also tried nested dynamic import but then it starts giving following error.

x.js
------------------------
    const TRTC = dynamic(() => {
      import("./test_y"), { ssr: false }
    });
--------------------

test_y.js
---------------------
const TRTC = dynamic(() => import('trtc-js-sdk').then((module) => module.NamedExport));
------------------------

TypeError: Cannot read property 'then' of undefined
    at LoadableSubscription.load [as _loadFn] (/Users/xyz/Documents/node_modules/next/dist/next-server/lib/loadable.js:22:190)
    at LoadableSubscription.retry (/Users/xyz/Documents/node_modules/next/dist/next-server/lib/loadable.js:24:1327)
    at new LoadableSubscription (/Users/xyz/Documents/node_modules/next/dist/next-server/lib/loadable.js:24:1237)
    at init (/Users/xyz/Documents/node_modules/next/dist/next-server/lib/loadable.js:22:1274)
    at flushInitializers (/Users/xyz/Documents/node_modules/next/dist/next-server/lib/loadable.js:24:2654)
    at Promise (/Users/xyz/Documents/node_modules/next/dist/next-server/lib/loadable.js:24:2852)

I am using Next.js 10 and cant upgrade. How can i dynamically import sdk on client side without running it on Server ?

score -1 · Answer 1 · answered Nov 03 '22 at 13:43

-1

Try this

let TRTC = null;
if (typeof window === 'object') {
  TRTC = require('trtc-js-sdk').default;
}

answered Nov 03 '22 at 13:43

Shiva C

30
6

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the [help center](https://stackoverflow.com/help/how-to-answer). – Ethan Nov 06 '22 at 02:36

Dynamic import SDK on client side Next.js 10

1 Answers1