search

CharlesStover / reactn

React, but with built-in global state management.
https://www.npmjs.com/package/reactn
MIT License
1.9k stars 85 forks source link

Issue resolving dependency to `use-force-update` in react-native/expo project #226

Closed m4ttheweric closed 2 years ago

m4ttheweric commented 2 years ago

Hey Charles,

I am running into an issue with an Expo/React-Native project resolving the reactn dependency to use-force-update.

I get the following errors (picture, and then error text...)

Screen Shot 2022-07-21 at 12 54 56 PM

iOS Bundling failed 1265ms
While trying to resolve module `use-force-update` from file `/Users/m4ttheweric/Documents/GitHub/mbmd-expo/node_modules/reactn/build/use-dispatch.js`, the package `/Users/m4ttheweric/Documents/GitHub/mbmd-expo/node_modules/use-force-update/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/m4ttheweric/Documents/GitHub/mbmd-expo/node_modules/use-force-update/dist/cjs/index.cjs`. Indeed, none of these files exist:

  * /Users/m4ttheweric/Documents/GitHub/mbmd-expo/node_modules/use-force-update/dist/cjs/index.cjs(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
  * /Users/m4ttheweric/Documents/GitHub/mbmd-expo/node_modules/use-force-update/dist/cjs/index.cjs/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)

I was able to resolve it by making a small change to the package.json to use-force-update within the node_modules dir.

Before:

{
  "main": "./dist/cjs/index.cjs"
}

After:

{
  "main": "./dist/esm/index.js"
}

Any ideas on why this is occurring? I'm not familiar with the cjs/esm setup you're using, so I don't want to comment as to whether my solution is "good".

Thanks!

quisido commented 2 years ago

I'm not positive why this is occurring, but thank you for bringing it to my attention. The file definitely exists.

I have historically been able to successfully assign main as the CommonJS export and module as the ESM export. For some reason, your build is expecting an ESM export (probably because your application is ESM and/or because use-force-update uses the "type": "module" property).

I believe a build tool that is looking for an ESM bundle should be using the module property instead of the main property. Nonetheless, I will attempt to resolve this by using exports instead.

I'm pushing 1.0.10 right now. Give it a few hours to flow through CI/CD and for NPM caches to clear. Then update the nested dependency. I don't know the NPM command offhand, but the yarn command would be yarn up -R use-force-update. You should also be able to do npm uninstall reactn && npm install reactn --save to get a similar effect, as I assume use-force-update is not being locked by any other dependency.

Let me know if 1.0.10 does not resolve this issue for you, and I'll continue the investigation. :)

EDIT: Here is the link to the CI/CD for use-force-update@1.0.10

leachus commented 2 years ago

Thanks for the quick response.

I’ve been testing the same project this was reported on, but on Android. The workaround of updating the package.json fixes the problem when doing a development build, but doesn’t seem to help on a production build.

This afternoon I updated our problem project with your new version 1.0.10 of use-force-update and tried again. The build is still failing.

Here’s the relevant section of the build log: [stderr] error While trying to resolve module use-force-update from file /home/expo/workingdir/build/node_modules/reactn/build/use-dispatch.js, the package /home/expo/workingdir/build/node_modules/use-force-update/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/home/expo/workingdir/build/node_modules/use-force-update/dist/cjs/index.cjs. Indeed, none of these files exist: [stderr]

Thanks for taking a look at this.

quisido commented 2 years ago

This looks like an issue with "MetroJS bundler" not supporting .cjs extensions natively.

https://stackoverflow.com/questions/60124435/however-this-package-itself-specifies-a-main-module-field-that-could-not-be-r

Looks like you need to edit your existing metro.config.js file (or make one if it does not already exist), then add cjs to the resolver.sourceExts array.

Let me know if the above StackOverflow solutions don't unblock you. I can see what else I can do, but I am ultimately relunctant to change the file extension of the bundled CommonJS file, because the different file extension is a requirement for newer versions of Node to distinguish CommonJS from ESM files in the same package.

leachus commented 2 years ago

I edited metro.config.js using info from the Stack Overflow link you supplied and from https://docs.expo.dev/guides/customizing-metro/. The build is working well now, without me needing to futz with the use-force-update package.

Really appreciate your quick help in figuring this out.

minuitagency commented 2 years ago

Hi Charles,

Thanks for the library, could you release an update to reactn that has the fixed use-force-update dependency ? We use reactn in a LOT of projects...

Thanks,

Théo

purplecones commented 2 years ago

Hi Charles,

Thanks for the library, could you release an update to reactn that has the fixed use-force-update dependency ? We use reactn in a LOT of projects...

Thanks,

Théo

This is blocking us as well. Is there anything we can do on our side to address this until it is resolved in the library?

quisido commented 2 years ago

@minuitagency @purplecones Have you tried the configuration change for Metro bundler? As it was initially reported, this is a problem with the Metro bundler, not the dependency, and the fix has already been included in this thread chain.