Cannot use compiled protos in my web app...

[Honya2000]

Hallo,
I spent 2 days trying to use js proto in my web app.

I compiled .proto files to js using protoc compiler with protoc-gen-js plugin. Tried to use commonjs syntax and without it, my app still failes to import the js module.

In my app i'm improting proto this way:
import * as iproto from './protos/classificationlist';

When i'm using commonjs style - it complains that "require is not defined".

When i'm trying without commonjs - it complaines that "goog is not defined".

Not sure what else should i do.

I checked some web sources in official mediapipe github, they use standart import style like i'm using:
import {ClassificationList as ClassificationListProto} from '../../../../framework/formats/classification_pb';

But there is no additional information, everybody are using mediapipe as npm bundles. So not sure how it works there.

Any help will be appreciated...

[dibenede]

I think the answer is that mediapipe is doing something special. Their package.json is using module and they are using rollup with a commonsjs() plugin -> https://github.com/rollup/plugins/tree/master/packages/commonjs

We (protobuf-javascript/google-protobuf) unfortunately don't support ESM at the moment. So, I think this requires other projects do something special (like using rollup or something else) to do the conversion.

If you want to see a boring JS example using require, then it looks like:

package.json

{
...
  "type": "commonjs",
  ...
  "dependencies": {
    "google-protobuf": "^4.0.0"
  }
}

My .proto files are in a protos/ directory. For the sake of simplicity, I generate the code via:

protoc --plugin=protoc-gen-js --js_out=import_style=commonjs,binary:. protos/foo/bar.proto

Let's say the bar.proto contains:

syntax = "proto2";

package foo.some_sub_package;

message MyMessage {
  optional string str = 1;
}

Then my actual code looks like:

simple.js

// Note this is actual path 
require('./protos/foo/bar_pb.js')

// Note the generated code is under the "proto" namespace. 
// It's unrelated the "protos" folder everything the .proto files are stored in.

const MyMessage = proto.foo.some_sub_package.MyMessage;

const msg = new MyMessage().setStr('world');

console.log(`Hello, ${msg.getStr()}!`);

[dibenede]

Hopefully this works as a simple web app example using rollup: https://stackblitz.com/edit/stackblitz-starters-ezmy6nzd?file=main.js

You will need to run: npm run build

Note: this demo just uses the proto gencode I uploaded. We do not own the protoc-gen-js npm package, which is currently stuck on v3.21.4, so I needed to use one of the pre-compiled protoc-gen-js binaries we provide from this github project.

[dibenede]

Closing this out. Please free to re-open if you still need help.