Our state of the art Gantt chart


[INFO REQ] Webpack optimisation breaks id generation

Post Reply

Post by Qwerty »

Hi all, sorry for the complexity on this one but hopefully it should make sense. I have observed that after compiling bryntum gantt with webpack in production mode, the class names are all rewritten and this causes issues in browsers that are not chrome while adding a new task for the first time.

In development (unminified) I see

gantt.project.taskModelClass.name
=> "CustomTaskModel"
gantt.project.constructor.name
=> "ProjectModel"

and then in production I see

gantt.project.taskModelClass.name
=> "t"
gantt.project.constructor.name
=> "t"

This doesn't seem to be much of an issue except generateId() uses the class name to generate an id. It seems that an ID for ProjectModel is inserted in to idRegister on taskStore on the initial load. The problem is this ID becomes _generatedt1 in production mode. Now we try to add a new task via the context menu and this error shows up

Error: Id collision on _generatedt1

Because we have already inserted an id of the same name since taskmodel and projectmodel have been minified to the same thing.

The reason this bug does not affect chrome is this code here which renames the task model to tEx so is now not colliding with the project model

            if (!window.bryntum.CSP && BrowserHelper.isChrome) {
                // This workaround makes Chrome output a readable class name in DevTools when you inspect
                // (turns TaskModel -> TaskModelEx etc. instead of ClassDef for all)
                // eslint-disable-next-line no-eval
                eval(`ClassDefEx = class ${ClassDef.$name || ClassDef.name}Ex extends ClassDef {};`);
            }

I have tried to find a configuration for webpack to disable class name minification but it seems they are of the opinion that class names should not be relied on. I'm not really sure what we can do here to resolve this other than modifying the the id generation function to use a uuid or another name attribute added to both classes. Any advice here would be great.

Post by alex.l »

Hi Qwerty,

We need a full test case to help you here (how do you create Gantt and define models). Also, webpack config might be helpful.

Thanks,
Alex

All the best,
Alex

Post by Qwerty »

Hi Alex,

Apologies for the late response here.

We use TerserPlugin in Webpack to minify our JS and this is what was causing the class names to be set to the same value, causing the collision.

For the time being we have disabled classname minification by setting the option keep_classnames to true.

https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions

Post Reply