Pesquisa de site

visual studio - Não foi possível encontrar um arquivo de declaração para o módulo 'material-ui/styles/MuiThemeProvider'?


Estou tentando usar o tema react material-ui após tê-lo instalado pelo npm, e recebo os seguintes erros quando incluo 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' em boot-client.tsx:

TS7016: Não foi possível encontrar um arquivo de declaração para o módulo 'material-ui/styles/MuiThemeProvider'. 'W:/web/WebFront/node_modules/material-ui/styles/MuiThemeProvider.js' implicitamente possui um tipo 'any'. Tente npm install @types/material-ui/styles/MuiThemeProvider se ele existir ou adicione um novo arquivo de declaração (.d.ts) contendo declare module 'material-ui/styles/MuiThemeProvider';

Eu tentei ambas as sugestões sem sucesso, incluindo executar o comando: npm install -D @types/material-ui.

Minha pasta @types em node_modules existe com os tipos relevantes.

Aqui está o código onde estou tentando usá-lo:

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

Resposta #1

Ok, eu descobri, no tsconfig.json em 'compilerOptions' o Visual Studio por padrão tinha seus tipos definidos como ["webpack-env"], eu precisava adicionar "material-ui" a ele ou, opcionalmente, apenas removê-lo: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Resposta #2

A solução que funcionou para mim é a resposta do med acima, que eu explico com mais detalhes abaixo.

Abra o arquivo tsconfig.json. Adicione "types":"material-ui", dentro de "compilerOptions": {}

como em

"compilerOptions": {"types":"material-ui"}

Artigos relacionados