exception occurred in Microsoft SPA template for react-redux when using material-ui

197 Views Asked by At

I generated Microsoft reactredux SPA template with dotnet new command. And tried to use material-ui. If I only wrap my application with MuiThemeProvider and don't implement any component application works. When I try to use any component from material-ui every time I get exception. This is my boot-client class where I use 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();
    });
}

And this is my layout class where I use material-ui component:

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>;
    }
}

When running application I get an error with this stack trace:

    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()

Note: I'm using VS Pro 2017 v15.2 with target framework .NETCoreApp 1.1 and this is my 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"
  }
}
0

There are 0 best solutions below