我使用dotnet new命令生成了Microsoft reactredux SPA模板。并尝试使用材料-ui。如果我只使用MuiThemeProvider包装我的应用程序并且不实现任何组件应用程序的工作。当我尝试使用任何组件时 来自material-ui每次我都会遇到异常。这是我的启动客户端类，我使用MuiThemeProvider：
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
import * as MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
let routes = RoutesModule.routes;
// Create browser history to use in the Redux store
const history = createBrowserHistory();
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
injectTapEventPlugin();
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a 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();
});
}
这是我使用material-ui组件的布局类：
import * as React from 'react';
import AppBar from '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>;
}
}
运行应用程序时，我收到此堆栈跟踪错误：
System.Exception: Call to Node module failed with error: TypeError: Cannot read property 'prepareStyles' of undefined
at AppBar.render (D:\ClientApp\dist\main-server.js:3020:48)
at D:\ClientApp\dist\vendor.js:43565:21
at measureLifeCyclePerf (D:\ClientApp\dist\vendor.js:42844:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (D:\ClientApp\dist\vendor.js:43564:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (D:\ClientApp\dist\vendor.js:43591:32)
at ReactCompositeComponentWrapper.performInitialMount (D:\ClientApp\dist\vendor.js:43131:30)
at ReactCompositeComponentWrapper.mountComponent (D:\ClientApp\dist\vendor.js:43027:21)
at Object.mountComponent (D:\ClientApp\dist\vendor.js:12312:35)
at ReactDOMComponent.mountChildren (D:\ClientApp\dist\vendor.js:47275:44)
at ReactDOMComponent._createContentMarkup (D:\ClientApp\dist\vendor.js:44445:32)
at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.<InvokeExportAsync>d__7`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.<InvokeExportAsync>d__13`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.SpaServices.Prerendering.PrerenderTagHelper.<ProcessAsync>d__33.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>d__0.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at AspNetCore._Views_Home_Index_cshtml.<ExecuteAsync>d__31.MoveNext() in /Views/Home/Index.cshtml:line 2
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.<RenderPageAsync>d__14.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Razor.RazorView.<RenderAsync>d__13.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.<ExecuteAsync>d__18.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.ViewResult.<ExecuteResultAsync>d__26.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeResultAsync>d__30.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeNextResultFilterAsync>d__28.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ResultExecutedContext context)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeNextResourceFilter>d__22.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Rethrow(ResourceExecutedContext context)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeAsync>d__20.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Builder.RouterMiddleware.<Invoke>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.<Invoke>d__6.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()
注意：我使用VS Pro 2017 v15.2与目标框架.NETCoreApp 1.1，这是我的package.json文件：
{
"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"
}
}