require() of ES Module error with vitest for reaflow

[vasanthid]

I am getting below error when I tried to write vitests for a react component that uses reaflow. I am using [email protected]

require() of ES Module /node_modules/p-cancelable/index.js from /node_modules/reaflow/dist/index.cjs.js not supported.
Instead change the require of index.js in /node_modules/reaflow/dist/index.cjs.js to a dynamic import() which is available in all CommonJS modules.

I am using below imports in my React component

import { Canvas, Node, Edge, Add} from 'reaflow'
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'

Has anyone run into this issue before? Any help is greatly appreciated. Thanks.

[vasanthid]

I could get rid of require() of ES Module error after upgrading to [email protected].

But, then encountered 'Can not find module error with 'elkjs/lib/elk.bundled''.

I had to update webpack.config

resolve: {
    alias: {
       'elkjs/lib/elk.bundled': path.resolve(__dirname, 'node_modules', 'elkjs/lib/elk.bundled.js')
    },

Also, I had to update vitest.config.js

test: {
    deps: {
      inline: ['reaflow']
    },

After these updates, I was able to run the tests but they are failing due to 'foreignObject' not being rendered. Nodes and Edges are not rendered in the screen.debug(). So, my assertions are failing.

[amcdnl]

Thanks for sharing this. Does it work everywhere else - just not tests?

[vasanthid]

@amcdnl - I was encountering 'require() of ES Module /node_modules/p-cancelable/index.js' error with [email protected]. This error was only with tests.
After upgrading to [email protected], I got 'Can not find module error with 'elkjs/lib/elk.bundled'' with both tests and the application. Hence, I had to update both webpack and vitest.config.