Importing axios results in a casing unexpected behaviour warning in browser

Question

I'm going through a tutorial that makes use of axios for HTTP requests. I have set up an axios instance to look like this:

import axios from 'axios';

const axiosInstance = axios.create({
    baseUrl: 'https://www.google.com/'
});

export default axiosInstance;

I have saved it in the root of my project in a file called AxiosOrders.js. When I import the file using import MyAxios from '../../AxiosOrders'; and do nothing else the console logs:

C:/DEV/Projects/learning-initiative/burger-builder/node_modules/process/browser.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\DEV\Projects\learning-initiative\burger-builder\node_modules\process\browser.js
    Used by 2 module(s), i. e.
    C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\DEV\Projects\learning-initiative\burger-builder\node_modules\react-error-overlay\lib\index.js
* C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\dev\Projects\learning-initiative\burger-builder\node_modules\process\browser.js
    Used by 1 module(s), i. e.
    C:\DEV\Projects\learning-initiative\burger-builder\node_modules\babel-loader\lib\index.js??ref--6-oneOf-2!C:\dev\Projects\learning-initiative\burger-builder\node_modules\axios\lib\defaults.js

When I use the imported object, it does not take the baseUrl from the instance I created.

MyAxios.post('/orders.json', order)
        .then(response => console.log(response))
        .catch(error => console.log(error));

Actually makes a request to http://localhost:3000/orders.json. When I place a debugger and try to print the object to the console by typing MyAxios it tells me Uncaught ReferenceError: MyAxios is not defined.

Is this what the casing warning is referring to or am I missing something?

My package.json as requested:

{
  "name": "burger-builder",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "prop-types": "^15.7.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Please show how did you import axios instance. Also your package.json file. May be you have installed same library of different versions. — Piyush, Jun 12 '20 at 17:10
@Piyush I have added my package.json. Also, Ludwiguer, I am yes, sorry I missed it in the formatting above. — Nanor, Jun 12 '20 at 19:03

score 2 · Answer 1 · answered Jun 16 '20 at 05:20

You can try below to solve your issue:

First, del your node_modules folder. Kill all your terminals(or windows cmd) and freshly open the terminal and navigate to your project path properly. Make sure to use correct case of your folder name. Eg: if your folder name is DEV don't do cd dev. Do cd DEV. Then do npm install. See here and here
In your project, see if you are doing any import React from 'React'; instead of import React from 'react';

There is nothing wrong in the way you are exporting and importing axios. If your path issue is resolved then the correct instance of the axios will be picked up and correct url will be picked up when you do MyAxios.post.

if answer doesn't help, plz share your github repo link and/or share more info as mentioned by other experts in the question's comment section. — gdh, Jun 16 '20 at 05:21

score 1 · Accepted Answer · answered Jun 15 '20 at 11:18

It seems the two modules are actually the same module: node_modules\process\browser.js

Anyway their complete name are C:\DEV\... and C:\dev\...; probably this is the cause of the warning; deleting node_modules directory and package-lock.json file and installing dependencies once again, should solve the problem of the warning.

Typing MyAxios in your console results in a ReferenceError because it's defined in your package and not a window attribute.

Once said that I think the source of your main problem (calling http://localhost:3000/orders.json) is somewhere else.

Hope this somehow helps.

Deleting `node_modules` did fix the casing warning and you were also correct that the source of my main problem was elsewhere. It turns out it should have been `baseURL` instead of `baseUrl`. — Nanor, Jun 16 '20 at 17:13

Importing axios results in a casing unexpected behaviour warning in browser

2 Answers2