Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Metro Bundler ignores make-plural #15

Closed
Jonesus opened this issue May 18, 2020 · 18 comments
Closed

Metro Bundler ignores make-plural #15

Jonesus opened this issue May 18, 2020 · 18 comments

Comments

@Jonesus
Copy link

Jonesus commented May 18, 2020

Metro Bundler (used in e.g. React Native development) ignores make-plural with the following error message:

warn Package make-plural has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in <project-dir>/node_modules/make-plural/package.json

Similar issue had recently been resolved at facebook/react-native#28710 with the fix i18next/i18next-http-backend@1d8da79#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R8

How to reproduce (example based on create-react-native-app):

  1. git clone https://github.com/Jonesus/make-plural-repro
  2. npm install
  3. npm run start

We can confirm that it doesn't get bundled by trying to run the example App.js with npm run android or npm run ios

@eemeli
Copy link
Owner

eemeli commented May 18, 2020

Interesting. I think this is the actual source: react-native-community/cli#1168.

While there's no harm in including package.json in the exports, it may take me a little while to get to that.

@Jonesus
Copy link
Author

Jonesus commented May 19, 2020

Hm good find! I'm not sure if based on that issue the react-native-cli maintainers think it's working as intended, but we can see how it pans out. Gladly this isn't a blocker in my project, as I can circumvent the issue by generating the required pluralizations with your make-plural-cli 🥇 Thanks for your consideration!

@ctavan
Copy link

ctavan commented May 20, 2020

@Jonesus is this really a problem in your case? When investigating the same issue in uuidjs/uuid#444 I experienced that react-native-cli did print the warning you are mentioning here but uuid was still correctly included in the bundle…

@ctavan
Copy link

ctavan commented May 20, 2020

Corresponding upstream Node.js issue: nodejs/node#33460

@Jonesus
Copy link
Author

Jonesus commented May 20, 2020

@ctavan yeah it is, at least when I follow the reproduction steps I posted above I get error 500 from the metro bundler telling me that make-plural/plurals can't be found. If you manage to get it included with the repro then it's really interesting

@eemeli
Copy link
Owner

eemeli commented May 20, 2020

Running the repro steps, I'm able to see the warning print in the console, but no error. Does that happen after some other operations?

It's possible that there are two issues being conflated here.

@eemeli
Copy link
Owner

eemeli commented May 20, 2020

Ah, missed the npm run android and npm run ios steps. I can't get either of those to complete; their resulting errors appear to be unrelated to this issue:

$ npm run android
...
> Task :app:validateSigningDebug FAILED
463 actionable tasks: 3 executed, 460 up-to-date

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:validateSigningDebug'.
> Keystore file '/private/tmp/make-plural-repro/android/app/debug.keystore' not found for signing config 'debug'.
$ npm run ios
...
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening repro.xcodeproj. Run CLI with --verbose flag for more details.
Command line invocation:
    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -project repro.xcodeproj -configuration Debug -scheme repro -destination id=A5DDA2D8-EDCE-4571-8039-323FBC4F5DFE

note: Using new build system
note: Planning build
note: Using build description from disk
error: /tmp/make-plural-repro/ios/Pods/Target Support Files/Pods-repro/Pods-repro.debug.xcconfig: unable to open file (in target "repro" in project "repro") (in target 'repro' from project 'repro')
error: /tmp/make-plural-repro/ios/Pods/Target Support Files/Pods-repro/Pods-repro.debug.xcconfig: unable to open file (in target "repro" in project "repro") (in target 'repro' from project 'repro')
error: /tmp/make-plural-repro/ios/Pods/Target Support Files/Pods-repro/Pods-repro.debug.xcconfig: unable to open file (in target "repro" in project "repro") (in target 'repro' from project 'repro')
error: /tmp/make-plural-repro/ios/Pods/Target Support Files/Pods-repro/Pods-repro.debug.xcconfig: unable to open file (in target "repro" in project "repro") (in target 'repro' from project 'repro')
warning: Capabilities for Signing & Capabilities may not function correctly because its entitlements use a placeholder team ID. To resolve this, select a development team in the repro editor. (in target 'repro' from project 'repro')

@Jonesus
Copy link
Author

Jonesus commented May 20, 2020

Hmm I wonder where that came from, yesteday everything seemed to work 🤔
This fixed it for me though: facebook/react-native#25629
I pushed the missing key file, I hope it works now

@ctavan
Copy link

ctavan commented May 20, 2020

For iOS you may need to:

cd ios && pod install && cd -

@ctavan
Copy link

ctavan commented May 20, 2020

Here's what I did:

git clone https://github.com/Jonesus/make-plural-repro
cd make-plural-repro
npm i
cd ios && pod install && cd ..
npm run ios
# Received: Error: Cannot find module '@react-native-community/cli/build/commands/bundle/filterPlatformAssetScales'
npm i --save-dev @react-native-community/cli
npm start
# and in a second terminal:
npm run ios

This results in the following error:

warn Package make-plural has been ignored because it contains invalid configuration. Reason: Package subpath './package.json' is not defined by "exports" in /make-plural-repro/node_modules/make-plural/package.json


To reload the app press "r"
To open developer menu press "d"

[Wed May 20 2020 13:46:33.750]  BUNDLE  ./index.js

error: Error: Unable to resolve module `make-plural/plurals` from `App.js`: make-plural/plurals could not be found within the project.

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
    at ModuleResolver.resolveDependency (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)
    at ResolutionRequest.resolveDependency (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

@eemeli
Copy link
Owner

eemeli commented May 20, 2020

I'm still getting some issues getting to the right error, but it's getting a bit ridiculous setting up a whole toolchain and emulator in order to locally fail the right way.

@Jonesus Could you hack your local node_modules/make-plural/package.json file to include a "./package.json": "./package.json" exports entry, and see if that would fix the problem? If so, I'll just add that to the exports and package a new release.

@ctavan
Copy link

ctavan commented May 20, 2020

I believe this is a deeper problem with the metro bundler resolution algorithm.

When I hack "./package.json": "./package.json" into the exports entry, the react-native-cli warning goes away but the error remains the same as in #15 (comment): Error: Unable to resolve module make-plural/plurals from App.js

If I replace

--- a/App.js
+++ b/App.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
-import { en } from 'make-plural/plurals';
+import { en } from 'make-plural';

I get a different error:

error: Error: While trying to resolve module `make-plural` from file `/make-plural-repro/App.js`, the package `/make-plural-repro/node_modules/make-plural/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/make-plural-repro/node_modules/make-plural/plurals.mjs`. Indeed, none of these files exist:

  * /make-plural-repro/node_modules/make-plural/plurals.mjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * /make-plural-repro/node_modules/make-plural/plurals.mjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at ResolutionRequest.resolveDependency (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:65:15)
    at DependencyGraph.resolveDependency (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
    at _next (/make-plural-repro/node_modules/@react-native-community/cli/node_modules/metro/src/DeltaBundler/traverseDependencies.js:107:9)

So there is a problem with module resolution, but it I'm not 100% sure if it's even caused by react-native-community/cli#1168

@eemeli
Copy link
Owner

eemeli commented May 20, 2020

Yeah, I think this is at least related to this issue: facebook/metro#535

The bundler is probably using the package.json "module" field to resolve the main export, and then failing to accept the .mjs extension. Something similar might be happening with make-plural/plurals due to the "browsers" config, but who knows.

I'll be very happy when I can start dropping CommonJS support from my libraries, because the variety of these corner cases is ridiculous.

@eemeli
Copy link
Owner

eemeli commented Aug 9, 2020

This should now be fixed in make-plural@6.2.2.

@monkora
Copy link

monkora commented Aug 11, 2020

This is still happening for me with 6.2.2:

import * as Plurals from 'make-plural';
Error: While trying to resolve module `make-plural` from file `/Users/.../workspace/app/src/lib/i18n.ts`, the package `/Users/.../workspace/app/node_modules/make-plural/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/hugomckinnon/workspace/app/node_modules/make-plural/plurals.mjs`. Indeed, none of these files exist:

If I try with import * Plurals from 'make-plural/plurals' then I get the following

Error: Unable to resolve module 'make-plural/plurals'

@eemeli
Copy link
Owner

eemeli commented Aug 11, 2020

plurals.mjsis definitely included in the package. Had a quick Google on that error message, it looks like you may need to define sourceExts to include 'mjs' in your Metro config?

@monkora
Copy link

monkora commented Aug 12, 2020

plurals.mjsis definitely included in the package. Had a quick Google on that error message, it looks like you may need to define sourceExts to include 'mjs' in your Metro config?

Thank you that's worked for me. I had to add the default extensions too.

resolver: {
  sourceExts: ['js', 'ts', 'tsx', 'mjs'],
},

@Florianer
Copy link

Florianer commented Dec 6, 2020

plurals.mjsis definitely included in the package. Had a quick Google on that error message, it looks like you may need to define sourceExts to include 'mjs' in your Metro config?

For me, it was adding

    "packagerOpts": {
      "sourceExts": [
        "mjs"
      ]
    },

in the app.json as also mentioned here for the use in expo SDK 39 after upgrading Lingui 2.* to 3.*

renchap added a commit to renchap/js-lingui that referenced this issue Mar 7, 2021
React Native's Metro bundler expects all imports to be declared in the `exports` attribute when there is one defined. Lingui imports it (to get the version I guess?) and Metro refuses it as it was not defined as a valid export.
See eemeli/make-plural#15 for a similar issue on the `make-plural` package

The `main` field for `@babel/macro` was also incorrect as there is no `index.ts` in this project.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants