Is Typescript totally necessary?

[jeffwillette]

I am wondering if this can be made to use with plain ES5 javascript without the typescript bits. I tried for a while to integrate it in a normal ReactJS workflow but I could not do it without TS

[MarcusLongmuir]

@deltaskelta: Can you please explain the issues you were seeing? Apologies for the long delay in responding to your issue.

[jeffwillette]

I have since given up and gone with pure typescript, but I just fired up an example with create-react-app and I get multiple compile errors saying 'proto' is not defined from the _pb.js.

for example...

Line 292:  'proto' is not defined     no-undef

which is quite obviously coming from the lines...

var jspb = require('google-protobuf');
var goog = jspb;
var global = Function('return this')();

goog.exportSymbol('proto.pb.PBObject', null, global);

So I am unsure if the issue is coming form the way I am compiling the files, which is just as prescribed from the improbable-eng repo, or if I should look elsewhere for the reason why it is not finding the symbol after exportSymbol is called.

[easyCZ]

Hey @deltaskelta, would you be able to provide a minimal set of steps to reproduce the issue? Thanks

[jeffwillette]

Yes I will try, it might be a few days until I can get around to it.

[jeffwillette]

I made a repo that simply recreates the issue...
https://github.com/deltaskelta/grpc-web-issue-96

If you follow the simple instructions in the README and start the react dev server, you can see the errors.

the proto files and the compile script are in react-app/src/protobuf so you can see how they were compiled

[easyCZ]

@deltaskelta Thanks for the repo. Looking into it! There's also a mention of this issue on

protocolbuffers/protobuf#3931

[jonathan-se]

When I packed the react project with webpack it resolves all the imports and the result is a working bundle.js.

Not, sure but I believe the problem has something to do with the server provided by the create-react-app and with its way of resolving imports and requires.

Still the webpack solution isn't ideal for the developing process itself, so a better solution would be great!

[easyCZ]

I came to a similar finding yesterday, it looks to be related to create-react-app rather. A non create-react-app setup works fine for me. Will dig deeper into what's triggering this in create-react-app.

[jeffwillette]

What do you mean by "packed"? do you mean you ejected the webpack config from the stock create-react-app and modified it?

I suspected it might be a webpack issue but I tried some different loaders and didn't have much luck.

[jonathan-se]

I created a webpack config myself and after webpacking it I used the output bundle.js and an index.html with a different server than the create-react-app one.

[jeffwillette]

ok, could you post the webpack config here? or a gist?

[easyCZ]

I can confirm that there are no issues when using webpack outside of create-react-app. Here's a grpc-web-js-examle repo with a working pure JS usage of grpc-web. Will continue to investigate why create-react-app throws errors.

[jeffwillette]

ok thanks I'll look into it too

[jeffwillette]

I figured out what was causing it in create-react-app... It is this line.

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L138

It is only failing to compile because the default react-scripts forces eslint errors to fail to compile. It is part of create-react-app's opinionated webpack config. I can see only two ways to go about fixing it

1. The scripts can be ejected, which I believe removes the line above by default
2. /* eslint-disable */ can be added to the generated js file

Thanks for your time in helping troubleshoot this issue