Starting spa development server from asp.net core leads to casing errors within node_modules

Viewed 450

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.

0 Answers
Related