React template not working

[theCuriousOne]

When you run the template ReactReduxSpa with dotnet run it will load up perfectly.
But when you delete the server and the client "dist" folders an typescript error will be shown in configureStore.ts (typescript version 2.3.4) which can be circumvented if you do this:

const createStoreWithMiddleware = compose( applyMiddleware(thunk, routerMiddleware(history)) )(createStore);

And if you upgrade the typescript to version 2.4.1 (latest at the moment) there will be another error:

TS2322: Type '(state: WeatherForecastsState, action: KnownAction) => WeatherForecastsState' is not assignable to type 'Reducer<WeatherForecastsState>'.

      Types of parameters 'action' and 'action' are incompatible.

        Type 'A' is not assignable to type 'KnownAction'.

          Type 'Action' is not assignable to type 'KnownAction'.

            Type 'Action' is not assignable to type 'RequestWeatherForecastsAction'.

              Property 'startDateIndex' is missing in type 'Action'.

                Type 'A' is not assignable to type 'ReceiveWeatherForecastsAction'.

                  Type 'Action' is not assignable to type 'ReceiveWeatherForecastsAction'.

                    Property 'startDateIndex' is missing in type 'Action'.

(still looking for a workaround on this one)
So.... the template is not working as expected :(

[MarkPieszak]

2.4 had some bigger breaking changes so I wouldn't upgrade any of the templates to that just yet.

[theCuriousOne]

I figured that out, and also there are no change logs available for TypeScript (at least not at this moment).
So I'll close it. and you can reopen it if you plan to upgrade to version 2.4.1 (or above) :)

[mcquiggd]

Just as an FYI, If I try to run the latest deployed generator created React-Redux template under IISExpress, with TypeScript 2.3.1, I get this:

The only times I have been able to run the generated code without errors, with multiple versions of TypeScript, has been dotnet run... is there perhaps something different in the way that IISExpress handles the TypeScript compilation differently?

(I am happy to continue with dotnet run. - it's TypeScript with third party libraries that cause the most problems).

[theCuriousOne]

@mcquiggd How do you run it on iis express? if you are starting it from Visual Studio Code debugger then what are your settings?

[mcquiggd]

Well, actually that was from Visual Studio 2017.

I have literally just tested the same project using VS Code, using the launch settings below.

.NET Core Launch (console) will work.

.NET Core Launch (web) gives the same TypeScript errors.

I am presuming now that the WebPackBased middleware is being used to provide its web server for hot reloading etc. And would not work with IISExpress in the way...?

You can try to set up Code properly to debug with this article

I think there is one on MSDN as well.

I really want to use VS Code as well for this. Much richer for the client side. I'm still searching for a reliable and reproducible setup using React, Redux, TypeScript, and ASP.Net Core. Something has broken too many times at key moments in projects. Always create a template that you manage to get working, and clone that.

{
      "name": ".NET Core Launch (console)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/ASPNetCoreReactRedux.dll",
      "args": [],
      "cwd": "${workspaceRoot}",
      "stopAtEntry": false,
      "console": "internalConsole"
    },
    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceRoot}/bin/Debug/netcoreapp1.1/ASPNetCoreReactRedux.dll",
      "args": [],
      "cwd": "${workspaceRoot}",
      "stopAtEntry": false,
      "launchBrowser": {
        "enabled": true,
        "args": "${auto-detect-url}",
        "windows": {
          "command": "cmd.exe",
          "args": "/C start ${auto-detect-url}"
        },
        "osx": {
          "command": "open"
        },
        "linux": {
          "command": "xdg-open"
        }
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceRoot}/Views"
      }
    },

[theCuriousOne]

Currently notinfront of PC (out), but maybe the build commands fromthe *.csproj are not being executed (see inside the csproj file)

[mcquiggd]

@theCuriousOne

Well, I'm still playing with this, and just did a test - which actually confuses me a little more.

I checked the default launch settings in my Visual Studio 2017 project, under Debug:

For IISExpress, they had the ASPNETCORE_ENVIRONMENT variable was preset to Development.
However for running the project directly, is was not set at all, and effectively that defaults to Production.

As soon as I changed the IISExpress settings to Production - all the TypeScript errors disappeared.

When I changed the project to run in Development - hey presto, the UseWebpackDevMiddleware was executed, and node started throwing out the TypeScript errors.

As expected, same in VSCode when the environment is set to Development -TypeScript errors.

Now the reason I a little more confused, is that this is the latest Yeoman edition of the generator released 2 months ago, and it looks as if it could never have worked. I am also surprised I hadn't realised that before ;-)

Maybe the dotnet new version of the command line template is newer?

Ugh. I just don't have time for this.

[mcquiggd]

Oh, and a few minutes ago, a new issue ReactRedux template doesn't compile in strict mode was logged.

Disabling it doesn't fix the issues - the typings are incorrect or missing.

Other people are now logging the same issue.

[theCuriousOne]

@mcquiggd Try upgrading to TypeScript 2.3.4 (since it is the most stable one (so far), and I am sure it works). Secondly this template is using .net core preview 2 (which is still not stable enough and at least if you plan to test with it (play with it) install the insider build of Visual Studio 2017 (which currently is 15.3).

Regarding the Environment variable, I have been experience also problems, even though I have set it manually as a permanent user variable, but it runs sometimes in production. If I set it from terminal before I use "dotnet run" the it is ok.

Regarding Yeoman, I don't understand why you mentioned it?

[mcquiggd]

@theCuriousOne

Thanks, I will try upgrading to TypeScript 2.3.4... I have to catch up on some lost time today, but will take a look tomorrow.

Currently using VS 2017 15.2 (Release).

We might be talking about different templates - as there are two ways to use this project (JavaScript Service ) - via yo generator-aspnetcore-spa, and via dotnet new . I am currently using Yeoman, with the generator released two months ago. - it targets netcoreapp1.1. I only use 'release' versions...

[DanHarman]

The generics error has been fixed in the latest version of redux, so if you upgrade to [email protected] you are should be OK to use typescript 2.4.1. See: reduxjs/redux#2467