Cannot Resolve 'elk.bundled' While Building the App

[NoviaHuang]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Getting this error message while building the app.

Module not found: Error: Can't resolve 'elkjs/lib/elk.bundled' in '...\node_modules\reaflow\dist'
Did you mean 'elk.bundled.js'?
BREAKING CHANGE: The request 'elkjs/lib/elk.bundled' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Expected behavior

Should just build the app.

Minimal reproduction of the problem with instructions

1. npx create-react-app my-app
2. In my-app folder, npm i reaflow
3. Put the example in readme file into app.js
4. npm run build

What is the motivation / use case for changing the behavior?

I'm using OpenShift to build the app and it uses package.json to install all the npm packages. So I can't just go into the node module and manually fix it. I have tried manipulating webpack config using craco, but it introduces more problems than resolving this bug.

Environment

Libs:
- react version: 18.2.0


For Tooling issues:
- Node version: 18.15.0
- Platform:  Windows
- Webpack: 5.88.2            

[walkdoer]

Hi, I have the same issue here, the error log is bellow. so I report here, hope it could help.

ERROR in ./node_modules/reaflow/dist/index.js 18:0-40
Module not found: Error: Can't resolve 'elkjs/lib/elk.bundled' in '.../node_modules/reaflow/dist'
Did you mean 'elk.bundled.js'?
BREAKING CHANGE: The request 'elkjs/lib/elk.bundled' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

my webpack version is 5.57.0.

[walkdoer]

I think that this issue is not related to Reaflow itsefl. In my running environment, it's related the Webpack config issue.

So I add one module rule in webpack config, and it solved my problem. In case someone need it.

module: {
    rules: [
      //... other configs,
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false,
        },
      },
    ],
}