Error: Unable to find axios module

screenshot of browser developer tool - network

I have embedded the script in my base.pug file

script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

Upon loading the page and inspecting the browser developer tool > network, I noticed that all the other necessary files like bootstrap and jquery were loaded successfully except for axios.min.js.

After executing the login.js script as shown below, I encountered an 'Axios not defined' error in the console.

Any suggestions or guidance would be greatly appreciated.

I've attempted placing the script at the beginning of the base.pug page, checked for syntax errors, and tried using a different link - but the same error persists.

base.pug file

    body
        // HEADER
        include _header

        // CONTENT
        block content



        // FOOTER
        include _footer

        // FOOTER
        include _footer

script(src='/js/login.js') 
script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')

login.js file

doctype html
html(lang='en')
    head
        block head     
            meta(charset='UTF-8')
            meta(name='viewport' content='width=device-width, initial-scale=1.0')
            meta(http-equiv='X-UA-Compatible' content='ie=edge')
            link(rel='stylesheet' href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' integrity='sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf' crossorigin='anonymous')
            link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous')
            link(rel='stylesheet' href='/css/style.css')
            link(rel='icon' type='image/ico' href='/img/favicon.ico')

            title Sales App #{title}

    body
        // HEADER
        include _header

        // CONTENT
        block content



        // FOOTER
        include _footer

    script(src='/js/login.js') 
    script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

    script(
    src='https://code.jquery.com/jquery-3.4.0.min.js'
    integrity='sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg='
    crossorigin='anonymous')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')

ReferenceError: axios is not defined at login (login.js:7) at HTMLFormElement. (login.js:26)

javascriptexpressaxiospug

Answer №1

It is important to move your scripts after all the CDNs, as loading them before may result in undefined variables at the time of script execution.

base.pug 

    body
        // HEADER
        include _header

        // CONTENT
        block content

        // FOOTER
        include _footer

        // FOOTER
        include _footer

script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')
script(src='/js/login.js')

login.js

doctype html
html(lang='en')
    head
        block head     
            meta(charset='UTF-8')
            meta(name='viewport' content='width=device-width, initial-scale=1.0')
            meta(http-equiv='X-UA-Compatible' content='ie=edge')
            link(rel='stylesheet' href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' integrity='sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp...
            title Sales App #{title}

    body
        // HEADER
        include _header

        // CONTENT
        block content

        // FOOTER
        include _footer

    script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

    script(
    src='https://code.jquery.com/jquery-3.4.0.min.js'
    integrity='sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg='
    crossorigin='anonymous')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous')
    script(src='/js/login.js')

Answer №2

Once upon a time, there was an error caused by a typo when loading the axios package. The correct attribute should be src, not scr

Your initial code snippet:

script(scr='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

should actually be:

script(src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js')

Although some time has passed since then, this correction might come in handy for future readers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Combining JSON, JavaScript, and HTML for dynamic web development

I am a junior computer programmer facing challenges with our JSON project. The objective is to store an object in local storage, but my HTML and JS code are not working as intended. It seems like nothing happens at all. Any suggestions or feedback would ...

javascripthtmljson

Utilizing Mongoose for incorporating embedded documents within forms

Within my Mongoose schema named Question, I have a straightforward setup for storing questions and their corresponding answers. Answers are defined in a separate schema and stored as embedded documents within the Questions collection. Below is the outline ...

node.jsexpressmongoosepug

Gulp Watch fails to identify changes in the SASS SCSS directory

After setting up Gulp to compile SCSS into CSS using NanoCSS and gulp-css for the first time, I encountered an issue. While my do-sass command successfully compiles SCSS and minifies CSS files, it does not run when placed within a watch task. Any changes ...

javascriptnpmgulp

What methods can be utilized to conceal an if statement in code?

In my application, I am facing an issue with an external JavaScript file that contains multiple if statements. The problem arises when one of the if statements is still being executed even if the corresponding form is hidden. The flow of my application is ...

javascriptjquery

Issue with grunt-crx task detected

In my Gruntfile, I've integrated the grunt-crx task as shown below: crx: { packExtension: { src: "../build/unpacked", dest: "../build/dist" } } Whenever I execute the crx task on its ow ...

javascriptgoogle-chrome-extensiongruntjs

I successfully made a GET request using Postman, but encountered an issue when trying to do the same request through a

Currently, my objective is to send URL encoded parameters through a GET request using the fetch function. To achieve this, I am attempting to display the parameters via Express in the following manner: app.get('/api', function (req, res) { c ...

javascriptnode.jsrestexpressfetch

What is the most efficient method for examining dependencies in Yarn 2 (berry)?

Is there a way to check for vulnerabilities in Yarn 2 dependencies? In Yarn 1.x, you could run yarn audit, similar to npm audit. However, this command is not available in Yarn 2. According to this issue on the Yarn berry Github, it may not be implemented ( ...

javascripttypescriptnpmnpm-audityarnpkg-v2

There was an issue locating a declaration file for the module 'clarifai'

https://i.stack.imgur.com/PgfqO.jpg I recently encountered a problem after installing the Clarifai API for a face recognition project. Despite my efforts, I have been unable to find a solution. When I hover over "import clarifai," I receive the message: ...

javascriptnode.jsreactjsnpmclarifai

Retrieve information from a dropdown menu that is dependent on the selected value from another dropdown

   Check out this sample API data - I currently have three dropdown menus set up: From Release To Release Compatibility When a specific from release is selected, all corresponding to releases associated with that specific from release should be displ ...

javascriptreactjsaxiosreact-hooksmaterial-ui

Using Node.js and DIME to send binary data via POST requests

After reading a file that is 1740 bytes long into a Buffer called res, the length of res.length and res.toString('binary', 0, res.length).length is both determined to be 1740. A POST request is then sent using the request library. request.post ...

javascriptnode.jshttpbinary-data

What is the correct way to reference this data element in Ajax?

I am attempting to retrieve the elevation data for 732 meters from the JSON API response below: {"results":1,"data":[{"wind":{"degrees":200,"speed_kts":6,"speed_mph":7,"speed_mps":3,&quo ...

javascriptjqueryjsonajax

Ensure that every route is prefixed with /api

Is there a way to set all routes accepted by Express to start with /api without explicitly defining it? Current: this.app.get('/api/endpoint-A', (req, res) => { return res.send('A'); }); this.app.get('/api/endpoint-B', ...

javascriptexpress

Error occurred when attempting to send a POST request to the server using AJAX and data did

When I try to send form data using a POST request via AJAX, I am encountering an issue. The data being sent seems complete when I console it in the AJAX call, but on the server side, parts of the object appear to be missing and the data is getting cut off. ...

ajaxexpress

Eliminate operation in React with the help of Axios

Within my React application, I have implemented a callback method for deleting data from an API using the axios library: deleteBook(selectedBook) { this.setState({selectedBook:selectedBook}) axios.delete(this.apiBooks + '/' + this.select ...

javascriptreactjsaxios

File in Node JS appears to be empty upon reading

My goal is to track the location of tweets in separate JSON files for each Twitter ID I monitor. The code snippet below is executed for every tweet, creating a new JSON file for each unique ID and appending the location data: console.log("@ " + tweet.user. ...

javascriptnode.js

I require fixed headers that no longer stick once reaching a specific point

I have a setup where the names and occupations of participants are displayed next to their artworks, and I've made it sticky so that as we scroll through the images, the names stay on the left. Now, I want the names to scroll out once the images for e ...

javascripthtmlcss

.forEach returns an undefined value for each length

Having trouble with my if statement. It seems like the else block is working fine, but the if section is not functioning as expected. The variable count1 comes out as undefined. Interestingly, the conditions inside the if statement are working correctly ...

javascriptjqueryeach

Retrieve a specific value in HTML <a> tag using JavaScript-Ajax in Django

I am currently working with Python 3 and Django. Within my HTML code, I have the following: {% for category in categories() %} <li class="c-menu__item fs-xsmall"> <a href="#" id="next-category"> {{ category}} & ...

javascriptpythonhtmlajaxdjango

When making a Post Request, the Req.body is found to be empty

Here is the code snippet from various files: In App.js file: app.use(express.json({limit:"30mb",extended:true})); app.use(express.urlencoded({extended:true})); In route.js file: router.route("/register").post(registerUser) Importin ...

javascriptnode.jsexpresstestingbackend

Is there a unique identifier associated with web explorers?

I'm conducting an experiment and I've noticed that Google is able to detect that it's the same computer, even when I change various settings. It seems to be identifying the explorer with a unique ID or something similar. I have tried everyth ...

javascriptseleniumgoogle-chromeselenium-webdriver