Vue Error - Unable to resolve 'https' when importing package

Question

I'm trying to create a Vue project and use the npm package to connect to the Retroachievements.org api to get some data, but I'm getting an error. This is my process from start to finish for creating a project and implementing a package.

• Navigate to my project folder and create the project using vue cli: vue create test. For options, I usually choose 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 the code formatting, not sure why the post isn't formatted/colored correctly...):

  const RaApi = require('raapijs');

  Export default value{ Name: 'Application',

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

  }

• Run `npm runserve' and got the error:

  Error occurred in

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

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

I am using 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 errors, but it looks exactly like the code I'm trying. Can anyone see the difference and cause of this error?

Edit: I've rewritten this post to make my process clearer and provide more information, such as versions.

Answer 1

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

const RaApi = require('raapijs');

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

Answer 2

It appears that the raapijs package is designed to be used in a Node environment, not in a Vue browser-based environment, so that's why I'm getting the error. The package itself is looking for the https package built into Node, but since it's not running in Node it doesn't find it.

So I solved my problem by looking at the package's github repository and extracting the actual php API endpoints being used and using those directly in my application instead of using a package wrapper. Not as neat and tidy as I would have liked, but still a nice solution.