Discuss anything related to web development but no technical support questions


Post by davide89 »

Hi, I was using your version of gantt 4.2.2 and gantt-react 4.2.2 and I had no problem with importing the two modules at the same time. Going to version 5.0.1, but also from some previous version, I get this error:

Uncaught Error: Bryntum bundle included twice, check cache-busters and file types (.js).
Simultaneous imports from ".module.js" and ".umd.js" bundles are not allowed.

I need to import LocaleManager to handle the language change in the gantt.

import React, { forwardRef, useEffect } from 'react'

import { BryntumGantt } from '@bryntum/gantt-react'
import { LocaleManager } from '@bryntum/gantt/gantt.umd'

import { getTaskTooltipFeature } from './helpers'

import Ru from '@bryntum/gantt/locales/gantt.locale.Ru'
import En from '@bryntum/gantt/locales/gantt.locale.En'
import It from './locales/gantt.locale.IT'

import zipcelx from 'zipcelx'

import './index.scss'

const locales = {
  'it-IT': It,
  'ru-RU': Ru,
  'en-GB': En
}

const DEFAULT_LOCALE = 'it-IT'

const Gantt = forwardRef(
  (
    {
      taskTooltipRenderer,
      onTaskBarClick,
      data,
      syncDataOnLoad,
      locale,
      onCellClick,
      taskStore,
      ...props
    },
    ref
  ) => {
    useEffect(() => {
      LocaleManager.locale = locales[locale || DEFAULT_LOCALE]
    }, [locale])

return (
  <div className='gantt-wrapper-container'>
    <BryntumGantt
      ref={ref}
      {...props}
      pdfExportFeature
      taskTooltipFeature={getTaskTooltipFeature(taskTooltipRenderer)}
      onTaskClick={onTaskBarClick}
      excelExporterFeature={{ zipcelx }}
      onCellClick={onCellClick}
    />
  </div>
)
  }
)

export default Gantt

Is there a solution to this bug?What I have found so far has not helped me.
Thanks


Post by alex.l »

Hi davide89,

The error appears because you imported from 2 bundles, as it described in error message.
Just update the package name you imported LocaleManager from

import { LocaleManager } from '@bryntum/gantt';

All the best,
Alex


Post by davide.cardia »

Yes, I tried and it doesn't give me any errors at the start and the language is set correctly. But when I try to change it from the interface, this error comes up:

https://ibb.co/b3S6zm8


Post by mats »

Can you please upload a small test case we can have a look at?


Post by davide.cardia »

Try putting this component in a route, switching pages and returning to the Gantt page.

import React, { useEffect, useState } from 'react'
import { BryntumGantt } from '@bryntum/gantt-react'
import { LocaleManager } from '@bryntum/gantt'

import Ru from '@bryntum/gantt/locales/gantt.locale.Ru'
import En from '@bryntum/gantt/locales/gantt.locale.En'

const locales = {
  'ru-RU': Ru,
  'en-GB': En
}

const DEFAULT_LOCALE = 'en-GB'

export const TestCase = () => {
  const [ganttRef, setGanttRef] = useState()

  const [locale, setLocale] = useState(DEFAULT_LOCALE)

  const data = [
    {
      id: '1',
      name: 'Cool project',
      startDate: '2019-01-02',
      endDate: '2021-02-02',
      children: [
        {
          id: '2',
          name: 'A leaf node',
          startDate: '2019-01-02',
          endDate: '2021-02-02'
        }
      ]
    }
  ]

  useEffect(() => {
    LocaleManager.locale = locales[locale || DEFAULT_LOCALE]
  }, [locale])

  useEffect(() => {
    ganttRef?.ganttInstance?.taskStore?.setStoreData(data)
  }, [data, ganttRef])

  return (
    <div>
      <button onClick={() => setLocale('ru-RU')}>RU</button>
      <button onClick={() => setLocale('en-GB')}>EN</button>
      <BryntumGantt ref={setGanttRef} />
    </div>
  )
}

When I load the page the language change works correctly, if I change the page and then return to the Gantt page, it breaks and returns this message

https://ibb.co/3RH33RP

What am I doing wrong?


Post by alex.l »

Please attach a runnable test case. Unfortunately we don't have an example with Routing for React that I can use to test your scenario.

All the best,
Alex


Post by davide.cardia »

It seems that you don't even need to change the language, you just need to change route and return to the gantt page. The localeManager gives problems if the columnsDefs of the grid are also present.

Here a runnable test case https://github.com/stackTeamDesCar/gantt-test-case.git


Post by alex.l »

Confirmed. There are some problems with change localization at runtime.
Looks like something related to React, especially with routing, since it works good in vanilla version, and it React without routing.
I've opened a ticket to check and fix that: https://github.com/bryntum/support/issues/4457

Thank you for the test case and the report!

All the best,
Alex


Post by saki »

Actually, this is not a bug but it is how React works. See the explanation here: https://github.com/bryntum/support/issues/4457#issuecomment-1128553247


Post Reply