Diagram-js unable to find provider e in vue production build

mears · April 22, 2023, 4:46am

Hey all, thanks in advance. I’ve developed a custom editor with just diagram-js for my use case which runs it in a vue 3 app. It works great when I run it in vue-cli development mode npm run serve, but when I deployed it to my production environment I get other errors talking about a provider named e? The full error is listed below and it is thrown whenever I open a new editor,

Error: No provider for "e"! (Resolving: connectPreview -> generalizationHandler -> e)

Here is where i create the module, I don’t think I’ve done anything wrong?

github.com

nemears/open-uml2/blob/main/src/components/diagram/providers/index.js

import ClassDiagramContextPadProvider from './ClassDiagramContextPadProvider';
import ClassDiagramPaletteProvider from './ClassDiagramPaletteProvider';
import ClassDiagramRuleProvider from './ClassDiagramRuleProvider';
import DragFromTree from './DragFromTree';
import InteractWithModel from './InteractWithModel';
import UMLRenderer from './UMLRenderer';
import ClassLabel from './ClassLabel';
import GeneralizationHandler from './relationships/GeneralizationHandler';
import DirectedComposition from './relationships/DirectedComposition';
// import ConnectionModule from 'diagram-js/lib/features/connect';
// import Relationship from './relationships/Relationship';
// import Dragging from 'diagram-js/lib/features/dragging';

export default {
  // __depends__: [
  //   ConnectionModule,
  //   Dragging
  // ],
  __init__: [
    // 'relationship',

This file has been truncated. show original

sorry for some spaghetti in the code.
To reproduce right click the “Model” package on the left and select Create Class Diagram that will throw the error.

philippfromme · April 25, 2023, 7:44am

What modules does generalizationHandler depend on? Apparently it’s trying to inject an e module which I guess doesn’t exist.

mears · April 26, 2023, 8:40am

So after more digging I think I am understanding what is going on. It breaks because when I build for production because it minimizes the constructor of the classes. So the provider e was actually the minimized argument name for eventBus it was just getting messed up in the parsing step. To get around this I added an explicit $injects field to GeneralizationHandler to allow it to skip parsing the constructor and just look for the injects. After that it was able to resolve the proper providers. Basically something like this

GeneralizationHandler.$inject = ['eventBus', 'elementsFactory' ...];

philippfromme · April 26, 2023, 8:55am

The $inject property is a minification-safe way of declaring dependencies. Glad you were able to fix it!