Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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"
                I tried import axios from 'axios' and var axios = require('axios') both but nothing changed.
– user7628486
                Jun 3, 2017 at 9:41
I know this might seem obvious but make sure there is a reference at the top of your file to the correct axios or install it 
https://www.npmjs.com/package/axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
                I've installed axios with npm and now it works correctly. The only mistake I had was excluding axios from webpack build.
– user7628486
                Jun 4, 2017 at 23:37
                I was having the same problem, until I placed the script tag above all my code. Makes perfect sense, as I was calling axios before it was even defined. Thank you for your contribution!
– malvadao
                Dec 12, 2017 at 17:03
npm i axios --global 
// --global flags will save you the stress of insstalling axios again.
That solved my error.
                I was installing with --global but it didn't solve my problem, without --global it worked
– Proteeti Prova
                Aug 5, 2019 at 13:19
                ⚠️ Installing axios globally is not a good practice, this also will make the code only work on your local machine. You have to install it locally by project => npm i axios
– TOPKAT
                Mar 22 at 17:46
https://unpkg.com/axios/dist/axios.min.js   <<linked this in my html (script src="")
Look on npm site if it changes https://www.npmjs.com/package/axios
I then removed the following line from my js...
const axios = require('axios')
No more issues for me!
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
                Installing a lib globally is not a good practice and will make the code only work in your local machine!
– TOPKAT
                Mar 22 at 17:47
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.