[BUG] TypeScript project usage (with types)

Describe the bug When using the npm download of the package, I’m not able to use the typings of the system. After a fresh npm install, tsc will pick up the compiled modules with a default tsconfig.json:

error TS7016: Could not find a declaration file for module 'bpmn-visualization'. '/.../node_modules/bpmn-visualization/dist/bpmn-visualization.cjs.js' implicitly has an 'any' type.                             

This occurs with the following import in my sources:

import { BpmnVisualization, FitType } from 'bpmn-visualization'; 

Setting "noImplicitAny": false causes the cjs library to be picked up, but the types are not pulled in. Adjusting the import path to the full TypeScript source, or copying the bpmn-visualization.d.ts from the dist/src directory into dist and adjusting its paths, causes more errors. (This requires installing @typed-mxgraph.) Using the full path in the import,

import { BpmnVisualization, FitType } from 'bpmn-visualization/dist/src/bpmn-visualization';

…produces the following errors:

node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(16,13): error TS1192: Module '"/..../node_modules/bpmn-visualization/dist/src/model/bpmn/internal/BpmnModel"' has no default export.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(17,13): error TS1192: Module '"/..../node_modules/bpmn-visualization/dist/src/model/bpmn/internal/shape/Shape"' has no default export.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(18,15): error TS2305: Module '"../../model/bpmn/internal/edge/edge"' has no exported member 'Edge'.

Setting "allowSyntheticDefaultImports": true, even more errors:

node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(18,15): error TS2305: Module '"../../model/bpmn/internal/edge/edge"' has no exported member 'Edge'.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(23,21): error TS2709: Cannot use namespace 'BpmnModel' as a type.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(29,21): error TS2709: Cannot use namespace 'Shape' as a type.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(30,21): error TS2709: Cannot use namespace 'Shape' as a type.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(31,12): error TS2709: Cannot use namespace 'Shape' as a type.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(32,12): error TS2709: Cannot use namespace 'Shape' as a type.
node_modules/bpmn-visualization/dist/src/component/registry/bpmn-model-registry.d.ts(33,19): error TS2709: Cannot use namespace 'Shape' as a type.

Any suggestions on how I can use npm and the module with pure TypeScript?

Thank you—I’m really enjoying this library and the utility it offers!

To Reproduce Simply npm install into a fresh TypeScript project, with a fresh tsconfig.json, and run the above.

Additional context

The tsconfig.json is as follows after adjustment for synthetic imports and mxgraph’s typings.

{                                                                                                                                                                                                                                             
   "compilerOptions": {                                                                                                                                                                                                                          
      "target": "es6",                                                                                                                                                                                                                          
      "moduleResolution": "node",                                                                                                                                                                                                               
      "noEmitOnError": true,                                                                                                                                                                                                                    
      "lib": ["es6", "dom"],                                                                                                                                                                                                                    
      "strict": true,                                                                                                                                                                                                                           
      "outDir": "./build",                                                                                                                                                                                                                      
      "rootDir": "src/typescript",                                                                                                                                                                                                              
      "allowSyntheticDefaultImports": true,                                                                                                                                                                                                     
      "typeRoots": [                                                                                                                                                                                                                                
         "node_modules/@types",                                                                                                                                                                                                                    
         "node_modules/@typed-mxgraph"                                                                                                                                                                                                         
      ]                                                                                                                                                                                                                                     
   }                                                                                                                                                                                                                                     } 

The version string from my package.json is ^0.21.4, with npm version being 8.3.0.

[kristapsdz-saic]

Great job! I can confirm 0.21.5 works with a tsconfig.json having skipLibCheck set to false, which is the default if omitted. (Please ignore the typeRoots in the following: I’m using the custom-colour extensions to BpmnVisualization, and will separately add a note that this should be in the documentation.)

{
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "lib": [
      "es6",
      "dom"
    ],
    "strict": true,
    "outDir": "./build",
    "rootDir": "src/typescript",
    "forceConsistentCasingInFileNames": true,
    "typeRoots": [
      "node_modules/@types",
      "node_modules/@typed-mxgraph"
    ]
  }
}

[csouchet]

@kristapsdz-saic Thank you very much to report this problem. We will come back to you soon after analysis 🙂