导入 axios 会导致浏览器中出现大小写意外行为警告
我正在学习一个使用 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"
]
}
}
您可以尝试以下方法解决问题:
-
首先,删除您的
node_modules
文件夹。关闭所有终端(或 Windows cmd),重新打开终端并正确导航到您的项目路径。 确保 文件夹名称的大小写正确。例如:如果您的文件夹名称是DEV
,请不要执行cd dev
。请执行cd DEV
。然后执行 npm install。请参阅 此处 和 此处 -
在您的项目中,查看您是否在执行任何
import React from 'React';
而不是import React from 'react';
您导出和导入 axios 的方式没有任何问题。如果您的路径问题得到解决,那么当您执行
MyAxios.post
时,将拾取正确的 axios 实例并拾取正确的 url。
看起来这两个模块实际上是同一个模块:
node_modules\process\browser.js
无论如何,它们的完整名称是
C:\DEV\...
和
C:\dev\...
;这可能是导致警告的原因;删除
node_modules
目录和
package-lock.json
文件并再次安装依赖项,应该可以解决警告的问题。
在控制台中输入
MyAxios
会导致
ReferenceError
,因为它是在您的包中定义的,而不是
window
属性。
曾经说过,我认为你的主要问题的根源(调用
http://localhost:3000/orders.json
)在其他地方。
希望这能有所帮助。