Можно ли загружать компоненты Rechart с помощью React.lazy?

Я пытаюсь реализовать разделение кода, но некоторые компоненты не работают. Из документации компоненты должны быть из export default, а они есть. Я также попытался экспортировать их в свой файл по умолчанию, но это не сработало.

Вот пример компонента. Пару компонентов удалось разделить, остальные не будут отображаться, если я попытаюсь это сделать.

import React, { lazy, Suspense } from 'react'
import {
  Bar,
  CartesianGrid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts'
const BarChart = lazy(() => import('recharts/lib/chart/BarChart'))
const ResponsiveContainer = lazy(() => import('recharts/lib/component/ResponsiveContainer'))

const barAxisTick = ({ x, y, payload }) => {
  return (
    <g transform={`translate(${x},${y})`}>
      <text dy={16} textAnchor="middle" fill="#666">{payload.value}</text>
    </g>
  )
}

const StackedBarChart = ({ data, height }) => (
  <Suspense fallback={<div style={height}></div>}>
    <ResponsiveContainer height={height.height} id="timeline">
      <BarChart data={data} margin={{ top: 16, right: 32, left: 8, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" tick={barAxisTick} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="Collected" stackId="a" fill="#1976d2" />
        <Bar dataKey="Due" stackId="a" fill="#d32f2f" />
      </BarChart>
    </ResponsiveContainer>
  </Suspense>
)

export default StackedBarChart

reactjs javascript recharts
person Josh Bradley    schedule 24.02.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward 

const BarChart = lazy(() => import('recharts').then(module => ({ default: module.BarChart })));
const ResponsiveContainer = lazy(() => import('recharts').then(module => ({ default: module.ResponsiveContainer })));
const Bar = lazy(() => import('recharts').then(module => ({ default: module.Bar })));
const XAxis = lazy(() => import('recharts').then(module => ({ default: module.XAxis })));
const YAxis = lazy(() => import('recharts').then(module => ({ default: module.YAxis })));
const CartesianGrid = lazy(() => import('recharts').then(module => ({ default: module.CartesianGrid })));
const Tooltip = lazy(() => import('recharts').then(module => ({ default: module.Tooltip })));
const ReferenceLine = lazy(() => import('recharts').then(module => ({ default: module.ReferenceLine })));

recharts не имеет экспорта по умолчанию, поэтому вам нужно импортировать вот так

person Duc Nguyen    schedule 21.07.2020
comment
Это не сработало для меня - person Jeremiah; 25.02.2021