не может импортировать побочные эффекты в машинописи

Question

У меня есть следующий код для маршрутизации (Маршруты. 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 файле. Тем не менее, это не работает в машинописи (файл .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'

Похоже, что он просто возвращает до того, как завершит импорт .. так что это означает для машинописи, он не работает статически, так как пытается импортировать $ {props.site}, когда переменная $ {props.site} недоступна, и возвращает ошибка.

Как я могу это исправить?

my 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 может происходить только на верхнем уровне ). Также рассмотрите возможность перемещения логи c за пределы компонента.

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

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

Тогда просто внутри компонента:

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

   return (...);
}