开发者问题收集

导入 axios 会导致浏览器中出现大小写意外行为警告

2020-06-12
433

我正在学习一个使用 axios 进行 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 将对象打印到控制台时,它会告诉我 Uncaught ReferenceError: MyAxios is not defined

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

我的 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"
    ]
  }
}
2个回答

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

  1. 首先,删除您的 node_modules 文件夹。关闭所有终端(或 Windows cmd),重新打开终端并正确导航到您的项目路径。 确保 文件夹名称的大小写正确。例如:如果您的文件夹名称是 DEV ,请不要执行 cd dev 。请执行 cd DEV 。然后执行 npm install。请参阅 此处 此处
  2. 在您的项目中,查看您是否在执行任何 import React from 'React'; 而不是 import React from 'react';

您导出和导入 axios 的方式没有任何问题。如果您的路径问题得到解决,那么当您执行 MyAxios.post 时,将拾取正确的 axios 实例并拾取正确的 url。

gdh
2020-06-16

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

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

在控制台中输入 MyAxios 会导致 ReferenceError ,因为它是在您的包中定义的,而不是 window 属性。

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

希望这能有所帮助。

Daniele Ricci
2020-06-15