visx is now fully compatible with Next.js!!

State of the visx (until recently)

As I introduced in a article, visx is a brilliant adaption of D3.js with Typescript and React.js in mind. In the same time, however, version 3.0+ failed to live well with Next.js.

To tackle this issue, a few workarounds have been proposed as follows.

• Install version 2.18.0 (the last working version with Next.js)
• Use dynamic import with next/dynamic with SSR disabled

Install version 2.18.0

This is for someone who doesn't like to modify any codes or who uses visx visualization component in MDX, use version 2.18.0 is the only feasible option. While this wouldn't support any new features introduced in the 3.0, it didn't cause any problems in my .mdx files.

Use dynamic import with next/dynamic with SSR disabled

If visx is used in normal Javascript / Typescript codes, this option works well with version 3.0+.

Instead of

import MyLineChart from './MyLineChart';

Try this

import dynamic from 'next/dynamic';
const MyLineChart = dynamic(() => import('./MyLineChart'), { ssr: false });

Wait is over!

Now, thanks to the version 3.2 update, this cumbersome and unwelcome workarounds are not any longer needed.

Just update your visx package and enjoy your visualization!