[ichor]

Подскажите, пожалуйста, как решить следующую задачу. Я пишу приложение для новостей. Содержание каждого поста частично (название, несколько иллюстраий, дата создания, раздел, аннотация, часть текста) вносятся в базу MongoDB. Каждая новость соответственно содержит уникальный id. Все это сделать, несложно.

Однако каждая новость также должна иметь часть уникального кода (html + js, как правило), который я планирую вносить вручную. К примеру, элементы canvas.
Таким образом вносить в каждую новость оригинальные элементы дизайна.

Эту задачу я планировал решить путем создания под каждую новость js файла, содержащего компонент. Файл создается вручную, оборачивается в компонент, скажем, ArtBlock и загружается на сервер в отдельную папку в ходе создания статьи (uploader), методом как и иллюстрации к статье.
Название файла должно совпадать с id статьи, чтобы через пропсы автоматически найти его в соответствующей папке и импортировать на страницу статьи.

Для этих целей я планировал использовать динамический import @loadable/component:

const Post = ({ post }) => {
  const { loading, error, data } = useQuery(IS_LOGGED_IN);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!</p>;
  let arr = post._id;
  const ArtPage = loadable(post => import(`../arts/${arr}`));

  return (
    <article>
    <ArtPage />
    <div id={post._id}></div>
    <ImgStyle>
      <img src={post.imageUrl} />
    </ImgStyle>
      <H2>{post.title}</H2>
      <Link style={linkStyle} to={`/cats/${idcat}`}>
        <H4R>{post.category.catname}</H4R>
      </Link>
      <H4R>{post.createdAt}</H4R>
      <Link style={linkStyle} to={`/users/${iduser}`}>
        <H4R>{`author ${post.author.name}`}</H4R>
      </Link>
      <H4R>{`views ${post.viewsCount}`}</H4R>
      <PRiv4>
        <ReactMarkdown children={post.body}  />
      </PRiv4>
    </article>
  );
};

Но код упорно отказывается работать. При этом если убрать переменную и вставить конкретно название файла, но компонент подгружается.

const ArtPage = loadable(post => import(`../arts/63addc830407bc4b94f5d965`));

Почему все-таки импорт не грузит переменную?

const ArtPage = loadable(post => import(`../arts/${arr}`));

Несколько дней уже убил на поиск решения, но никак((