Can't find module entry since v6

[TomCorvus]

Hi!
I'm trying to build without success my app with the v6 but the bundler seems to don't find the entry :

 ERROR  Error: While trying to resolve module `react-error-boundary` from file `/Users/user/core/src/components/ErrorBoundaryCatcher/ErrorBoundaryCatcher.tsx`, the package `/Users/user/core/node_modules/react-error-boundary/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/user/core/node_modules/react-error-boundary/index`.

Any idea?

It is a react-native project.

Thank you.

[TowhidKashem]

Upgraded error boundary from 5 to 6 while upgrading to expo sdk 53 and ran into the same issue.

Downgrading for the time being helped get past it for now:

"react-error-boundary": "^5.0.0",

I wonder if it's at all related to expo/expo#36375

[bvaughn]

Hmm 🤔 Sorry to hear you ran into this! I think it might be an issue with RN/Expo tooling. (I'm not sure what the state of ESM support is.) Seems potentially related to expo/expo#30323

Best bet for you might be to use version 5 of this library (for now). Or you could try one of the workarounds mentioned on that thread.

[CheloXL]

I'm having the same issue but with a standard react web app.

[bvaughn]

Without more details, I can’t help. I do suspect it has to do with your bundler/build tooling not supporting ESM though- in which case the recommended fix is to upgrade your tooling or downgrade to version 5 of this library

[TomCorvus]

It seems that Hermes doesn't support natively ESM.
On my side, I need to modify Metro config and enable unstable_enablePackageExports like this:

config.resolver.unstable_enablePackageExports = true

Maybe one day:
facebook/hermes#1391

[reredemir]

Hello, same here on standard react app project.

import { ErrorBoundary } from 'react-error-boundary'

Unable to resolve path to module 'react-error-boundary'.eslint import/no-unresolved

[bvaughn]

Please take the time to read comments above before adding a comment 🙇🏼

[bvaughn]

Yeah @TomCorvus, that’s unfortunate. But in this case you aren’t missing out on anything by sticking with version 5. Same features. This package has been stable for a long time, feature wise.

[CheloXL]

Without more details, I can’t help. I do suspect it has to do with your bundler/build tooling not supporting ESM though- in which case the recommended fix is to upgrade your tooling or downgrade to version 5 of this library

I'm using parcel as bundler/build. It supports ESM as all my libraries are ESM builds. Of course I already downgraded to v5, my comment was just to tell that it's not only a react-native issue.

[bvaughn]

Agreed that it doesn’t really have anything to do with React native, no. Just what features tooling supports. But without specific details about the tooling (including version numbers, config files) it’s difficult to do anything meaningful here.

I think Parcel requires explicit opt-in:
https://parceljs.org/features/dependency-resolution/#package-exports

[CheloXL]

Agreed that it doesn’t really have anything to do with React native, no. Just what features tooling supports. But without specific details about the tooling (including version numbers, config files) it’s difficult to do anything meaningful here.

I think Parcel requires explicit opt-in: https://parceljs.org/features/dependency-resolution/#package-exports

One thing that I noticed is that v6 installed itself in the app folder and not in the repo folder. I have a monorepo with the following structure:

• packages
  • lib1
  • lib2
  • ...
• apps
  • app1
  • app2
  • ...
• node_modules

There is a root package.json, and every lib/app has its own package.json. All packages are installed in the root node_modules. When I upgrade react-error-boundary in, let's say, app1, a new node_modules folder is created inside app1. And I believe that's the problem. The bundler is looking for the library in the wrong path (./node_modules instead of ./app1/node_modules). Not sure why this is happening. This is the first package that does that.

[bvaughn]

For what it's worth, I followed the "getting started" guides for both Vite and Parcel and version 6 of this package worked fine with both out of the box. No custom configuration needed.

[MikeSha]

Hello guys,

I've spent some time on that and looks like react-error-boundary works just fine. The problem is how eslint-plugin-import (rule import/no-unresolved) reacts on ES-only modules. I mean, UNLESS your project supports ES modules. See import-js/eslint-plugin-import#2331 (comment). So, the way to make eslint-plugin-import not to complain is to add ES-only packages to the ignore list.

      'import/no-unresolved': [2, { caseSensitive: true, ignore: ['^react-error-boundary$'] }],

Possibly there are alternatives for eslint-plugin-import, but I haven't dug into it yet.

[KingAmo]

I am currently using react-native@0.72. When upgrading react-error-boundary from version 5 to version 6, I encountered this error. while i could not upgrade my react native version now, should i stay on react-error-boundary v5 ?