I am trying to use axios for a http request in my app.js file, but I always get the error message:
Uncaught SyntaxError: Cannot use import statement outside a module.
I created the js folder, files and other js packages using parcel-bundler and run browser-sync to start the server.
What am I missing? Please help I am new to JavaScript. I am on macOS Big Sur 11.5.1, node v14.17.4
import axios from 'axios'
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('form')
form.addEventListener('submit', async (event) => {
event.preventDefault()
const username = document.querySelector('input').value
const response =
await axios.get(`https://api.github.com/users${username}`)
console.log(response.data)
})
})
Add "type": "module" to your package.json
{
// ...
"type": "module",
// ...
}
Update:
It should looks like this:
{
"name": "githubUser",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1"
}
}
In the closest (from the root of project directory)
package.jsonfile, add or update"type"field with a value of"module". It will ensure that all your.js,.tsand.mjsfiles are interpreted as ES modules.
...
{
...
"type": "module"
...
}
...
Where can I add it in this file?
{
"name": "githubUser",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1"
}
}