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

Error: Attempting to access the first element of a null property is not allowed

Currently, I am working on a NodeJS Project that utilizes Sails.js as the framework. The goal is to implement a permissions system where each group's permissions are set using Check Boxes within a form powered by AngularJS. However, upon clicking th ...

javascriptangularjsnode.jssails.jstypeerror

Encountering a CORS error while utilizing a Node.js Express API with an Angular frontend

While developing an API using Node.js, Express, and MongoDB, I encountered a CORS error when trying to call the API from an Angular application. Strangely enough, the API works fine when deployed on Render, but throws an error locally. Error: Access to XM ...

node.jsangularexpresscors

Automatically numbering table columns with custom language localization in JavaScript using Jquery

Is there a method to automatically number table data in a local or custom language? As a Bengali individual, I have figured out how to automatically number the first data of each row using css and js. However, I am uncertain about how to implement custom n ...

javascripthtmljquerycss

Ways to invoke a JavaScript function via a hyperlink. Various techniques to achieve this task

I want to create a div with the id of slider, and I am looking for a way to animate or hide it when a link is clicked. Specifically, I would like to toggle it open and close using a link. Javascript solution <script type="text/javascript"> ...

javascriptjquery

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

javascriptreactjstypescripttypesdiscriminated-union

I am getting a HTTP 405 error indicating that the method is not allowed, and it appears to

In my Javascript program, I requested this URL using the library epson-2.6.0.js, which is the Epson SDK for JavaScript specifically designed for thermal printers. My target device is a TM U220 connected via ethernet. GET XHR http://192.168.199.15:8008/soc ...

javascriptajaxprintingcors

Automatically update the Vuex state with dynamic data

In the root component, I am looking to load a different version of state based on a specific 'data' variable. App.vue: export default { store: store, name: 'app', data() { clientId: 1 } } store.js: export const store = ...

javascriptvue.jsvuejs2vuex

In Angular 2, you can include a routerLink in a child component that directs to the root

Currently, I am developing a web application using Angular 2 Beta 8 and encountering an issue with nested routes while utilizing the routerLink directive. The structure of the router is as follows: AppCmp |-> NewItemFormCmp |-> UserDashboardCmp ...

javascriptroutesangularrouterangular2-routing

Error in AWS Lambda: JSON parsing error due to unexpected token 't' at position 6

I'm currently working on a basic lambda function that utilizes a post request to insert data into DynamoDB. However, every time I deploy the lambda function and test it using Postman, I keep encountering a 502 Bad Gateway error. To troubleshoot this ...

javascriptnode.jsaws-lambdaamazon-dynamodb

Customize the font color in Material UI to make it uniquely yours

How can I customize the default Text Color in my Material UI Theme? Using primary, secondary, and error settings are effective const styles = { a: 'red', b: 'green', ... }; createMuiTheme({ palette: { primary: { ...

javascriptreactjsmaterial-designmaterial-ui

Twice the data fetching through ajax on popup is observed using php mysql

I've been struggling for the past two hours. Attempted : location.reload(); reset form Tried many features, but after closing my popup and reopening it or opening another ID, the previous ID data is still visible. This happens continuously for all ...

javascriptphpjquerymysqlajax

Discover identical HTML elements

I have a simple HTML code that I would like to split into similar parts: <input id="checkbox1"><label><br> <input id="checkbox2"><label><br> <input id="checkbox3"><label><br> The desired result should ...

javascriptjqueryhtmltraversal

I am experiencing a problem with express-session where it seems like every other device is logged in once I log in. How can I resolve this issue?

Currently, I am using express-session to set up a basic login system. However, I am facing an issue where once I log in on one device, all other devices also show as logged in to that same account. When I checked the session using console.log, it showed ...

node.jsexpressexpress-session

Implementing ngFor to Iterate Through a JSON Object in Angular 6

Iterate through the object list retrieved from a JSON object Here is the JSON object that I have fetched: { "0": { "0": null, "1": "Consolidated Statements of Changes in Stockholders\u2019 Deficit", "2": null, "3": "", "4": "" ...

javascriptangularangular6angular7

Integrating React with Node.js/Express for Seamless Communication

I have been experimenting with React and Node.js/Express separately. I currently have two separate files: React (built into HTML/JS) file <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script cro ...

node.jsreactjsexpressmern

How can I switch the values of two select components in React js when clicked?

I am working on a project where I have two select components positioned on the right and left side respectively, each with different values - A on the right side and B on the left side. Now, in response to a button click event, I need to swap component A t ...

javascriptreactjs

Fetching all data from a SQLite database in a Listview using React Native

I have been utilizing the library found at https://github.com/andpor/react-native-sqlite-storage in my react native project. To retrieve a single row from the database, I use the following code: db.transaction((tx) => { tx.executeSql('SEL ...

javascriptreactjstypescriptreact-native

Error with Vimeo SDK: Mysterious Player Issue Post Setup (VueJS)

I have a requirement to showcase multiple videos on a Vue-powered website using a Vimeo player. To achieve this, I have developed a VideoPlayer component specifically designed for each video: <template> <div class="video-element__containe ...

javascriptvue.jsvimeo

What is the best way to maintain the toggleClass event state once an ajax call has been made?

If I have the HTML code below <div class="row"> <div class="link grey"> <a href="#">Link</a> </div> </div> <div class="row"> <div class="link"> <a href="#">Link</a> </div> & ...

javascriptjqueryajax

Delving into the World of ES6 Symbols

Throughout my experience with various programming languages, from C# to Lisp to Scala to Haskell, symbols have consistently behaved as singleton objects. This means that any two symbols with the same name are guaranteed to be identical. In Racket: (equal? ...

javascriptecmascript-6symbols