Vue Error - Can't resolve 'https' when importing package

blkhwks19 0
Viewed 51

I'm trying to make a Vue project and use an npm package for connecting to the retroachievements.org api to fetch some data, but I'm getting an error. Here's my process from start to finish to create the project and implement the package.

  • Navigate to my projects folder and use the vue cli to create the project: vue create test. For options, I usually chose not to include the linter, vue version 2, and put everything in package.json.

  • cd into the /test folder: cd test and install the retroachievements npm package: npm install --save raapijs

  • Modify App.vue to the following (apologies for code formatting, not sure why the post isn't formatting/coloring it all properly...):

    const RaApi = require('raapijs');

    export default { name: 'App',

      data: () => ({
      api:null,
      user: '<USER_NAME>',
      apiKey: '<API_KEY>',
  }),

  created() {
      this.api = new RaApi(this.user, this.apiKey);
  },

    }

  • run `npm run serve' and get the error:

    ERROR in ./node_modules/raapijs/index.js 2:14-30

    Module not found: Error: Can't resolve 'https' in 'C:\Projects\Web\test\node_modules\raapijs'

I'm on Windows 10, Node 16.17.0, npm 8.15.0, vue 2.6.14, vue CLI 5.0.8, raapijs 0.1.2.

The first solution below says he can run it without error but it looks like the exact same code as I'm trying. Can anyone see a difference and a reason for this error?

EDIT: I reworded this post to be more clear about my process and provide more info, like the versions.

npm vue.js node.js
2 Answers

This solution works for me. I installed raapijs with npm install --save raapijs command. Then in my Vue version 2 component I used your code as follow:

const RaApi = require('raapijs');

export default {
  
  data: () => ({
    api: null,
    user: '<USER_NAME>',
    apiKey: '<API_KEY>',
  }),
  
   created() {
    this.api = new RaApi(this.user, this.apiKey);
  },
};

hamid-davodi0

It seems the raapijs package was designed to be used in a Node environment, rather than in Vue's browser based environment, so that's the reason I was getting an error. The package itself was looking for the built in https package in Node, but since it wasn't running in Node, it wasn't finding it.

So I solved my problem by looking at the package's github repo and extractingt he actual php API endpoints that were being used and using those in my app directly, rather than using the package wrapper. Not quite as clean and tidy as I was hoping but still a decent solution.

blkhwks190
Related