Как исправить ошибку подключения файла с генерированным grcp-web при gRCP запросе?

Question

[Дмитрий Путилов]

Всем привет, возникла вот такая вот проблема, но с начала предистория что я делал
1) Развернул проект на vite ~ npm create vite@latest
2) Скачал все нужные зависимости для преобразования scan.proto в js

sudo npm grpc-web protoc-gen-js protoc-gen-grpc-web google-protobuf @types/google-protobuf

3) Запустил команду для преобразования

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

Вот кст какой содержимое scan.proto

syntax = "proto3";

import "google/protobuf/empty.proto";

package scanning;

service NetworkScanner {
  rpc CaptureImage (google.protobuf.Empty) returns (CapturedImageReply);
}

message CapturedImageReply {
  string path = 1;
}

У меня создались 2 файла в src/gen как я и указывал


Далее я пишу вот такой вот код в App.js

Код App.js

import {NetworkScannerClient} from "./gen/scan_grpc_web_pb.js"
import {Empty} from "google-protobuf/google/protobuf/empty_pb.js";

const App = () => {

    const client = new NetworkScannerClient("192.168.11.178:51739")
    const request = new Empty()

    client.captureImage(request, {}, (error, response) => {
        if (!error) {
            console.log('Получен ответ от сервера:', response.getPath());
        } else {
            console.error('Ошибка при выполнении запроса:', error);
            console.log('err')
        }
    });

    return (
        <div>
            
        </div>
    );
};

export default App;

И возникает вот такая вот ошибка, в чем проблема?!!!


3 день пытаюсь разобраться с этой проблемой, хотя файл то есть и импорт в нем есть, на всякий случай приложу код с генерированного файла

Код scan_grpc_web_pb.js

/**
 * @fileoverview gRPC-Web generated client stub for scanning
 * @enhanceable
 * @public
 */

// Code generated by protoc-gen-grpc-web. DO NOT EDIT.
// versions:
// 	protoc-gen-grpc-web v1.4.2
// 	protoc              v3.21.12
// source: scan.proto


/* eslint-disable */
// @ts-nocheck



const grpc = {};
grpc.web = require('grpc-web');


var google_protobuf_empty_pb = require('google-protobuf/google/protobuf/empty_pb.js')
const proto = {};
proto.scanning = require('./scan_pb.js');

/**
 * @param {string} hostname
 * @param {?Object} credentials
 * @param {?grpc.web.ClientOptions} options
 * @constructor
 * @struct
 * @final
 */
proto.scanning.NetworkScannerClient =
    function(hostname, credentials, options) {
  if (!options) options = {};
  options.format = 'text';

  /**
   * @private @const {!grpc.web.GrpcWebClientBase} The client
   */
  this.client_ = new grpc.web.GrpcWebClientBase(options);

  /**
   * @private @const {string} The hostname
   */
  this.hostname_ = hostname.replace(/\/+$/, '');

};


/**
 * @param {string} hostname
 * @param {?Object} credentials
 * @param {?grpc.web.ClientOptions} options
 * @constructor
 * @struct
 * @final
 */
proto.scanning.NetworkScannerPromiseClient =
    function(hostname, credentials, options) {
  if (!options) options = {};
  options.format = 'text';

  /**
   * @private @const {!grpc.web.GrpcWebClientBase} The client
   */
  this.client_ = new grpc.web.GrpcWebClientBase(options);

  /**
   * @private @const {string} The hostname
   */
  this.hostname_ = hostname.replace(/\/+$/, '');

};


/**
 * @const
 * @type {!grpc.web.MethodDescriptor<
 *   !proto.google.protobuf.Empty,
 *   !proto.scanning.CapturedImageReply>}
 */
const methodDescriptor_NetworkScanner_CaptureImage = new grpc.web.MethodDescriptor(
  '/scanning.NetworkScanner/CaptureImage',
  grpc.web.MethodType.UNARY,
  google_protobuf_empty_pb.Empty,
  proto.scanning.CapturedImageReply,
  /**
   * @param {!proto.google.protobuf.Empty} request
   * @return {!Uint8Array}
   */
  function(request) {
    return request.serializeBinary();
  },
  proto.scanning.CapturedImageReply.deserializeBinary
);


/**
 * @param {!proto.google.protobuf.Empty} request The
 *     request proto
 * @param {?Object<string, string>} metadata User defined
 *     call metadata
 * @param {function(?grpc.web.RpcError, ?proto.scanning.CapturedImageReply)}
 *     callback The callback function(error, response)
 * @return {!grpc.web.ClientReadableStream<!proto.scanning.CapturedImageReply>|undefined}
 *     The XHR Node Readable Stream
 */
proto.scanning.NetworkScannerClient.prototype.captureImage =
    function(request, metadata, callback) {
  return this.client_.rpcCall(this.hostname_ +
      '/scanning.NetworkScanner/CaptureImage',
      request,
      metadata || {},
      methodDescriptor_NetworkScanner_CaptureImage,
      callback);
};


/**
 * @param {!proto.google.protobuf.Empty} request The
 *     request proto
 * @param {?Object<string, string>=} metadata User defined
 *     call metadata
 * @return {!Promise<!proto.scanning.CapturedImageReply>}
 *     Promise that resolves to the response
 */
proto.scanning.NetworkScannerPromiseClient.prototype.captureImage =
    function(request, metadata) {
  return this.client_.unaryCall(this.hostname_ +
      '/scanning.NetworkScanner/CaptureImage',
      request,
      metadata || {},
      methodDescriptor_NetworkScanner_CaptureImage);
};


module.exports = proto.scanning;

Comments

[Aetae]

Ну проблема в том, что сгенерированный файл использует commonjs модули, а App ждёт es модуля.
По идее сборщик должен пересобрать импортируемый файл как ему надо, но что по этому поводу думает vite - хз.

[Дмитрий Путилов]

Aetae, С create-react-app такая же проблема

[Дмитрий Путилов]

Aetae, Все доки пишут что у всех работает, у меня походу у одного не работает и вот как это решить, я хз

[Aetae]

Дмитрий Путилов, попробуй убрать .js в импортах.:)

[Дмитрий Путилов]

Aetae, Тестил, все таки вы были правы на счет vite, в create-react-app сработало)