Vue with grpc-node: dependencies were not found.

[BigeYoung]

Problem description

Using VUE:
These dependencies were not found: dns, http2.
After installed dns, http2, it threw
Uncaught Error: Cannot find module "./framer"

https://www.npmjs.com/package/http2 (3 years ago)

This package has been deprecated
Use the built-in module in node 9.0.0 or newer, instead

Reproduction steps

1. npm install

npm install --save @grpc/grpc-js
npm install --save @grpc/proto-loader

2. code add 2 lines:

import '@grpc/grpc-js'
import '@grpc/proto-loader'

3. npm run serve

 ERROR  Failed to compile with 5 errors
These dependencies were not found:

* dns in ./node_modules/@grpc/grpc-js/build/src/resolver-dns.js
* http2 in ./node_modules/@grpc/grpc-js/build/src/server.js, ./node_modules/@grpc/grpc-js/build/src/call-stream.js and 2 others

To install them, you can run: npm install --save dns http2

Above steps are shown as a docker image: https://github.com/BigeYoung/node-grpc/
You might check it quikly by run:

docker run -it bigeyoung/node-grpc:latest

4. npm install --save dns http2

Super slow for unknown reason

5. npm run serve

98% after emitting CopyPlugin

 WARNING  Compiled with 2 warnings
 warning  in ./node_modules/http2/lib/protocol/index.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

 warning  in ./node_modules/defaultable/defaultable.js

Critical dependency: the request of a dependency is an expression

App running at:
  - Local:   http://localhost:8080/ 

The website is broken. Chrome console logs an error:

Uncaught Error: Cannot find module './framer'
    at webpackEmptyContext (eval at ./node_modules/http2/lib/protocol sync recursive (app.js:1052), <anonymous>:2:10)
    at Array.map (<anonymous>)
    at eval (webpack-internal:///./node_modules/http2/lib/protocol/index.js:46)
    at Object../node_modules/http2/lib/protocol/index.js (chunk-vendors.js:6920)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.eval (webpack-internal:///./node_modules/http2/lib/http.js:136)
    at eval (webpack-internal:///./node_modules/http2/lib/http.js:1264)
    at Object../node_modules/http2/lib/http.js (chunk-vendors.js:6843)
    at __webpack_require__ (app.js:854)

Environment

• OS name, version and architecture:
  • Windows 10 v18363.1139, Intel(R) Core(R) i5-9500 CPU
  • Docker on CentOS 7, Intel(R) Xeon(R) E-2224 CPU
• Node version: v12.19.0
• Package name and version:
  • @grpc/grpc-js: 1.2.1
  • @grpc/proto-loader: 0.5.5

Additional context

I ran npm install --save dns http2, and it threw an "uncaught error": "The module "./framer" could not be found", but this error still exists after installing framer.
Since I did not save the complete log, I re-run the above steps and will update this issue after npm install --save dns http2 is completed.

[murgatroid99]

The dns and npm modules are both built in to Node, so you should not install them from npm. You may need to change some compiler settings to find them properly.

[BigeYoung]

Oh, now I get the reason. But I still don't know how to configure it correctly.

If you want to check my configuration and the problem I encountered, the following docker image is a simple reproduction of this problem.

docker run -it bigeyoung/node-grpc:latest

The Dockerfile is shown as below.

# Dockerfile
FROM node:12
WORKDIR /root/
RUN npm install -g @vue/cli @vue/cli-service-global
RUN vue create node-grpc --default
WORKDIR /root/node-grpc/
RUN npm install --save @grpc/grpc-js
RUN npm install --save @grpc/proto-loader
COPY main.js /root/node-grpc/src
CMD npm run serve

// main.js
import Vue from 'vue'
import App from './App.vue'
import '@grpc/grpc-js'
import '@grpc/proto-loader'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Thank you for your patient guidance.

[murgatroid99]

The people who know Vue will probably be able to better help you with this problem.

[BigeYoung]

OK, perhaps I need to change the issue title 😂

[DRoet]

You should probably be using grpc-web if you want to use grpc client-side in Vue

[lz89]

@BigeYoung Came across into the same issue, any update or solution? Did you end up using grpc-web in Vue?

[ellirad]

I have the same issue, any solution?

[murgatroid99]

If you are trying to run code in the browser, you can't use @grpc/grpc-js, and you should use grpc-web instead. If you are trying to run code on a version of Node older than 8, you can't use @grpc/grpc-js, and if you cannot upgrade Node at all, you can use the deprecated grpc package.

If you are trying to build a bundle using Vue for use on a recent version of Node, and it is failing as described in this issue, you should file an issue with Vue, because that is an issue with Vue itself, not with @grpc/grpc-js.