Axios is not defined

Admin 1
Viewed 111392

I am using axios for building a simple weather app with React.js. I just completed the code but there is a problem. When I launch that app, it's not working at all and I see a reference error that says axios is not defined.

Here is my webpack.config.js file:

module.exports = {
    entry: './public/app/app.jsx',
    output: {
        path: __dirname,
        filename: './public/js/bundle.js'
    },
    externals: ['axios'],
    resolve: {
        root: __dirname,
        alias: {
            OpenWeatherMap: 'public/components/OpenWeatherMap.jsx',
            Main: 'public/components/Main.jsx',
            Nav: 'public/components/Nav.jsx',
            Weather: 'public/components/Weather.jsx',
            WeatherForm: 'public/components/WeatherForm.jsx',
            WeatherMessage: 'public/components/WeatherMessage.jsx',
            About: 'public/components/About.jsx'
        },
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            loader: 'babel-loader',
            query: {
                presets: ['react','es2015', 'stage-0']
            },
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/
        },{
            loader: 'json-loader',
            test: /\.json?$/
        }]
    }
};

and package.json file:

{
  "name": "weather",
  "version": "1.0.0",
  "description": "Simple Weather App",
  "main": "ext.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Milad Fattahi",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.16.1",
    "express": "^4.15.3",
    "json": "^9.0.6",
    "json-loader": "^0.5.4",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.24.1",
    "webpack": "^1.12.13"
  }
}
axios reactjs
7 Answers

I forgot to import axios. I added to the top of my script:

import axios from 'axios';

I also forgot to install axios. I installed axios via npm using:

npm i axios --global 
// --global flags will save you the stress of insstalling axios again.

That solved my error.

user_51773590

i think first u have to install npm install axios --save then import it in app.js file

import axios from "axios";
user_103083420

You can add this at the top of the javascript file:

const axios = require('axios').default;
user_12102140
user_164047850

The accepted answers include three main remedies, but there is a fourth potential remedy. I will repeat the already quoted ones for completion

Remedy 1

In the root project folder, install Axios:

npm i axios --global

Remedy 2

In the .js file that uses axios, import axios:

import axios from 'axios';

Remedy 3

Remove externals: ['axios'], from your webpack.config

Remedy 4

You are not calling axios to begin with through a spelling/case error. You may be calling something like await Axios as opposed to the correct call await axios.

Some tutorials like this one make the case typo and this causes great pain to the unsuspecting newcomer

user_59593720

Phase 1: Install Axios using terminal or CMD:

npm install axios --global

Phase 2: Import library to your .js

import axios from 'axios';
user_127413420
Related