javascript - typescript에서 부작용을 가져올 수 없습니다

라우팅 (Routes.js)에 대한 다음 코드가 있습니다.

export default (props) => {
    import(`../styles/${props.site}/theme.css`);
  return (
    <div>
      <Menu />
      <Switch>
        <Route
          exact path="/"
          render={({ staticContext, match }) => {
            const site = staticContext
              ? staticContext.site
              : location.hostname.split(".")[0]
            return <UniversalComponent site={site} match={match} page="core/ToBeDeleted_Homepage" />
          }}
        />
...
...

먼저 CSS 파일을 다음과 같이 가져옵니다.

"import( ../styles/${props.site}/theme.css );"

여기에서 가져 오기 부작용이 사용되므로 ${props.site} 변수가 사용 가능할 때마다 정적으로 작동하고 가져 오는 응용 프로그램에 바인드됩니다.

그런 다음 "return (~~~)"안에있는 모든 것을 사용하여 앱을 렌더링합니다.

위의 코드가 .js 파일로 작성된 경우 작동합니다. 그러나 이것은 typescript (.tsx 파일)에서는 작동하지 않습니다.

.tsx 파일에서 매우 유사한 코드를 사용하면 다음과 같은 오류가 발생합니다.

[FLUSH CHUNKS]: Unable to find styles/localhost-theme-css in Webpack chunks. Please check usage of Babel plugin.
(node:28539) UnhandledPromiseRejectionWarning: Error: Cannot find module './undefined/theme.css'

가져 오기를 마치기 전에 반환되는 것처럼 보입니다. 따라서 이것은 typescript의 경우 ${props.site} 변수를 사용할 수없고 오류를 반환 할 때 ${props.site}를 가져 오려고하기 때문에 정적으로 작동하지 않습니다.

이 문제를 어떻게 해결할 수 있습니까?

내 tsconfig.json :

{
  "compilerOptions": {
    "target": "ESNext", 
    "module": "ESNext", 
    "allowJs": true,    
    "jsx": "react",     
    "sourceMap": true, 
    "outDir": "dist", 
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    ".vscode"
  ]
}