Javascript 导入axios会导致浏览器中出现异常行为警告

Javascript 导入axios会导致浏览器中出现异常行为警告,javascript,reactjs,axios,Javascript,Reactjs,Axios,我正在学习一个教程,该教程使用for HTTP请求。我已经设置了一个axios实例,如下所示: import axios from 'axios'; const axiosInstance = axios.create({ baseUrl: 'https://www.google.com/' }); export default axiosInstance; 我已将其保存在项目的根目录下的一个名为AxiosOrders.js的文件中。当我使用import MyAxios from'

我正在学习一个教程,该教程使用for HTTP请求。我已经设置了一个axios实例,如下所示:

import axios from 'axios';

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

export default axiosInstance;
我已将其保存在项目的根目录下的一个名为AxiosOrders.js的文件中。当我使用
import MyAxios from'../../AxiosOrders'导入文件时并在控制台日志中不执行其他操作:

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
当我使用导入的对象时,它不会从我创建的实例中获取baseUrl

MyAxios.post('/orders.json', order)
        .then(response => console.log(response))
        .catch(error => console.log(error));
实际向
http://localhost:3000/orders.json
。当我放置调试器并尝试通过键入
MyAxios
将对象打印到控制台时,它告诉我
uncaughtreferenceerror:MyAxios未定义

这是套管警告所指的还是我遗漏了什么

请求的My package.json:

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

看起来这两个模块实际上是同一个模块:
node\u modules\process\browser.js

无论如何,它们的全名是
C:\DEV\…
C:\DEV\…
;可能这就是警告的原因;删除
node_modules
目录和
package lock.json
文件并再次安装依赖项,应该可以解决警告问题

在控制台中键入
MyAxios
会导致
ReferenceError
,因为它是在包中定义的,而不是
窗口
属性

曾经说过我认为你主要问题的根源(调用
http://localhost:3000/orders.json
)在其他地方


希望这能有所帮助。

您可以尝试以下方法来解决您的问题:

  • 首先,删除您的
    node\u modules
    文件夹。关闭所有终端(或windows cmd),重新打开终端并正确导航到项目路径确保使用正确的文件夹名称大小写。例如:如果你的文件夹名是
    DEV
    不要做
    cd-DEV
    。执行
    cd-DEV
    。然后进行npm安装。看到和
  • 在您的项目中,查看您是否正在从“React”导入任何
    React而不是
    从“React”导入React

  • 导出和导入axios的方式没有问题。如果您的路径问题得到解决,则当您执行MyAxios时,将获取正确的axios实例和正确的url。post

    请说明您是如何导入axios实例的。还有您的package.json文件。可能是您安装了不同版本的同一个库。是否正在导出实例?@Piyush我已添加了my package.json。还有,Ludwiguer,是的,很抱歉我在上面的格式中漏掉了。你能分享你的目录结构吗?如果答案没有帮助,请共享您的github repo链接和/或共享其他专家在问题评论部分提到的更多信息。删除
    node_模块
    确实修复了外壳警告,并且您也正确地认为我的主要问题的根源在其他地方。原来它应该是
    baseURL
    ,而不是
    baseURL