typescript - exception occurred in Microsoft SPA template for react-redux when using material-ui -
i generated microsoft reactredux spa template dotnet new command. , tried use material-ui. if wrap application muithemeprovider , don't implement component application works. when try use component material-ui every time exception. boot-client class use muithemeprovider:
import './css/site.css'; import 'bootstrap'; import * react 'react'; import * reactdom 'react-dom'; import { appcontainer } 'react-hot-loader'; import { provider } 'react-redux'; import { connectedrouter } 'react-router-redux'; import { createbrowserhistory } 'history'; import configurestore './store/configurestore'; import { applicationstate } './store'; import * routesmodule './routes'; import * muithemeprovider 'material-ui/styles/muithemeprovider'; import * injecttapeventplugin 'react-tap-event-plugin'; let routes = routesmodule.routes; // create browser history use in redux store const history = createbrowserhistory(); // application-wide store instance, prepopulating state server available. const initialstate = (window any).initialreduxstate applicationstate; const store = configurestore(history, initialstate); function renderapp() { injecttapeventplugin(); // code starts react app when runs in browser. sets routing configuration // , injects app dom element. reactdom.render( <appcontainer> <muithemeprovider > <provider store={store}> <connectedrouter history={ history } children={ routes } /> </provider> </muithemeprovider> </appcontainer>, document.getelementbyid('react-app') ); } renderapp(); // allow hot module replacement if (module.hot) { module.hot.accept('./routes', () => { routes = require<typeof routesmodule>('./routes').routes; renderapp(); }); } and layout class use material-ui component:
import * react 'react'; import appbar 'material-ui/appbar'; export class layout extends react.component<{}, {}> { public render() { return <div classname='container-fluid'> <div classname='row'> <div classname='col-sm-12'> <appbar /> </div> <div classname='col-sm-12'> { this.props.children } </div> </div> </div>; } } when running application error stack trace:
system.exception: call node module failed error: typeerror: cannot read property 'preparestyles' of undefined @ appbar.render (d:\clientapp\dist\main-server.js:3020:48) @ d:\clientapp\dist\vendor.js:43565:21 @ measurelifecycleperf (d:\clientapp\dist\vendor.js:42844:12) @ reactcompositecomponentwrapper._rendervalidatedcomponentwithoutownerorcontext (d:\clientapp\dist\vendor.js:43564:25) @ reactcompositecomponentwrapper._rendervalidatedcomponent (d:\clientapp\dist\vendor.js:43591:32) @ reactcompositecomponentwrapper.performinitialmount (d:\clientapp\dist\vendor.js:43131:30) @ reactcompositecomponentwrapper.mountcomponent (d:\clientapp\dist\vendor.js:43027:21) @ object.mountcomponent (d:\clientapp\dist\vendor.js:12312:35) @ reactdomcomponent.mountchildren (d:\clientapp\dist\vendor.js:47275:44) @ reactdomcomponent._createcontentmarkup (d:\clientapp\dist\vendor.js:44445:32) @ microsoft.aspnetcore.nodeservices.hostingmodels.httpnodeinstance.<invokeexportasync>d__7`1.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.nodeservices.hostingmodels.outofprocessnodeinstance.<invokeexportasync>d__13`1.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.nodeservices.nodeservicesimpl.<invokeexportwithpossibleretryasync>d__10`1.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.spaservices.prerendering.prerendertaghelper.<processasync>d__33.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.razor.runtime.taghelpers.taghelperrunner.<runasync>d__0.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ system.runtime.compilerservices.taskawaiter.getresult() @ aspnetcore._views_home_index_cshtml.<executeasync>d__31.movenext() in /views/home/index.cshtml:line 2 --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.mvc.razor.razorview.<renderpageasync>d__14.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.mvc.razor.razorview.<renderasync>d__13.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.mvc.viewfeatures.viewexecutor.<executeasync>d__18.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.mvc.viewresult.<executeresultasync>d__26.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.<invokeresultasync>d__30.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.<invokenextresultfilterasync>d__28.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.rethrow(resultexecutedcontext context) @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.next(state& next, scope& scope, object& state, boolean& iscompleted) @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.<invokenextresourcefilter>d__22.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.rethrow(resourceexecutedcontext context) @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.next(state& next, scope& scope, object& state, boolean& iscompleted) @ microsoft.aspnetcore.mvc.internal.controlleractioninvoker.<invokeasync>d__20.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.builder.routermiddleware.<invoke>d__4.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.spaservices.webpack.conditionalproxymiddleware.<invoke>d__6.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.spaservices.webpack.conditionalproxymiddleware.<invoke>d__6.movenext() --- end of stack trace previous location exception thrown --- @ system.runtime.exceptionservices.exceptiondispatchinfo.throw() @ system.runtime.compilerservices.taskawaiter.handlenonsuccessanddebuggernotification(task task) @ microsoft.aspnetcore.diagnostics.developerexceptionpagemiddleware.<invoke>d__7.movenext() note: i'm using vs pro 2017 v15.2 target framework .netcoreapp 1.1 , package.json file:
{ "name": "reactreduxapp", "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": "4.0.9", "@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": "3.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", "material-ui": "0.18.7", "react-tap-event-plugin": "2.0.1" } }
Comments
Post a Comment