无法在 typescript 中导入副作用

Question

我有以下路由代码（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 文件：

“导入（ ../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"
  ]
}

Answer 1

您可以使用require而不是import （因为import只能在顶层发生）。 还要考虑将逻辑移到组件之外。

const importStuff = (site) => {
   if (!site) return;

   require(`../styles/${site}/theme.css`);
};

然后简单地在组件内部：

export default (props) => {
   importStuff(props.site);

   return (...);
}