Can't build project on React Native + Metro

[vegidio]

Description

Trying to use graphql-request with React Native, but I'm getting this error when I try to run my app:

Error: While trying to resolve module `graphql-request` from file `/myproject/react-native-common/src/services/fetchers.ts`, the package `/myproject/react-native-common/node_modules/graphql-request/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/myproject/react-native-common/node_modules/graphql-request/index`. Indeed, none of these files exist:

  * /myproject/react-native-common/node_modules/graphql-request/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * /myproject/react-native-common/node_modules/graphql-request/index/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at DependencyGraph.resolveDependency (/myproject/react-native-common/node_modules/metro/src/node-haste/DependencyGraph.js:272:17)
    at Object.resolve (/myproject/react-native-common/node_modules/metro/src/lib/transformHelpers.js:177:21)
    at Graph._resolveDependencies (/myproject/react-native-common/node_modules/metro/src/DeltaBundler/Graph.js:432:35)
    at Graph._processModule (/myproject/react-native-common/node_modules/metro/src/DeltaBundler/Graph.js:218:38)
    at async Graph._addDependency (/myproject/react-native-common/node_modules/metro/src/DeltaBundler/Graph.js:314:20)
    at async Promise.all (index 2)
    at async Graph._processModule (/myproject/react-native-common/node_modules/metro/src/DeltaBundler/Graph.js:263:5)
    at async Graph._addDependency (/myproject/react-native-common/node_modules/metro/src/DeltaBundler/Graph.js:314:20)
    at async Promise.all (index 0)
    at async Graph._processModule (/myproject/react-native-common/node_modules/metro/src/DeltaBundler/Graph.js:263:5)

Reproduction Steps/Repo Link

The project can be found here:
https://github.com/vegidio/react-native-common/tree/zustand (branch zustand)

[vegidio]

After some investigation it seems that the problem is caused by the lack of a main property in the library's package.json. Without this property, Metro looks for a file "index.js" in the library's root folder but it doesn't find anything there, causing this problem.

After I edited the package.json file in the "node_modules/graphql-request/" and I added the property main, it started to work:

"main": "./build/esm/index.js",

Can the main property be included in the package.json or maybe there's something that is causing this problem?

[jasonkuhrt]

@vegidio main is an ancient field deprecated for years in favour of exports. The ecosystem tools should fall in line. I'm willing to read arguments from other tools why they refuse to support exports. Unless there are good reasons I would rather see the community finally modernize on this stuff. For all I know these tools have and you're just using old versions of stuff.

Moving this to a discussion since right now there is no issue to act on and it is not a bug with the library.

[ismay]

I'm not against moving to exports if that is the modern standard. But I do think it's nice to do so in a way that is minimally disruptive. Support for resolving via exports still has to be merged here browserify/resolve#224, and that not being merged is causing linting errors for eslint's import plugin (quite a widely used library) and its no-unresolved rule. See here: import-js/eslint-plugin-import#1810.

As mentioned in import-js/eslint-plugin-import#1810 (comment):

why would your Google SDKs be using exports, without main, in a way that's not backwards-compatible?

Now that comment sounds a bit accusatory, but I do think that it makes a decent point: why not keep the main property in place? It seems like an easy fix that allows this lib to adopt the modern standard, whilst still not breaking tooling that hasn't adapted yet.

[vegidio]

Thanks for the quick response.

I'm in favor of letting the deprecated stuff die, but I'm not sure what old things I might be using.

If you look at the repo that I linked before, this is a fresh React Native project created just 18 days ago so it's supposedly using the newest version.

Do you have any idea what old thing could be causing this problem so I can report to the correct maintainer to suggest an upgrade?

[vegidio]

Ok, so I pinged the React Native + Metro maintainers and it turns out exports are not supported yet by them, but they are working on it: facebook/metro#670

I just wanted to get that clarified before we continue because some people could get confused with the previous message that the current tools already support this, which is not the case yet.

Meanwhile, there's a workaround for this problem. People with the same issue can update their metro.config.js to resolve the module from another path, like this:

resolver: {
    resolveRequest: (context, moduleName, platform) => {
        if (moduleName.startsWith('graphql-request')) {
            return {
                filePath: `${__dirname}/node_modules/graphql-request/build/esm/index.js`,
                type: 'sourceFile',
            };
        }

        return context.resolveRequest(context, moduleName, platform);
    },
},

Full example available in my project

@jasonkuhrt I would suggest to maybe include the workaround above in the package's README.md file (the same way the React Navigation folks did for a similar problem) to help other developers that are having the same problem using graphql-request with React Native, while the newest version of Metro doesn't come or for those that will be stuck with old versions.

[jasonkuhrt]

@vegidio I'd love a PR in the README for this! Please feel free I'll get it submitted ASAP.

[jasonkuhrt]

Related #526 (comment)