I have an asp.net core 5 api, with a react frontend. The frontend is a freshly created create-react-app. If I run npm start directly in the frontend folder, I don't receive any error in the browser console.
As soon as I start it from the asp.net core project I receive these errors in the browser console:
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
and
{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
This is my Configure method in Startup class:
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");
}
});
I have many other projects with this configuration, but only this one has this behavior. I feel I'm missing something obvious, but really can't spot it...
Many thanks in advance.