Incompatible Code Generation and Missing File Issue with `@bufbuild/protoc-gen-es` and `@connectrpc/protoc-gen-connect-es`

[khawa-angx]

Describe the bug

I’m using @bufbuild/protoc-gen-es@2.2.2 and @connectrpc/protoc-gen-connect-es@1.6.1 to generate JavaScript code for the web. However, the generated code from these two tools is incompatible.

Additionally, when generating JavaScript code with @bufbuild/protoc-gen-es, it includes the following import statement:

import { file_buf_validate_validate } from "../../buf/validate/validate_pb";

However, the file ../../buf/validate/validate_pb is not generated, causing the code to break.

To Reproduce

1. Use @bufbuild/protoc-gen-es and @connectrpc/protoc-gen-connect-es to generate JavaScript code.
2. Check the generated code for compatibility issues.
3. Use @bufbuild/protoc-gen-es to generate a file where protovalidate is applied.
4. Observe the missing file import in the output.

Environment:

• @bufbuild/protoc-gen-es version:2.2.2
• @connectrpc/protoc-gen-connect-es version:1.6.1

Additional context I’m using protovalidate on the server side to validate message, and it works perfectly. The issue occurs only with the client-side code generation. I’m looking for guidance on resolving both the compatibility issue between the tools and the missing file import problem.

[timostamm]

Hey @khawa-angx, it is correct that @bufbuild/protoc-gen-es@2.2.2 and @connectrpc/protoc-gen-connect-es@1.6.1 are not compatible with each other. This is a feature - @connectrpc/protoc-gen-connect-es is no longer necessary with version 2. See the release notes and the migration guide for details.

The migration guide also explains the second issue:

Because Protobuf-ES supports custom options and other reflection-based features now, generated code includes more information than in the previous version, and will generate additional imports in some situations.

For example, if you have a Protobuf message that uses validation rules from buf.build/bufbuild/protovalidate, the Protobuf file has an import for the validation options:

import "buf/validate/validate.proto";

The old plugin ignored this import, but the new plugin will generate a corresponding ECMAScript import:

+ import { file_buf_validate_validate } from "./buf/validate/validate_pb";

The imported file is not generated by default. To include imports, add the following option to your buf.gen.yaml config:

# buf.gen.yaml
version: v2
plugins:
  - local: protoc-gen-es
    out: src/gen
+   include_imports: true