reactjs - 从 asp.net core 启动 spa 开发服务器会导致 node_modules 中出现大小写错误
问题描述
我有一个带有反应前端的 asp.net core 5 api。前端是一个新创建的 create-react-app。如果我直接在前端文件夹中运行 npm start，我不会在浏览器控制台中收到任何错误。
一旦我从 asp.net 核心项目启动它，我就会在浏览器控制台中收到这些错误：
webpackHotDevClient.js:138
{projectPath}/npapp/node_modules/react-refresh/cjs/react-refresh-runtime.development.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:
* {projectpath}\npapp\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!{projectpath}\npapp\node_modules\react-refresh\cjs\react-refresh-runtime.development.js
Used by 1 module(s), i. e.
{projectpath}\npapp\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!{projectpath}\npapp\node_modules\react-refresh\runtime.js
* {projectpath}\npapp\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!{projectpath}\npapp\node_modules\react-refresh\cjs\react-refresh-runtime.development.js
Used by 1 module(s), i. e.
{projectpath}\npapp\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!{projectpath}\npapp\node_modules\react-refresh\runtime.js
和
{projectpath}/npapp/node_modules/react-refresh/runtime.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:
* {projectpath}\npapp\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!{projectpath}\npapp\node_modules\react-refresh\runtime.js
Used by 3 module(s), i. e.
{projectpath}\npapp\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-2!{projectpath}\npapp\src\index.js
* {projectpath}\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!{projectpath}\npapp\node_modules\react-refresh\runtime.js
Used by 2 module(s), i. e.
{projectpath}\npapp\node_modules\react-scripts\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!{projectpath}\npapp\node_modules\@pmmmwh\react-refresh-webpack-plugin\client\ReactRefreshEntry.js
这是我在 Startup 类中的 Configure 方法：
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseRouting();
app.UseAuthentication();
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "npApi V1");
});
app.UseHttpsRedirection();
app.UseIdentityServer();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseMvc();
app.UseSpa(spa =>
{
spa.Options.SourcePath = Path.Join(env.ContentRootPath, "npapp");
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
我有许多其他具有这种配置的项目，但只有这个具有这种行为。我觉得我错过了一些明显的东西，但真的无法发现它......
提前谢谢了。