Js axios error: import call expects exactly one argument

May 9, 2022

im a begginer and im trying to do my first project of fetching data from an API but i ran into an error.
Im trying to fetch data from the Riot API with axios, the tutorial that im following doesnt run into this error and i cant find a solution anywhere. the error is:
SyntaxError: Unexpected identifier ‘axios’. import call expects exactly one argument.

code:

import axios from "axios";

const riot_key = "my-riot-key";

function searchForPlayer(summonerName) {
  const APICallString = `https://euw1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${summonerName}?api_key=${riot_key}`;
  axios
    .get(APICallString)
    .then(function (response) {
      //SUCCESS
      console.log(response);
    })
    .catch(function (error) {
      //ERROR
      console.log(error);
    });
}

searchForPlayer(M4T789);

This might just be a stupid error on my behalf but I cant find it anywhere thanks in advance.

this is the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>League Summoner</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <h1>League of Legends Summoner</h1>
    <script src="script.js"></script>
</body>
</html>

>Solution :

Normally I would expect this to provide the error message

Uncaught SyntaxError: Cannot use import statement outside a module

It isn’t clear why you are getting a different error message. Possibly you have previously defined an import function somewhere in your code or are testing in a browser I’ve not seen this problem in.

That aside, you have two immediate problems.

You can’t use `import` outside of a module.

You need to load your JS from <script type="module">

You can’t use Node.js module resolution

Browsers can’t search for a module named axios, you have to provide a URL not a name.

The tutorial you are following assumes you are using a typical React development environment with a toolchain for bundling TypeScript and/or ES6 modules during the build step.

Avoid tutorials that are targetted at platforms you are not using. You’ll just be confused.

Consider loading Axios using a CDN (as described in its documentation) instead of for a package manager you aren’t using.

Consider not using Axios at all. It is quite a large chunk of code and its biggest benefit (of providing a consistant, promised-based API for making HTTP requests on both browsers and Node.js) has faded away in light of browsers and Node.js having native support for the Fetch API.