update client-only-render-external-dependency example

[Tomekmularczyk]

Changes:

• use dynamic imports instead of require
• update recharts dependency

[timneutkens]

Lets remove props this is going to be removed in Next 7

[Tomekmularczyk]

sure. Btw I was not sure how to best approach this example.
I tried to just make dynamic imports directly in pages like:

const BarChart = dynamic(import('recharts').then(({ BarChart }) => BarChart), { ssr: false }),
const Bar = dynamic(import('recharts').then(({ Bar }) => Bar), { ssr: false })

But I experienced charts not being drawn. I think that these two components had to be together ready before they were rendered. The above way solved the issue.

I also thought about just making a directory BarChart and LineChart with index.js file exporting:

export default dynamic(import('./BarChart'), { ssr: false });
// ... and
export default dynamic(import('./LineChart'), { ssr: false });

but this would resolve in recharts being bundled twice for these two chunks (and it's quite big).

[timneutkens]

Same here as my other comment

[timneutkens]

Should be fine like this 👍

[pengshaosu]

const JSEncrypt = dynamic(import('jsencrypt').then(({JSEncrypt}) => JSEncrypt}, { ssr: false })

How can use dynamic import correctly?
I follow above but error?
Thx