Cannot Read of Properties of Undefined - will all imports from bpmn proerty panel!

Developers
1

I am trying to add custom elements to property panel of the camunda modeler, I have been following the approaches states in camunda docs and bpmn, but whenever i use services from bpmn-io/properties-panel or bpmn-js-properties-panel i keep getting the following error :

TypeError: Cannot read properties of undefined (reading ‘context’)

Sample error trace :
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘context’)
at q (hooks.module.js:1:1551)
at useService (index.esm.js:30:17)
at b.Spell [as constructor] (SpellProps.js:24:30)
at b.O [as render] (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)
at L (preact.module.js:1:1)
at C (preact.module.js:1:1)
at j (preact.module.js:1:1)
at L (preact.module.js:1:1)

Also i made sure that i am using the latest version of the dependencies

@Niklas_Kiefer , @beatriz.mendes and other people from community, can someone help me here??

2

“Git repo :github.com/naveinn/property-panel-extension”

3

Any anyone help here please ?

4

Hi, I am currently investigating this issue.

So my current working theory is that the injected properties panel entries are using the react jsx, which causes mixing of preact and react trees which isn’t something that can be done.

I am experimenting at the moment and I’ll get back to you :slight_smile:

5

Thanks also to add,

I find this warning during import, which might be a potentials cause, but i tried remedies over it but it doesn’t seem to work.Warning : Could not find a declaration file for module ‘@bpmn-io/properties-panel’. ‘/Users/naveikumar/finalProject/bpmn-js-examples/node_modules/@bpmn-io/properties-panel/dist/index.js’ implicitly has an ‘any’ type. If the ‘@bpmn-io/properties-panel’ package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module '@bpmn-io/properties-panel';

but the irony here is that i see the same warning at my examples project, which is stand alone, it works over there but fails as I bundle and use as plugin

this is my webpack config code for ur reference

const CopyWebpackPlugin = require(‘copy-webpack-plugin’);

const path = require(‘path’);

module.exports = {
mode: ‘development’,
watch: true,
entry: ‘./src/app.js’,
output: {
path: path.resolve(__dirname, ‘public/pluginAuto’),
filename: ‘app.js’
},
devtool: ‘source-map’,
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: ‘babel-loader’,
options: {
presets: [‘@babel/preset-env’, ‘@babel/preset-react’]
}
}
},
{
test: /.less$/,
use: [
‘style-loader’,
‘css-loader’,
‘less-loader’,
],
},
{
test: /.css$/,
use: [
‘style-loader’,
‘css-loader’,
]
},
{
test: /.bpmn$/,
use: {
loader: ‘raw-loader’
}
}
]
}
};

6

The issue has been solved here : Useservice('modeling') returning cannot read properties of undefined (reading 'context') camunda modeler

Thanks. @Martin and @Skaiir for the support