TypeError: Cannot read properties of undefined (reading 'MethodInfo') in react js app using grpc-web

Question

I am using grpc-web to communicate with a java backend over gRPC. I am using ReactJS on the frontend which uses grpc-web to interpret the protobuffers.

I am getting this strange error. My protos are correct ( I checked using a reflection tool called "bloom" so the backend is just fine) This somehow seems like an error internal to the grpc libraries I am using in ReactJS.

I get the following error:

TypeError: Cannot read properties of undefined (reading 'MethodInfo')

The above error points to my proto file: dashboard_services_grpc_web_pb.js

In this file, it point to this line

const methodInfo_DashboardService_userLogin = new grpc.web.AbstractClientBase.MethodInfo( ...... );

I have a hard time solving this because according to my understanding, grpc.web.AbstractClientBase is something native to grpc-web.

I have also reinstalled my node_modules in hopes that this is a version issue but no avail.

Quadrivium

I have also cleared my npm cache both internally and globally by running npm cache clean --force – Quadrivium

I also cloned the project into a new directory in hopes that it must be some caching issue – Quadrivium

Your title mentions grpc-js. How is grpc-js involved here? – Kent

it was installed in the project so I thought it could be worth mentioning @Kent – Quadrivium

OK, are you using it in some way that relates to this question, and if so, how? – Kent

@Kent no not using it anywhere – Quadrivium

Answer 1

I had the same issue because I was using an old release of the executable protoc-gen-grpc-web with respect to the current version of grpc-web. Using version 1.3.0 for both solved the issue for me. You can download the latest release of protoc-gen-grpc-web here.

Absent

Thank you ... but somehow I could not install proto-gen-grpc-web for version 1.3.0. I used the command npm i [email protected] but all I got was No matching version found for [email protected]. – Quadrivium

I just checked npm's website, they haven't released version 1.3.0 yet. Do you know how I can add an exe file to my package.json? – Quadrivium

you need to download the executable for your platform and add it to your PATH variable, then $ protoc -I=$DIR echo.proto \ --js_out=import_style=commonjs:$OUT_DIR \ --grpc-web_out=import_style=commonjs,mode=grpcwebtext:$OUT_DIR will generate the right code. – Absent

Answer 2

In my case it was happening after cache clear, because we had:

"grpc-web": "^1.2.1",

and it was installed version 1.3.0 I changed it to:

"grpc-web": "1.2.1",

and yarn again to fix this issue!

Merrymerryandrew