Protobuf.js: illegal token '<' (/demo.proto, line 1)

[NeoyeElf]

protobuf.js version: <6.8.6>

protobuf.load throw an Error illegal token '<' (/demo.proto, line 1)

package demopackage;
syntax = "proto3";

message DemoMessage {
  string name = 1;
  fixed32 age = 2;
  bool flag = 3;
  enum TYPE {
    A = 0;
    B = 1;
  }
  TYPE type = 4;
  float score = 5;
  SubDemoMessage sub = 6; 
}

message SubDemoMessage {
  string subName = 1;
  fixed32 subAge = 2;
}

protobuf.load(path.join(__dirname, 'demo.proto'), (err, root) => {
      if (err) {
        throw err
      }

      const DemoMessage = root.lookupType('demopackage.DemoMessage')})

stack trace of the error

Uncaught Error: illegal token '<' (/demo.proto, line 1)
    at illegal (parse.js?a291:94)
    at parse (parse.js?a291:733)
    at process (root.js?c380:107)
    at eval (root.js?c380:182)
    at XMLHttpRequest.fetchOnReadyStateChange (index.js?4b75:103)

when I execute the file alone, it works fine. but when I run it with roadhog server in a react web project, it just throw the error.
Can you help me? thks!

[dcodeIO]

That seems like whatever bundler this is using behind the scenes is adding a < as the first character, like if it was an html file. Probably not related to protobuf.js directly.

[NeoyeElf]

thks, I transfer .proto to .json, and use protobuf.Root.fromJSON, it works! but I have another question. When nodeJS communicates with the browser, how do I Decode an Uint8Array (browser) in nodeJS and decode Buffer (node) in browser?

or what is the best practice for Node and browser communication with protobufJS?

thks!

[gogolxdong]

How to deal with this with proto files?

[zhangtiny123]

I have this issue too, by looking into the source code, I found that:

1. The protobuf.load method calls util.fetch and get data from network
2. And the protobuf.loadSync method calls 'util.fs.readFileSync' and get data from file system, and in the comments says Synchronously loads one or multiple .proto or preprocessed .json files into this root namespace ( **node only** ).

So if we use this protobuf.js in browser, we fetch the .proto file from network , like util.fetch("http://your_current_domain.com" + "filename")

If you provide a filename like "../../file.proto", and you will get the index.html, its content will be pass to a parse(filename, source) function, because the value of source parameter is the content of the index.html file, and this issue occur ... (The first character of source is '<')

[BigEgret]

Hello, have you solved this problem? @NeoyeElf @gogolxdong @zhangtiny123 我是在vue.js里面使用的
protobuf.load Uncaught Error: illegal token '<' (awesome.proto, line 1)

[NeoyeElf]

transfer .proto to .json, and use protobuf.Root.fromJSON. @BigEgret

[zhangtiny123]

@BigEgret Try to make your awesome.proto file be accessible from url

http://your.domain.com/path/to/awesome.proto

and

protobuf.load('/path/to/awesome.proto', (err, root) => {})

[BigEgret]

@zhangtiny123 @NeoyeElf Thank you！

[jkhoel]

I found another work-around for use with node (or React in my case). import your proto-file and just pass it as an argument to .load():
import proto from "./awsome.proto" protobuf.load(proto, (err, root) => {})

[dandymon]

Is this just a codesandbox problem? or has anyone got a working sandbox which they can share?

[hectorPiteau]

@BigEgret Try to make your awesome.proto file be accessible from url

http://your.domain.com/path/to/awesome.proto

and

protobuf.load('/path/to/awesome.proto', (err, root) => {})

You can drop your .proto file in the public directory (the root directory of your website) just near the index.html and load it just with load('demo.proto',function(err,root){/** **/});

Or you can create sub directories to organize your code like @zhangtiny123 shown in his example.