vscode live-server extension v5.6.1 无法解析 'axios' JavaScript 导入

Question

I installed axios via npm and when I run the live-server extension it doesn't recognize the axios imports in my.js files. When I use the "import axios from 'axios'" command I get this error: "Uncaught TypeError: Failed to resolve module specifier "axios". Relative references must start with either "/", "./", or "../"." any ideas?

package.json:

{
  "name": "footballstatsil",
  "version": "1.0.0",
  "description": "A website for football statistics",
  "default": "controller.js",
  "type": "module",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "author": "Dror Salomon",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.24.0",
    "parcel": "^2.2.0"
  }
}

import example:

import axios from "axios";

import {
  API_URL_PLAYERS,
  API_URL_TEAMS,
  API_KEY,
  RAPIDAPI_HOST,
} from "./config.js";

const createOptionsObject = function (url, params) {
  return options = {
    method: "GET",
    url: url,
    params: params,
    headers: {
      "x-rapidapi-host": `${RAPIDAPI_HOST}`,
      "x-rapidapi-key": `${API_KEY}`,
    },
  };
}

export const loadTeams = async function (leagueID, season) {
  try {
    
    const teamOptions = createOptionsObject(API_URL_TEAMS, { league: leagueID, season: season })

    axios.request(teamOptions).then(function (response) {
     
      response.data.response.forEach((el) => {
    
        const teamsMarkup = `
       <li class="dropdown-li"><a class="dropdown-item">${el.team.name}</a></li>`;
       teamsSelector.insertAdjacentHTML('afterbegin', teamsMarkup);

      });
    });
  } catch (err) {
    console.error(err);
  }
};

Answer 1

Well using skypack solved the problem:

import axios from 'https://cdn.skypack.dev/axios';

instead of

import axios from 'axios';