[BUG] TypeScript project usage (with types)

[kristapsdz-saic]

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.

[csouchet]

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

[tbouffard]

I have been able to reproduce the issue with our examples: project typescript with rollup. It was working with version 0.19.1, but not with recent versions. The definition files are now placed in the npm package in dist/src instead of in dist/. The package also contains extra definitions in dist/dev.

Will work on this on Monday

[kristapsdz-saic]

@csouchet , @tbouffard , thank you!

[tbouffard]

Prior we fix the problem, the workaround is to use version 0.21.2 which is working. In the package.json file, this means using "0.21.2" instead of "^0.21.4".

The issue was introduced in 0.21.3.

[kristapsdz-saic]

I'm afraid I'm not able to get 0.21.2 to work as well:

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

The tsconfig.json file being used is:

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

I can verify that Edge isn't defined anywhere: the edge.ts file is an empty export.

Thank you again for taking the time with this!

[tbouffard]

To avoid the TS1192 and TS2305 errors, add "skipLibCheck": true to the tsconfig.json file (https://www.typescriptlang.org/tsconfig#skipLibCheck). We are filtering internal API when generating the definitions files but some of them are still present in the generated files, that's why there are some missing exports. We are aware of this problem and will work on this topic in the next releases.

[kristapsdz-saic]

I can verify that specifically using 0.21.2 with a tsconfig.json containing "skipLibCheck": true works perfectly! I also was able to remove the typeRoots object and no longer need to explicitly install the mxgraph typings.

Current tsconfig.json:

{  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "lib": ["es6", "dom"],
    "strict": true,
    "outDir": "./build",
    "rootDir": "src/typescript",
    "skipLibCheck": true
  }
} 

The package.json now only contains the bpmn-visualization at 0.21.2, and no longer needs other types.

Thank you! I'll leave this open until a fix is in for the current npm sources, then re-run and test.

[tbouffard]

@kristapsdz-saic good news! We really appreciated your issue report: it was clear, documented, very precise and provided all the attempts you tried to workaround the problem. This was really useful for the investigation. Thanks a lot! 🥇

I have created #1814 that will fix the Could not find a declaration file for module 'bpmn-visualization' problem, and the type errors you saw when using bpmn-visualization@0.21.2 without setting skipLibCheck to true. I also updated the README to better explain how to use the lib in a TypeScript project. Finally, to prevent this problem from happening again, automatic tests have been added both in the library and in the examples.

Once merged, we will released a new version.

[tbouffard]

@kristapsdz-saic release 0.21.5 is available and include the fix. The examples have been updated and show that everything works fine now.

[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"
    ]
  }
}