"Uncaught SyntaxError: import declarations may only appear at top level of a module":1:18 asking again

Question

Full code here: https://github.com/vscodr/axios_issue

Been away from JS for a minute or two working in python and now I want to try to accomplish some of the same tasks I have been working on in python, with JS. I can't get past the stupidest thing! With Axios installed as a dependency,

  "dependencies": {
    "axios": "^0.19.2"
  }

Trying to use axios from line number one of the script:

import axios from 'axios' 
r = axios.get('https://swapi.dev')
console.log(r)

I keep getting:

Uncaught SyntaxError: import declarations may only appear at top level of a module

After having read all the SO posts on this error and after making sure that I am calling the script itself as

<script type="module" src="/main.js"></script>
<script type="module" src="main.js"></script>
<script type="module" src="./main.js"></script>

which produces:

Uncaught TypeError: Error resolving module specifier: axios main.js:1:18

and as:

<script src="./main.js"></script>
<script src="/main.js"></script>
<script src="main.js"></script>

which produces:

 Uncaught SyntaxError: import declarations may only appear at top level of a module :1:18

I have referred to:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

So I have covered most bases before reposting this one.

Also just using code right out of the documentation causing the same error.

   axios.get('https://swapi.dev')
.then(function (response) {
// handle success
   console.log(response);
})
.catch(function (error) {
// handle error
  console.log(error);
})
  .finally(function () {
// always executed
  });

I am publicly shaming myself to get past this stupid issue! This is clearly some kind of "run home to momma" error coming from the browser and I suspect WEBPACK.

I am unaware of any new game changing changes I might not heard about.

I am rusty, I know the problem is super basic (I HOPE it's super basic) and I just want an error. The one I am getting is not telling me what's really going on.

Fresh install of Windows and VSCode on a new machine

Solution

There's a couple concepts that need clarification, looks like.

import and export are ES Modules (ESM) syntax. In browsers, you can only use that syntax if your script is type="module", as you've noticed. That hurdle aside, we get to the next point.

When you npm install --save axios (or yarn add axios), you get a package.json that contains {"dependencies": ...}, and a node_modules directory into which axios and its dependencies get installed. Browsers have no concept of package.json nor node_modules, so your browser has no idea where to find something you like to call axios. You could use a loader like Systemjs in the browser to instruct it.

Additionally, not all browsers support ESM yet. This is where bundlers like Webpack, Rollup, Snowpack, etc. come in – in addition to resolving ESM imports to real files in node_modules (or, occasionally, elsewhere), they allow you to transpile ESM code into regular ES, as well as bundle it into one file for performance, or minify it for even more. (In the case of Webpack, it basically toasts your coffee, makes you bread and builds you a kitchen sink too.)

So – unless you're feeling adventurous, use a bundler.

At the time of writing, I'd suggest looking into Snowpack; it's the newer kid on the block, but looks promising.

Comments

[Keith]

Your type='module' version is working as expected, the error is telling you it can't resolve 'axios', so find out why this is, look in your network tab in browser.. Looking at your link, there is no axios,

[Modus Tollens]

Do not ask questions again when they get closed. Edit your original one instead, it will enter the reopen queue.

[ChrisG]

The quickest way to resolve this is to not use modules until you've looked more closely at how webpack and modules work in a browser (not like that). Just include the axios script using this and don't use import in a browser. (also, as far as I'm aware, axios is essentially obsolete since fetch was added to make using XMLHttpRequest less verbose)

[Bradley]

AKX You know I was thinking that. Like somewhere along my JS journey something like that was installed and I just didn't realize it. I just rebuilt my dev box on a new machine and I am wondering what is it that I am not restoring into my development process. I was really hoping it would be easier to get back to work than it has been .

[AKX]

Add your dev workflow to your project's README and never wonder about that again. Bundlers should also be dev dependencies for your project, btw, not globally installed.