Could not find a declaration file for module 'material-ui/styles/MuiThemeProvider'?

Question

I'm trying to use the react material-ui theme having installed it from npm, I get the following errors when I include 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx:

TS7016: Could not find a declaration file for module 'material-ui/styles/MuiThemeProvider'. 'W:/web/WebFront/node_modules/material-ui/styles/MuiThemeProvider.js' implicitly has an 'any' type. Try npm install @types/material-ui/styles/MuiThemeProvider if it exists or add a new declaration (.d.ts) file containing declare module 'material-ui/styles/MuiThemeProvider';

I've tried both suggestions to no avail including running the command: npm install -D @types/material-ui.

My @types folder in node_modules exists with the relevant types.

Here is the code where I'm trying to use it:

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 './configureStore';
import { ApplicationState }  from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;


import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });

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

, document.getElementById('react-app') ); }

renderApp();

// Allow Hot Module Replacement
if (module.hot) {
    module.hot.accept('./routes', () => {
        routes = require<typeof RoutesModule>('./routes').routes;
        renderApp();
    });
}

please give some code snippets from you App where you are trying to set MuiThemeProvider — bennygenel
the first error I've quoted is in the browser, the second is on the import. — meds
You are importing but not using MuiThemeProvider. You need to wrap your app with the MuiThemeProvider component — bennygenel

meds meds · Accepted Answer · 2017-09-11T10:21:57

Ok I figured it out, in tsconfig.json under 'compilerOptions' visual-studio by default had its types set to ["webpack-env"], I needed to add "material-ui" to it or optionally just remove it: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Could not find a declaration file for module 'material-ui/styles/MuiThemeProvider'?

2 Answers