Cannot import Axios to use with Parcel-Bundler

Solution for Cannot import Axios to use with Parcel-Bundler
is Given Below:

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)
    })
})

In the closest (from the root of project directory) package.json file, add or update "type" field with a value of "module". It will ensure that all your .js, .ts and .mjs files 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"
   }
 }

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"
   }
 }