Подскажите, пожалуйста, как решить следующую задачу. Я пишу приложение для новостей. Содержание каждого поста частично (название, несколько иллюстраий, дата создания, раздел, аннотация, часть текста) вносятся в базу 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}`));
Несколько дней уже убил на поиск решения, но никак((
