Unable to import @bufbuild/protobuf/codegenv1 in generated files.

[HemantNegi]

Hi Team,
Thanks for excellent work here.

Im generating the .ts files using buf, here is my configuration

  - remote: buf.build/bufbuild/es:v2.0.0
    out: typescript
    opt: target=ts,import_extension=none,json_types=true
    include_imports: true

I imported the generated files in my expo based project. But when I run the project it throws below error.

Metro error: Unable to resolve module @bufbuild/protobuf/codegenv1 from /Users/hemant/projects/app/components/stubs/data-service/v1/data_pb.ts: @bufbuild/protobuf/codegenv1 could not be found within the project or in these directories:
  node_modules
  12 |
  13 | import type { GenEnum, GenExtension, GenFile, GenMessage, GenService } from "@bufbuild/protobuf/codegenv1";
> 14 | import { enumDesc, extDesc, fileDesc, messageDesc, serviceDesc } from "@bufbuild/protobuf/codegenv1";
     |                                                                        ^

I verified the @bufbuild/protobuf is available in node_modules also did the cache cleanup. Even wrote a custom resolver for metro. But the error is still there.

Im not sure where to report this and whether this is an issue in the export config of bufbuild/protobuf.

Any help will be appreciated.

[HemantNegi]

I tried testing just the imports in an empty project. And still the same issue.

import React from 'react';
import {Text} from 'react-native';
import { enumDesc, extDesc, fileDesc, messageDesc, serviceDesc } from "@bufbuild/protobuf/codegenv1";

export default function ModalScreen() {
  console.log( enumDesc, extDesc, fileDesc, messageDesc, serviceDesc);

  return (
    <>
      <Text>Hello world</Text>
    </>
  );
}

Error

Metro error: Unable to resolve module @bufbuild/protobuf/codegenv1 from /Users/hemant/projects/tmp/react_native_bp/custom-expo-app/app/index.tsx: @bufbuild/protobuf/codegenv1 could not be found within the project or in these directories:
  node_modules
  ../node_modules
  1 | import React from 'react';
  2 | import {Text} from 'react-native';
> 3 | import { enumDesc, extDesc, fileDesc, messageDesc, serviceDesc } from "@bufbuild/protobuf/codegenv1";
    |                                                                        ^
  4 |
  5 | export default function ModalScreen() {
  6 |

So, im more sure that something is wrong with the package.

[timostamm]

Hey Hemant,

there's a metro issue for supporting package.json exports: facebook/metro#670 It was resolved over a year ago. Can you check that your dependencies are up to date?

We're testing the exports with webpack, vite, rollup, parcel, and esbuild here, and with TypeScript, Node.js and attw in this repository. It seems unlikely that the exports are wrong.

[HemantNegi]

Thanks for the pointer @timostamm,

You are right, its a miss from Metro side! The support for package exports is still behind a feature flag.
I added these to my metro.config.js which solved the problem.

config.resolver.unstable_enableSymlinks = true;
config.resolver.unstable_enablePackageExports = true;

My expo app now working fine with new 2.0.0 release. Thanks a ton!

[HemantNegi]

Update:
App was able to resolve imports, but now the expo router is crashing with weird error that im unable to figure out. (see screenshot)

So as soon I enable

config.resolver.unstable_enablePackageExports = true;

in metro config, im not able to open any page and getting this error.

While its directly not related to protobuf-es and mostly in metro. But metro doc states that the package exports feature is still unstable. So probably you want to provide a fallback way of importing this package.

[HemantNegi]

As an interim solution I have vendored the @bufbuild/protobuf module in the project and created a file
vendor/@bufbuild/protobuf/codegenv1/index.ts with content

export * from "../dist/esm/codegenv1/index.js";

and in my metro config I have added vendor dir

config.resolver.nodeModulesPaths = [
    path.resolve(projectRoot, 'vendor'),
    path.resolve(projectRoot, 'node_modules'),
];

Hoping to see a solution to this soon.

[timostamm]

This looks like in issue in use-latest-callback, see react-navigation/react-navigation#12056 (comment)

If an update doesn't help, it's probably reasonable to vendor this package instead, since it's basically 15 lines of code.

[bor2com]

Is it possible to disable descriptor/reflection generated code in buf? I can't find a relevant option.

[HemantNegi]

Just to confirm as pointed by @timostamm adding below to package.json and then enabling config.resolver.unstable_enablePackageExports = true; in metro config works without vendoring.

  "resolutions": {
    "use-latest-callback": "0.2.1"
  },

[timostamm]

Thanks for the confirmation, Hemant.

@bor2com, it isn't possible to disable descriptors in generated code because they are needed to create and serialize messages. Please feel free to open a separate ticket, discussion, or reach out via slack if you have more questions.