0

While importing Axios I am facing an error

Uncaught SyntaxError: Cannot use import statement outside a module

I am importing Axios like this:

import axios from 'axios'

this image shows my javascript file strucure where i hava imported axios which i installed through npm i axios

this is how i import axios in main js file that is shown above

this is my project header ,where i have included my js file

afnan
  • 13
  • 5
  • try `const axios = require('axios').default;` – Nnay Jan 29 '21 at 08:15
  • Does this answer your question? ["Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) – Not A Bot Jan 29 '21 at 08:15
  • @NotABot i am using it in the front end , main.js file – afnan Jan 29 '21 at 08:21
  • @afnan Please check the link I mentioned in the previous comment, you will get some help from there – Not A Bot Jan 29 '21 at 08:23
  • we just don't know enough. is your main.js file an ES module? are you working within a framework that compiles and bundles your code? – Nnay Jan 29 '21 at 08:27
  • @Nnay actually i was watching a tutotial and they included import axios , i did the same then after some research i foud i had to include type="module" but even now its now working .. i have never workied with importing stuff before .... – afnan Jan 29 '21 at 08:30
  • @Nnay now i am facing this error Uncaught TypeError: Failed to resolve module specifier "axios". Relative references must start with either "/", "./", or "../". – afnan Jan 29 '21 at 08:31
  • The browser doesn't magically load npm packages. If you are using modules in the browser then you have to use URLs as import specifier. – Felix Kling Jan 29 '21 at 08:46
  • @FelixKling can you please explain your ans ? – afnan Jan 29 '21 at 08:48
  • `'axios'` is not a URL. If you want to import a JavaScript module in the browser you have to tell the browser where to load it from, which requires a URL. – Felix Kling Jan 29 '21 at 08:59

1 Answers1

1

Where are you using this statement? If you are you using it on backend then you should use

const axios = require('axios');

if you are getting it on frontend then you may not have installed the package axios. To install it run

npm i axios
Ghulam Ghous
  • 21
  • 5
  • even on the frontend it depends on whether or not it's used in an ES module. `import` won't work otherwise – Nnay Jan 29 '21 at 08:18
  • 1
    Yes, the question is pretty ambiguous. – Ghulam Ghous Jan 29 '21 at 08:20
  • @Ghulam Ghous i have already installed the dependency – afnan Jan 29 '21 at 08:22
  • @afnan can you please elaborate on your question and also the folder structure a bit. I am not able to fully understand the question. – Ghulam Ghous Jan 29 '21 at 08:28
  • @GhulamGhous bro i have included some images , that might help you understand my questions thanks – afnan Jan 29 '21 at 08:44
  • https://medium.com/javascript-in-plain-english/how-to-use-axios-in-vanilla-javascript-2dbf176e08d4 visit this link, this will solve your issue. You have to include the URL for fetching axios in browser. – Ghulam Ghous Jan 29 '21 at 09:04