Can't compile React Redux Template

[DavidNorena]

Hi, today i wanted to start a new project using net core 2 preview 2 and the react redux template but I can't compile the project can you please guys help me ?

[stephtr]

I can confirm this issue when creating a project with yo (using the most recent stable release of generator-aspnetcore-spa on npm).
It should work if you update typescript in package.json from version 2.3.2 (or similar) to 2.3.4 (not 2.4.* because that would result in another compile error).
(The template in this repository has been already update to version 2.4 so this bug should be fixed soon.)

EDIT: At the moment the changes necessary (thanks David) in package.json are:

    ...
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-redux": "4.4.45",
    "@types/react-router-dom": "4.0.6",
    "@types/react-router-redux": "5.0.3",
    ...
    "typescript": "2.3.4",

[DavidNorena]

Thanks man, solved it !

[stephtr]

I don't know but maybe it is better to keep this issue open until it is resolved completely so that other user having that problem find the workaround and maybe someone pushes a new version...

[DavidNorena]

@stephtr Done buddy !

[DavidNorena]

Hi, today after a fresh github clone of my project I had these two issues:

It seems that errors were produced due to outdated typescript definitions packages so I solved it like this:

npm install --save types/[email protected]
npm install --save types/[email protected]
npm install --save types/[email protected]
npm install --save types/[email protected]
npm install --save types/[email protected]

And now its building without problems...

Hope it helps some one !

[SteveSandersonMS]

Glad you got it solved!

Note that the next versions of the templates include npm-shrinkwrap.json files, so are set to precise versions of all dependencies, so should no longer have issues like this randomly appear when third parties release breaking changes.

Marking this as closed because it's fully solved in the latest code in the repo.

[flanamacca]

Got latest version - these are not present in the latest release.

https://raw.githubusercontent.com/aspnet/JavaScriptServices/721e3c45fd8e7e4657e4c6d5d0ed03a435f71b9e/templates/ReactReduxSpa/package.json is the package.json that people need to get in the interim.

Can confirm it works (so thank you for resolving)

[DavidNorena]

@SteveSandersonMS a Dumb question man, how do I update the templates ?

[SteveSandersonMS]

@DavidNorena The most recent build is at https://www.nuget.org/packages/Microsoft.DotNet.Web.Spa.ProjectTemplates, but note this is only compatible with the latest .NET Core 2.0 Preview 3 SDK and requires you to add https://dotnet.myget.org/F/aspnetcore-ci-release/api/v3/index.json to your list of NuGet feeds.

If you want a simpler update experience, wait until .NET Core 2.0 ships, and the latest SPA templates will be included in it.

[seklyza]

I updated the package.json, and still. After a restart and after I tried creating a new project, I still get this problem

[stephtr]

Have you also updated TypeScript and restored packages? I just tried to create a new project using generator-aspnetcore-spa, updated the package.json file and it compiles without issues.

[rpk-red]

Hi, after updating package.json file as @stephtr said, my solution works( it runs in browser normally) but it still gives me 400+ errors in index.d.ts file. Somebody had similar problem?

[stephtr]

You probably are using an older version of the template?
What were those errors about and what was you (old) package.json file?

[rpk-red]

I'm not sure what version is it, I just followed instructions from this site https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/ and installed reactredux with dotnet new.
This is my old package.json file:
{ "name": "TestRedux", "version": "0.0.0", "dependencies": { "@types/history": "4.5.1", "@types/react": "15.0.24", "@types/react-dom": "15.5.0", "@types/react-redux": "4.4.40", "@types/react-router-dom": "4.0.4", "@types/react-router-redux": "5.0.1", "@types/webpack": "2.2.15", "@types/webpack-env": "1.13.0", "aspnet-prerendering": "^2.0.5", "aspnet-webpack": "^1.0.29", "aspnet-webpack-react": "^2.0.0", "awesome-typescript-loader": "3.1.3", "bootstrap": "3.3.7", "css-loader": "0.28.1", "domain-task": "^3.0.0", "event-source-polyfill": "0.0.9", "extract-text-webpack-plugin": "2.1.0", "file-loader": "0.11.1", "history": "4.6.1", "jquery": "3.2.1", "json-loader": "0.5.4", "node-noop": "1.0.0", "react": "15.5.4", "react-dom": "15.5.4", "react-hot-loader": "3.0.0-beta.7", "react-redux": "5.0.4", "react-router-dom": "4.1.1", "react-router-redux": "5.0.0-alpha.6", "redux": "3.6.0", "redux-thunk": "2.2.0", "style-loader": "0.17.0", "typescript": "2.3.2", "url-loader": "0.5.8", "webpack": "2.5.1", "webpack-hot-middleware": "2.18.0", "webpack-merge": "4.1.0" } }

And my errors are:

• Error TS1005 '>' expected. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules\aspnet-webpack-react\index.d.ts
• Error TS1109 Expression expected. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules\aspnet-webpack-react\index.d.ts
• Error TS1128 Declaration or statement expected. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS1136 Property assignment expected. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2304 Cannot find name 'ReactChild'. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2305 Module '"C:/Users/g.ribic/Documents/Visual Studio 2017/Projects/TestRedux/node_modules/@types/react/index"' has no exported member 'DOMAttributes'. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react-dom\index.d.ts
• Error TS2314 Generic type 'Component<P, S>' requires 2 type argument(s). TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2349 Cannot invoke an expression whose type lacks a call signature. Type '{}' has no compatible call signatures. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2363 The right-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2365 Operator '>' cannot be applied to types 'boolean' and '{ new(props?: any, context?: any): any; getDefaultProps?(): any; }'. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2428 All declarations of 'Component' must have identical type parameters. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules\aspnet-webpack-react\index.d.ts
• Error TS2531 Object is possibly 'null'. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2604 JSX element type 'NavLink' does not have any construct or call signatures. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\ClientApp\components\NavMenu.tsx
• Error TS2693 'ComponentClass' only refers to a type, but is being used as a value here. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2694 Namespace 'React' has no exported member 'SVGProps'. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts
• Error TS2695 Left side of comma operator is unused and has no side effects. TestRedux (tsconfig project) C:\Users\g.ribic\Documents\Visual Studio 2017\Projects\TestRedux\node_modules@types\react\index.d.ts

[stephtr]

Could you try deleting the node_modules folder after updating package.json? (And after that restore packages.)

[rpk-red]

I tried that and it did not help. :S

[rpk-red]

Update: I created new template but then I fixed 1st issue by adding "@types/react-router": "4.0.11" in my package.json as shown here: #1066 and not updating any other package. But after that i got 7 other errors:

After that I tried to update apsnet-webpack and aspnet-webpack-react to last stable version but that just gave me more problems and did not solve previous 7.

[stephtr]

That change shouldn't be necessary.
One possibility would be that your Visual Studio is using an older version of TypeScript. Which version of VS are you using? Are you targeting netcoreapp1.1 or 2.0?

[rpk-red]

I'm using VS Pro 2017 Version 15.2 (26430.14) Release and targeting 1.1. I tried to target 2.0 but can't find solution, is it even possible or do I need to get 15.3 version of VS?

[bharney]

@rpkRED you do need to install VS 2017 15.3 to see the .NET Core 2.0 Target Framework.

[8bitreid]

not fixed

Issues still out of the box.

  "name": "WebApplication2",
  "private": true,
  "version": "0.0.0",
  "devDependencies": {
    "@types/history": "4.6.0",
    "@types/react": "15.0.35",
    "@types/react-dom": "15.5.1",
    "@types/react-hot-loader": "3.0.3",
    "@types/react-router": "4.0.12",
    "@types/react-router-dom": "4.0.5",
    "@types/webpack-env": "1.13.0",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "3.2.1",
    "bootstrap": "3.3.7",
    "css-loader": "0.28.4",
    "event-source-polyfill": "0.0.9",
    "extract-text-webpack-plugin": "2.1.2",
    "file-loader": "0.11.2",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.4",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-hot-loader": "3.0.0-beta.7",
    "react-router-dom": "4.1.1",
    "style-loader": "0.18.2",
    "typescript": "2.4.1",
    "url-loader": "0.5.9",
    "webpack": "2.5.1",
    "webpack-hot-middleware": "2.18.2"
  }
}

this is what came with the new project. I get build errors, and npm warnings.

Error		Cannot find module 'C:\src\GitHubRepo\WebApplication2\WebApplication2\node_modules\webpack\bin\webpack.js'	WebApplication2	C:\src\GitHubRepo\WebApplication2\WebApplication2\EXEC	1
Severity	Code	Description	Project	File	Line	Suppression State
Error	MSB3073	The command "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" exited with code 1.	WebApplication2	C:\src\GitHubRepo\WebApplication2\WebApplication2\WebApplication2.csproj	28	

[johnmckay-reward]

I'm still getting this, with the most recent version of Visual Studio and the most recent React template.