protoc generated typescript .d.ts file generates "Module not found" error

[carsoni]

Background:

npx create-react-app
protoc -I=. src/greet.proto --js_out=import_style=typescript:. --grpc-web_out=import_style=typescript,mode=grpcwebtext:.

syntax = "proto3";

package greet;

// The greeting service definition.
service Greeter {
  // Sends a greeting
  rpc SayHello (HelloRequest) returns (HelloReply);
}

// The request message containing the user's name.
message HelloRequest {
  string name = 1;
}

// The response message containing the greetings.
message HelloReply {
  string message = 1;
}

Outcome:

The above produces a react application, a greet_pb.d.ts and a GreetServiceClientPb.ts

I can import the Client and the HelloRequest and HelloReply classes into my App.tsx with no apparant problems

import React, { useState } from 'react';
import * as grpcWeb from 'grpc-web';
import './App.css';
import { GreeterClient } from './GreetServiceClientPb';
import { HelloRequest, HelloReply } from './greet_pb';

const App: React.FC = () => {
    const [output, setOutput] = useState('');
    let request = new HelloRequest().setName('Ian');
    const client = new GreeterClient('https://localhost:5001');

    client.sayHello(request, { 'custom-header-1': 'value1' }, (err: grpcWeb.Error, reply: HelloReply) => {
        if (err) {
            if (err.code !== grpcWeb.StatusCode.OK) {
                setOutput('Error code: ' + err.code + ' "' + err.message + '"');
            }
        }
        if (reply) {
            setOutput(reply.getMessage());
        }
    });

    return (
        <div className="App">
            <header className="App-header">
                <p>{output}</p>
            </header>
        </div>
    );
};

export default App;

but when I attempt to

npm start

I get

Module not found: Can't resolve './greet_pb' in '/home/paradigm.local/ian/RiderProjects/GRPC/grpc-react/src'

Tried in Rider and VSCode Tried restarted the Typescript service Tried restarted the IDEs Tried wrapping the .d.ts in a declare

All these attempts to correct the problem lead to the same Module not found error The same App.tsx works fine if if I use

protoc -I=. src/greet.proto --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

for generation.

Am I using protoc incorrectly or is this caused by the use of create-react-app and there is a webpack issue? I don't want to have to eject if I can avoid it.

Thanks in advance for any help you can provide Regards Ian Carson

[stanley-cheung]

--js_out=import_style=typescript:. doesn't work

try --js_out=import_style=commonjs:.

See https://github.com/grpc/grpc-web/#typescript-support

[carsoni]

Yep that was it for sure. Apologies for the "Doh!" I discovered the mistake independently about 8 minutes ago Thanks again for the help