Vite is not working with grpc-web generated code. #8926
-
Describe the bugI am creating a web service with grpc-web support, seems Vite doesn't work along with grpc-web generated file, even with commonjs plugins. Reproductionhttps://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 Managernpm LogsListed my solutions and errors from browser console in the README.md. Comment out corresponding sessions in App.vue to see it. Validations
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
Converted to discussion as it is not a bug. Re Solution 1, Re Solution 2, the error is coming from Vue. Vue uses JSON.stringify to stringify objects. |
Beta Was this translation helpful? Give feedback.
-
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 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? |
Beta Was this translation helpful? Give feedback.
-
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. No need to use |
Beta Was this translation helpful? Give feedback.
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 usenpm 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.