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>
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.
import outside of a module.You need to load your JS from <script type="module">
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.