Cannot import from bpmn-js when using a default "react-scripts" app

Developers
1

When I create an app using “npx create-react-app my-app” I am unable to import the bpmn-js library into typescript files. For instance, when I try:

import BpmnJS from 'bpmn-js/lib/Modeler'

I get the error in VS code:

"Could not find a declaration file for module 'bpmn-js/lib/Modeler'. "

I can see the Modeler.js file with the default export in the node modules folder so I am not sure why it is not seeing the module. I am assuming it has something to do with the webpack config that the react-scripts package uses behind the scenes because all the examples on github use their own webpack.config. If I wanted to use my own webpack config I would need to run the “npm run eject” command which will un-encapsulate all the things react-scripts does for you. It would be nice to be able to import from the bpmn-js package like other libraries when using react-scripts. Is there maybe a setting in my tsconfig.json I need to change? Here is my tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Thanks!

2

The error indicates that there are no TypeScript type declarations for bpmn-js, which is needed for advanced editor hinting / support.

At this stage this is correct and you want to resort to our publicly accessible examples to learn how to use the toolkit. However type definitions are on our radar, to be added one day in the future.