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

admin管理员组

文章数量:1347701

Full code here:

Been away from JS for a minute or two working in python and now I want to try to acplish 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('')
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:

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('')
.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 ing 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

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

Been away from JS for a minute or two working in python and now I want to try to acplish 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/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 ing 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

• javascript
• npm
• webpack
• axios

Share Improve this question Follow edited Jun 10, 2020 at 1:07 Bradley asked Jun 9, 2020 at 8:43 BradleyBradley 5511 gold badge11 silver badge1010 bronze badges 3

• 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, – Keith Commented Jun 9, 2020 at 8:52
• 2 Do not ask questions again when they get closed. Edit your original one instead, it will enter the reopen queue. – Modus Tollens Commented Jun 9, 2020 at 8:56
• 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) – user5734311 Commented Jun 9, 2020 at 8:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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. e 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.

I'd suggest looking into Vite.

本文标签：