0

I want to make a list of blog posts and therefor I thought it would be easy to use MDX because it helps with styling each blog text. But I don't know if it's possible to import a MDX file and put it in blogs.text.

I tried to use the npm package mdx.macro with it's function importMDX, but I get an error which says that the imported file is outside the src/.

mdx.macro documentation: 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;

I import this file in my blog and loop through all the items. But the importMDX keeps giving me the following error:

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.

Maybe there's an easier option than this? Thanks in advance!

MoazRub
  • 2,881
  • 2
  • 10
  • 20
wkokgit
  • 31
  • 4

2 Answers2

1

Adding to @mfakhrusy's answer , I had to change my blogs.js file to

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;

And my Blog1.js file contains this 

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;

So now I can write blogs in markdown format and loop through them to show them on my website!

wkokgit
  • 31
  • 4
0

According to The create-react-app imports restriction outside of src directory

It's a restriction from CRA developer. You can try to eject your CRA app and try it again. (see eject script on package json), and remove ModuleScopePlugin from webpack config. Be careful though, eject is a one-way trip, you cannot go back.

It happens because from what I've seen from the doc, the package tries to generate a cache file which being imported later by the app, and CRA would prohibit that by throwing that error you encountered.

mfakhrusy
  • 1,128
  • 1
  • 11
  • 20
  • Thanks for the response! I got it working, but it only works when I do this in my blogs file: `const MyDocument = mdx' #hello ' ` and then add it to my text parameter as `text : `. It doesn't work when I try to import a blog from an other file, with the const MyDocument in it. Then I get a InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/Blog1.1ffec661.mdx') is not a valid name. So something will go wrong again. – wkokgit Apr 16 '19 at 19:39
  • Okay the problem was that my Blog1 file was a .mdx file, but I had to change it to .js. Now it's working! – wkokgit Apr 16 '19 at 19:49