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