Is there an module dependencies conflicts?

[Ken-Scofield]

Describe the Bug

When remove this config belew in webpack configs, I got an error. (custom components demo)

error screenshot:

webpack config:
// new NormalModuleReplacementPlugin(
// /^(../preact|preact)(/[^/]+)?$/,
// function (resource) {
// const replMap = {
// 'preact/hooks': path.resolve('node_modules/preact/hooks/dist/hooks.module.js'),
// 'preact/jsx-runtime': path.resolve('node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js'),
// preact: path.resolve('node_modules/preact/dist/preact.module.js'),
// '../preact/hooks': path.resolve('node_modules/preact/hooks/dist/hooks.module.js'),
// '../preact/jsx-runtime': path.resolve('node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js'),
// '../preact': path.resolve('node_modules/preact/dist/preact.module.js')
// }
// const replacement = replMap[resource.request]
// console.log('resource-request', resource.request)
// if (!replacement) {
// return
// }
// resource.request = replacement
// }
// )
Can you help me, find it out this problems? @pinussilvestrus ,thanks

Environment

• Host (Browser/Node version), if applicable: [e.g. MS Edge 18, Chrome 69, Node 10 LTS]
• OS: [e.g. Windows 7]
• Library version: [e.g. 2.0.0]

[Ken-Scofield]

it's seems somewhere read hooks.module.js in error place, i cant figure it out? help!

[Ken-Scofield]

And, if i add this webpack config, I got another error in bpmnjs : EventBus.js:421 unhandled error in event listener TypeError: Cannot read properties of null (reading '__H') , help help help... bpmnjs report.

[Ken-Scofield]

@nikku can you help me? Is this because of the dependency "preact" ?

[nikku]

Ensure you de-duplicate preact. Which example can you reproduce this with?

[Ken-Scofield]

Ensure you de-duplicate preact. Which example can you reproduce this with?

https://github.com/Ken-Scofield/bpmn-form-demo.git，my demo address， please carry me.

[Ken-Scofield]

Running with webpack5. Can't use "playground" and something else at the same time, OR, how to de-duplicate preact in webpack5?

[Ken-Scofield]

And i try :
resolve: {
alias: {
preact: path.resolve(__dirname, 'node_modules/preact'),
'../preact': path.resolve(__dirname, 'node_modules/preact')
// 'preact/hooks': path.resolve(__dirname, 'node_modules/preact/hooks/dist/hooks.module.js'),
// 'preact/jsx-runtime': path.resolve(__dirname, 'node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js'),
// 'preact/compat': path.resolve(__dirname, 'node_modules/preact/compat/dist/compat.module.js')
}
},
then bpmnjs not worked?

[Ken-Scofield]

I have used form-js-example and bpmn-js example in one project, and they cant work in the same time cause of preact module . Please help me firgure it out, Thanks ! @nikku

[Ken-Scofield]

@Skaiir

[Ken-Scofield]

finnally, i figure it out , cause preact duplicate, see https://github.com/Ken-Scofield/bpmn-form-demo,

resolve: {
      alias: {
        preact: path.resolve(__dirname, 'node_modules/preact'),
        '@bpmn-io/properties-panel/preact': path.resolve(__dirname, 'node_modules/preact'),
        '../preact': path.resolve(__dirname, 'node_modules/preact')
      }
},

3 path are used to import preact , set 3 alias to resolve it, I don't know if it's correct, but it does solve the problem.

[nikku]

@Ken-Scofield Beyond aliasing (which always works) npm dedupe or explicit dependency versioning through
overrides are known to work techniques to address this issue.

[Ken-Scofield]

@Ken-Scofield Beyond aliasing (which always works) npm dedupe or explicit dependency versioning through overrides are known to work techniques to address this issue.

Thank you very much, I've learned