Registry / devops / webpack-grpc-web-loader

webpack-grpc-web-loader

library0.1.8jsnpmunverified

A webpack loader that compiles .proto files into gRPC-Web JavaScript client code during the build process, eliminating the need to manually install protoc or protoc-gen-grpc-web. Current stable version 0.1.8. Works with webpack 4/5. Key differentiator: fully automates proto compilation within webpack, supporting multiple proto paths and easy integration.

devops

npm install webpack-grpc-web-loader

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · WEBPACK-GRPC-WEB-L

webpack-grpc-web-loader

devopsjavascriptv0.1.8

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import myProto from './my.proto';

✗ const myProto = require('./my.proto');

ESM import works if webpack handles module types; CJS require may fail if loader returns ES module.

HelloWorldClient

✓ const client = new myProto.HelloWorldClient('http://localhost:8080');

✗ import { HelloWorldClient } from './my.proto';

The proto file is imported as a default module that contains the service client stubs; named imports are not supported.

ProtoMessage

✓ const request = new myProto.HelloRequest();

Message types are accessed as properties of the default import object.

Shows webpack configuration for .proto files and how to use generated gRPC-Web client in JavaScript.

// webpack.config.js const path = require('path'); module.exports = { module: { rules: [ { test: /\.proto$/, use: { loader: 'webpack-grpc-web-loader', options: { protoPath: path.resolve(__dirname, './protos'), }, }, }, ], }, resolve: { fullySpecified: false, // required when using .proto with default rule }, }; // src/main.js (ESM) import helloProto from './greeter.proto'; const client = new helloProto.GreeterClient('http://localhost:8080', null, null); const req = new helloProto.HelloRequest(); req.setName('World'); client.sayHello(req, {}, (err, resp) => { if (err) console.error(err); else console.log(resp.getMessage()); });

Debug

Known issues

gotchaThe loader automatically downloads protoc and protoc-gen-grpc-web binaries; network access required on first run.

fix

Ensure network connectivity or pre-install the binaries manually.

affects: >=0.0.0

gotchaProto file imports are treated as webpack modules; you must configure resolve.fullySpecified: false if using experiments.outputModule or experiments.mjs.

fix

Set resolve.fullySpecified: false in webpack config.

affects: >=0.0.0

gotchaThe generated code uses CommonJS internally; if webpack config uses ESM output, there may be interop issues with some bundlers.

fix

Ensure your webpack output.library.type is compatible (e.g., 'commonjs2' or 'module').

affects: >=0.0.0

breakingVersion 0.1.0 default protoPath behavior changed; older versions may have used different default paths.

fix

Explicitly set protoPath in options.

affects: <0.1.0

gotchaMultiple proto files may cause namespace collisions if services have same name; loader does not merge across files.

fix

Use unique service names or prefix/proto package.

affects: >=0.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve './my.proto' in ...

Webpack resolver expects .proto extension but may not be configured to handle it.

fix

Add resolve: { extensions: ['.proto'] } to webpack config.

Error: Cannot find module 'grpc-web'

Generated code depends on grpc-web package.

fix

Run npm install grpc-web

TypeError: client.sayHello is not a function

Incorrect client construction or method name.

fix

Check the generated service name and method: use new Proto.ServiceNameClient(url, null, null) and call async client.method(request, metadata, callback).

Upgrade

Version history

0.1.8latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

8 hits · last 30 days

node

Resources

githubhttps://github.com/foisonocean/webpack-grpc-web-loader ↗

packagewebpack-grpc-web-loader ↗

homepagehttps://github.com/foisonocean/webpack-grpc-web-loader#readme ↗