Comments (18)
I figured out what was causing it in create-react-app
... It is this line.
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
- The scripts can be ejected, which I believe removes the line above by default
/* eslint-disable */
can be added to the generated js file
Thanks for your time in helping troubleshoot this issue
from grpc-web.
Here is my bash script.
First loop generates .js and .ts files.
Second loop adds /* eslint-disable */'
to the beginning of generated files.
TS out is not necessary here, but it helps a lot in IDE.
for f in "${PROTO_DIR}"/*.proto
do
protoc3 \
--plugin="protoc-gen-ts=${PROTOC_GEN_TS_PATH}" \
--proto_path="${PROTO_DIR}" \
--js_out=import_style=commonjs,binary:${OUT_DIR} \
--ts_out=${OUT_DIR} \
"${f}"
done
for f in "${OUT_DIR}"/*.js
do
echo '/* eslint-disable */' | cat - "${f}" > temp && mv temp "${f}"
done
from grpc-web.
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.
from grpc-web.
@deltaskelta: Can you please explain the issues you were seeing? Apologies for the long delay in responding to your issue.
from grpc-web.
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.
from grpc-web.
Hey @deltaskelta, would you be able to provide a minimal set of steps to reproduce the issue? Thanks
from grpc-web.
Yes I will try, it might be a few days until I can get around to it.
from grpc-web.
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
from grpc-web.
@deltaskelta Thanks for the repo. Looking into it! There's also a mention of this issue on
from grpc-web.
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!
from grpc-web.
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.
from grpc-web.
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.
from grpc-web.
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.
from grpc-web.
ok, could you post the webpack config here? or a gist?
from grpc-web.
ok thanks I'll look into it too
from grpc-web.
It seems this problem in create-react-app is wider than the protobuf issue.
See related "doesn't respect .eslintignore" issue - https://github.com/facebookincubator/create-react-app/issues/2339)
from grpc-web.
@jonathan-se your link text shows the right place, but it actually links right to this thread
from grpc-web.
That's so interesting. above two solution work for me. Is it possible to add alla generated js files to a specific folder and setting react lint ignore?
from grpc-web.
Related Issues (20)
- Detach IsGrpcWebRequest and IsGrpcWebSocketRequest from WrappedGrpcServer HOT 2
- grpcwebproxy websocket connection fails with specific origin HOT 2
- QUIC and HTTP3 support HOT 1
- Status codes and error messages are displayed incorrectly on the angular client. HOT 4
- Golang Grpc Web Server UnaryInterceptor is not triggered by grpc-web Client HOT 1
- Get client stream method return HOT 3
- ReferenceError: self is not defined when trying to call a grpc-web function from a CLI/server application HOT 3
- grpcwebproxy - Help Proxying existing GRPC service HOT 1
- Add support of bufbuild/protobuf-es HOT 3
- Changing route to the root of the host HOT 1
- Lack of grpc Trailers-Only support in the wrapHandler function
- Is there any way to use Nginx or Envoy with this project? HOT 1
- Question: What is the status of `go/grpcwebproxy` project? HOT 3
- grpc-web: Importing as ESModule in Node HOT 1
- grpcwebproxy `--allowed_headers` param is case-sensitive for WebSocket
- Grpc client unexpected behavior HOT 1
- Project status
- grpc-web. `Response closed without headers` but no way to get the status code.
- grpcwebproxy: 400 bad request on websocket connection attempts HOT 1
- How to set a fieldmask on a grpc request? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grpc-web.