Vite is not working with grpc-web generated code.

[gyang274]

Describe the bug

I am creating a web service with grpc-web support, seems Vite doesn't work along with grpc-web generated file, even with commonjs plugins.

Reproduction

https://github.com/gyang274/demo-grpc-web-vite-issue

System Info

$ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
Need to install the following packages:
  envinfo
Ok to proceed? (y) y

  System:
    OS: Linux 5.13 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 41.06 GB / 47.00 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.111

Used Package Manager

npm

Logs

Listed my solutions and errors from browser console in the README.md.

Comment out corresponding sessions in App.vue to see it.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Converted to discussion as it is not a bug.

---

Re Solution 1, @originjs/vite-plugin-commonjs says it only applies to dependencies. In this case generated protoc files are not a dependency.
https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs
You could create package.json and some other files and use npm i -D ./src/proto to make it a dependency.

---

Re Solution 2, the error is coming from Vue. Vue uses JSON.stringify to stringify objects. client variable has a circular reference and so it fails to stringified. Just simply replace {{ client }} into {{ '' + client }} to fix the error.

[gyang274]

Hi @sapphi-red , I tried the 2nd solution and it is working now. I updated the demo the working solution. Thank you so much for your help, I would never get the {{ '' + ... }} without your help.

[martinpokorny]

Just chiming in to confirm that Solution 1 works as well! Just for a little bit of context, I am migrating a project from Webpack to Vite and was really struggling with gRPC protobufs. Such a headache...

Basically what I did was:

1. Install dev dependency @originjs/vite-plugin-commonjs
2. Add package.json with basic stuff

{
  "name": "my-protos-js",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "node ./webpack.build.js"
  },
  "dependencies": {
    "google-protobuf": "^3.21.0",
    "grpc-web": "^1.4.2",
    "protoc-gen-grpc-web": "^1.4.1"
  },
  "devDependencies": {
    "webpack": "^5.76.0"
  }
}

3. Add webpack.build.js with basic stuff

const webpack = require("webpack");
const path = require("path");

webpack(
  {
    entry: "./notifications_grpc_web_pb.js",
    output: {
      filename: "notifications_grpc_web_pb.js",
      path: path.resolve(__dirname, "dist")
    }
  },
  (err, stats) => {
    console.log(
      stats.toString({
        chunks: false,
        colors: true
      })
    );

    if (err || stats.hasErrors()) {
      console.error(err);
      process.exit(1);
    }
  }
);

4. npm install && npm run build in the protos folder
5. yarn add ./my-protos in the main project
6. Change the original import inside my notification handler file from import proto from "../../my-protos-js/notifications_grpc_web_pb"; to import proto from "my-protos-js/notifications_grpc_web_pb";

And hooraaay, it works inside vite build now - building and working beautifully as if nothing had changed.

It's kind of a shame that I have to keep Webpack in my stack, even if just for this little part that I really only need to run once upon a time, but it's a good starting point. I'll probably npm pack the dependency in the end so that I have elegant approach in the main project, and I'll separate this Webpack part into separate folder.

However - thank you both very much, you saved me a lot of more headaches.

[adlion]

What does the package.json contains on the first solution

I have many compiled proto files
Tried to export all using index.ts and build and install without success

Can you show an example please?

[boldt]

I tried the solution by @martinpokorny. Here is my current not working status:

• https://github.com/boldt/grpcweb-cra-to-vite/tree/martinpokorny
• grpc-web not working in a Vite+Typescript app grpc/grpc-web#1242

It throws:

Uncaught SyntaxError: The requested module '/src/grpc/echo_pb.js' does not provide an export named 'EchoRequest' (at App.tsx:4:10)

Probably I am just missing a small piece of the puzzle.

See also here, were I tried different solutions: grpc/grpc-web#1242 (comment)

[rmilejcz]

Hi sorry I know this is a bit old but I am struggling to get this resolved in my own code. I am trying to switch from an old rollup config to vite but I can't import anything from the protoc generated js files, if I use named exports I'm told THING does not exist and if I use default exports I'm told no export named default.

In my previous rollup config I was using an older version of @rollup/plugin-commonjs to supply named exports for these files, which got around the problem, but Vite is using a newer version of that plugin and that option is no longer supported.

I tried your first solution, but it did not work (possibly because of where the files are located?) and I'm not sure how I would translate your second suggestion to react. Any ideas?

[Shegl]

Did you found a solution ?

[a2not]

I have stranded at the same problem, but I found a way so let me leave a comment.

For those who are wondering how to use grpc-web generated CJS with Vite, here is a working demo.
https://github.com/a2not/vite-grpc-web

No need to use @originjs/vite-plugin-commonjs, just make the generated CJS files a local dependency and import from there.
If you do so as a linked dep, make sure to set resolve.preserveSymlinks to true.