ESM packages (d3-color) need to be imported

[DStavast]

Version
"@nivo/bump": "^0.81.0", "@nivo/calendar": "^0.81.0", "@nivo/colors": "^0.81.0", "@nivo/core": "^0.81.0"

Stack
Nextjs 13.2.4

Describe/explain the bug
After updating to the latest version of Nivo I started getting the below "Module not found" error. looks like it's related to the d-3 color module.

Steps to reproduce the behavior:

1. Install the latest Nivo versions
2. Create a calendar chart

'use client';
import React, { FC } from 'react';
import { CalendarTooltipProps, ResponsiveCalendar } from '@nivo/calendar';
import { useTheme } from 'next-themes';

type CalendarChartPropsType = {
	data: {
		day: string; // format must be YYYY-MM-DD
		value: number;
	}[];
};

const CalendarChart: FC<CalendarChartPropsType> = ({ data }) => {
	const { theme } = useTheme();

	if (data.length === 0) return <div>No data</div>;

	return (
		<div className='flex flex-col gap-6 w-full h-full min-h-[250px] p-6 select-none'>
			<ResponsiveCalendar
				data={data}
				from='2015-03-01'
				to='2016-07-12'
				emptyColor='#eeeeee'
				colors={['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']}
				margin={{ top: 40, right: 40, bottom: 40, left: 40 }}
				yearSpacing={40}
				monthBorderColor='#ffffff'
				dayBorderWidth={2}
				dayBorderColor='#ffffff'
				legends={[
					{
						anchor: 'bottom-right',
						direction: 'row',
						translateY: 36,
						itemCount: 4,
						itemWidth: 42,
						itemHeight: 36,
						itemsSpacing: 14,
						itemDirection: 'right-to-left',
					},
				]}
			/>
		</div>
	);
};

export default CalendarChart;

3. Import the chart to wherever it will be used

Error Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser chrome

[SamFisher0208]

I'm also receiving a similar error.

[plouc]

Thank you for taking the time to report this issue. I'm closing this in favor of a more generic issue: #2310.