Есть ли способ импортировать файл разметки MDX или MD в React и использовать его в массиве данных?

Question

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

Я пытался использовать пакет npm mdx.macro с его функцией importMDX, но я получаю сообщение об ошибке, в котором говорится, что импортированный файл находится вне src /.

Документация mdx.macro: https://www.npmjs.com/package/mdx.macro

import React, { lazy } from 'react';
import { importMDX } from 'mdx.macro';

const blog1 = lazy(() => importMDX('./blog1.md'));


export const blogs = [
  {
      title: "Hello World",
      subtitle: "subtitle",
      text: blog1
  }

];

export default blogs;

Я импортирую этот файл в свой блог и перебираю все элементы. Но importMDX продолжает выдавать мне следующую ошибку:

Module not found: You attempted to import 
node_modules\.cache\mdx.macro\Content.6cbf05377c.mdx.js 
which falls outside of the project src/ directory. 
Relative imports outside of src/ are not supported.

Может быть, есть более простой вариант, чем этот? Заранее спасибо!

Answer 1

Добавляя к ответу @ mfakhrusy, мне пришлось изменить свой файл blogs.js на

import { mdx } from 'mdx.macro';
import Blog1 from './Blog1.js';

export const blogs = [
  {
      title: "My experiences as an intern working without getting paid",
      subtitle: "And the difficulties that come along with being undervalued by a company",
      text:  <Blog1 />
  }
];

export default blogs;

И мой файл Blog1.js содержит это

import React from 'react';
import { mdx } from 'mdx.macro';

export const Blog1 = mdx`
# Don't Panic

Since we decided a few weeks ago to adopt the leaf as legal tender, we have, of course, all become immensely rich.
`

export default Blog1;

Так что теперь я могу написатьблоги в формате уценки и просматривайте их, чтобы показать на моем сайте!

Answer 2

Согласно Ограничение на импорт create-реагировать-приложения вне каталога src

Это ограничение от разработчика CRA.Вы можете попробовать извлечь приложение CRA и попробовать его снова.(см. скрипт eject в пакете json) и удалите ModuleScopePlugin из конфигурации веб-пакета.Однако будьте осторожны, извлечение - это односторонняя поездка, вы не можете вернуться назад.

Это происходит потому, что из того, что я видел в документе, пакет пытается создать файл кэша, который позже импортируетсяapp, и CRA запретит это, выдав ошибку, с которой вы столкнулись.