CODEWITHSUNDEEP
javascriptreactjsaxios
Nanor
Nanor

Reputation: 2550

Importing axios results in a casing unexpected behaviour warning in browser

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"
    ]
  }
}

Upvotes: 2

Views: 444

Answers (2)

gdh
gdh

Reputation: 13682

You can try below to solve your issue:

  1. 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
  2. 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.

Upvotes: 2

Daniele Ricci
Daniele Ricci

Reputation: 15797

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.

Upvotes: 1

Related Questions