Typescript与react-loadable的一个问题

#1
class App extends Component {
  render() {
return (
  <div>
      <Header />
      <Tab />
      <Switch>
          {/*配置默认路由*/}
          <Route
              exact
              path="/"
              render={() => <Redirect to="/recommend" />}
          />
          <Route path="/recommend" component={Recommend}/>
          <Route path="/rank" component={Rank}/>
          <Route path="/search" component={Search}/>
          <Route path="/singer" component={Singer}/>
      </Switch>
      <Route path="/user" component={UserCenter}/>
      <Player/>
  </div>
);
  }
}

export default App;

import Loadable from 'react-loadable';
import Loading from 'reuse/loading/Loading'
const Rank = Loadable({
    loader: () => import('components/rank/Rank'),
loading: () => <Loading text={"按需加载"}/>
})

const Search = Loadable({
    loader: () => import('components/search/Search'),
loading: () => <Loading text={"按需加载"}/>
})

const Singer = Loadable({
    loader: () => import('components/singer/Singer'),
loading: () => <Loading text={"按需加载"}/>
})

const UserCenter = Loadable({
    loader: () => import('components/user-center/UserCenter'),
loading: () => <Loading text={"按需加载"}/>
})

上面代码是实现按需加载的代码,按需加载成功,但是webstorm依旧标红,并且将: import Loadable from ‘react-loadable’;以下的代码放到class App之前根本无法编译成功,总是提示语法错误,在app中render处少一个“}”。求大佬解答。
项目源码地址

#2

标红为: