Asp.Net Core with react and material-ui

Question

I create an Asp.Net Core project with the react template. I then proceed to install material-ui with the help of this page. I got some dependency issues, so I had to update the react and react-dom package followed up with updating some related packages and ending up with this package.json configuration:

{
  "name": "MaterialUITest",
  "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": "16.4.1",
    "react-dom": "16.4.1",
    "react-hot-loader": "3.0.0-beta.7",
    "react-router-dom": "4.3.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"
  },
  "dependencies": {
    "@material-ui/core": "^1.2.3",
    "@material-ui/icons": "^1.1.0"
  }
}

Now if I go ahead and add this to the beginning of Counter.tsx:

import Paper from '@material-ui/core/Paper'

Everything seems fine, I get no errors nor do I get notified that something went wrong. So I proceed to start the program and the next thing I get is the debugging error view telling me it is expecting some signs:

ERROR in [at-loader] ./node_modules/@material-ui/core/index.d.ts:57:34 
    TS1005: ')' expected.
ERROR in [at-loader] ./node_modules/@material-ui/core/index.d.ts:57:63 
    TS1005: '(' expected.
ERROR in [at-loader] ./node_modules/@material-ui/core/index.d.ts:57:67 
    TS1005: ',' expected.
ERROR in [at-loader] ./node_modules/@material-ui/core/index.d.ts:57:85 
    TS1005: '(' expected.

... and so on

I tried to update the pre-installed packages, but that just gave me more dependency issues which I could not resolve.

If anyone could try and create a Project that runs smoothly with Asp.Net Core, react and material-ui, I'd be thankful if you'd let me know how.

Answer 1

Fixed with the new Project Template, update to .Net Core 2.1 and Visual Studio 15.7