"Command Not Found" error in developemnt of VS Code Extension (due to require axios line)

Question

I am trying to develop a VS Code Extension following the simple youtube tutorial. The Extension works well and dialogue box appears in th starting, but when I add the axios packages and the code for it, it gives command not found error in the Developer Window.

Pic: Error msg command not found in VSC extension

Here is the extension.js (you can ignore the implementation):

const vscode = require("vscode")
const axios = require("axios")
const xmlParser = require("fast-xml-parser")

/**
 * @param {vscode.ExtensionContext} context
 */
async function activate(context) {
  const res = await axios.get("https://blog.webdevsimplified.com/rss.xml")
  const articles = xmlParser.parse(res.data).rss.channel.item.map(article => {
    return {
      label: article.title,
      detail: article.description,
      link: article.link,
    }
  })

  let disposable = vscode.commands.registerCommand(
    "wds-search-blog-example.searchWdsBlogExample",
    async function () {
      const article = await vscode.window.showQuickPick(articles, {
        matchOnDetail: true,
      })

      if (article == null) return

      vscode.env.openExternal(article.link)
    }
  )

  context.subscriptions.push(disposable)
}
exports.activate = activate

function deactivate() {}

module.exports = {
  activate,
  deactivate,
}

And package.json:

{
    "name": "wds-blog-search",
    "displayName": "WDS Blog Search",
    "description": "Search Web Dev Simplified's Blog For Articles",
    "version": "1.0.1",
    "publisher": "WebDevSimplified",
    "repository": {
        "url": "https://github.com/WebDevSimplified/vscode-extension-blog-searcher"
    },
    "icon": "logo.png",
    "engines": {
        "vscode": "^1.52.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:wds-blog-search.searchWdsBlog"
    ],
    "main": "./extension.js",
    "contributes": {
        "commands": [
            {
                "command": "wds-blog-search.searchWdsBlog",
                "title": "Search WDS Blog"
            }
        ]
    },
    "scripts": {
        "lint": "eslint .",
        "pretest": "npm run lint",
        "test": "node ./test/runTest.js"
    },
    "devDependencies": {
        "@types/vscode": "^1.52.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.4",
        "@types/node": "^12.11.7",
        "eslint": "^7.15.0",
        "glob": "^7.1.6",
        "mocha": "^8.1.3",
        "typescript": "^4.1.2",
        "vscode-test": "^1.4.1"
    },
    "dependencies": {
        "axios": "^0.21.1",
        "fast-xml-parser": "^3.17.6"
    }
}

Ref: https://github.com/WebDevSimplified/vscode-extension-blog-searcher

There are no syntax errors as far as I know. Tried on another system but still got the same issue. Not able to understand what is wrong. Please help.

Answer 1

You need to invoke .default on the require. Like this:

const axios = require("axios").default;

But I ALSO had to completely trash the project and start over. Because even after removing all my changes and restoring the hello-world back to its original state, it was STILL broken. Whatever axios did, it did it for good.

So yeah, 2 things.

1. trash the project and start from a new one
2. append .default to your require()

I don't know why the youtuber was able to get away with not invoking .default. Maybe something changed in axios recently?