dns and http2 dependency?

[fsalliau]

Hi,

I tried to install and run [email protected] in a Vue project.
I got the following message:

When installing the dns and http2 dependencies, I got a whole bunch of warnings.

Dependencies I use:
"dependencies": {
"core-js": "^3.6.5",
"express": "4.17.1",
"imgur": "2.0.0-next.3",
"lodash": "4.17.21",
"serve-static": "1.14.1",
"vue": "^2.6.11",
"vue-image-upload-resize": "2.3.0",
"vue-json-pretty": "1.7.1",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0"
},

NodeJS v15.14.0 on MacOS

Can you tell me how to make this work?
Thanks in advance
Frank

[kaimallea]

@fsalliau hi, thanks for creating the issue. Neither of those modules are used as dependencies in this project. Can you share more info/output?

Actually, I see, it looks like a dependency of a dependency. The two modules it is complaining about -- dns and http2 are actually native NodeJS modules, and shouldn't require installing anything. Which version of NodeJS are you running? You should be using at least v12. You're using NodeJS v15, which should be fine. 🤔

[kaimallea]

Looks like others having the same exact issues with a different library, however, Vue is the common denominator -- grpc/grpc-node#1638

[kaimallea]

Also, this is a nodejs module -- is your app's configuration currently trying to compile it into your frontend code? That might be the problem

[fsalliau]

Thanks for your feedback. I just created a vanilla Vue project using vue cli, without vuex, router or vuetify.
package.json:

"dependencies": {
"core-js": "^3.6.5",
"imgur": "2.0.0-next.3",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},

I've replaced the standard HelloWorld.vue component with:

<template>
  <div>
    <input type="file" @change="handleFileSelect"/>

  </div>
</template>

<script>

import api from '../utils/api.js'

export default {
  name: 'HelloWorld',
  methods: {
    handleFileSelect: function(e){
      api.uploadImage(e.target.files[0]);
    }
  }
}
</script>

and I've added the api.js module as follows:

import { ImgurClient } from 'imgur';

export default {
  uploadImage(f) {
    console.log(f);
  }
}

When running npm run serve, I get the same error on dns and http2 dependency as mentioned in the beginning.
Hope this helps...

KR, Frank

[kaimallea]

@fsalliau, I think the issue is that you are trying to use a Node.js module in the browser. This module isn't isomorphic/universal, and is only supported in a Node environment at the moment. That would explain the errors about the dns and http2 modules not being found; a dependency of a dependency is using those, which are NodeJS-specific and don't exist in the browser.

[kaimallea]

If you want browser support, you can add a feature request. It is definitely possible with some refactoring.

[fsalliau]

@kaimallea yes, I think you're right. No worries, I will handle upload to imgur in backend code. I will close this issue. Thanks for the help!