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

根据The create-react-app imports restriction outside of src directory

这是CRA开发人员的限制。您可以尝试弹出您的CRA应用，然后重试。（请参阅包json上的eject脚本），然后从webpack配置中删除ModuleScopePlugin。不过请注意，弹出是单程旅行，您不能返回。

发生这种情况的原因是，根据我从文档中看到的内容，该程序包尝试生成一个缓存文件，稍后由应用程序导入该缓存文件，而CRA会抛出该错误，从而禁止这样做。

Answer 2

除了@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;

所以现在我可以以markdown格式编写博客，并循环浏览它们以在我的网站上显示它们！

有没有办法在React中导入MDX或MD markdown文件并在数据数组中使用它？

2 个答案: