Create-react-app: Reference image in a markdown file

[sxywu]

Hi, I have a relatively simple set of visualizations that I want to provide annotations for (some images and text), and since I have quite a few sets of annotations I was thinking of doing them in separate Markdown files and importing them into React.

Then I realized:

• I don't know how to reference images in a Markdown file with CRA, since the only way is to import an image but I can't do that with Markdown (can I?)
• I can't seem to import a Markdown file (or text file)

I read in https://github.com/facebookincubator/create-react-app/issues/28 that we could potentially just deploy the static files to a CDN in production, but that seems like overkill for such a simple project.

Am I thinking about this in the correct way?

[gaearon]

Thanks for filing an issue! Did you previously work with a system that lets you import markdown from code? Was it some of the Webpack loaders?

[sxywu]

Nope! I just thought maybe it'd be possible (the only experience I have with Markdown is writing the README files). If it's not possible to import Markdown, I am also alright with being able to import a text file and using Remarkable.

I am currently reading this: https://webpack.github.io/docs/webpack-dev-server.html and looking into webpack.config.dev.js & webpack.config.prod.js - is this what you mentioned in #28 about also copying specific directories or serving from a different port? The confusing I have about serving from a different port is how to do it when I deploy to Github Pages.

Thank you Dan (:

[gaearon]

I think for now your best bet is just to embed markdown into JS files as string literals. You can use interpolation (ES6 template strings) to inject image URLs in them which you can obtain by importing images. You can even create files that export solely string literals and name them .md.js to make their role clear. Does this solve your use case?

[gaearon]

import myImageUrl from './image.png';

export default `
# Hello from markdown

![some image](${myImageUrl})
`.trim();

[sxywu]

Brilliant! It's much simpler and more straightforward than what I was thinking of doing - I will try it and let you know, thank you!

[gaearon]

Yea. The reason I don't want to enable importing md files directly is because different people might have different opinions about how to process them. Some will expect the output to be the original string, others will want to pre-compile it to HTML or even an intermediate object representation.

[sxywu]

It worked brilliantly, thank you! Closing this issue (:

[pjm17971]

@gaearon: Is there any alternative to this? i.e. a way to load a markdown file? I have dozens of them, and they are filled with back ticks which would all need to be escaped. (just now advancing react-scripts to latest version from something like 0.2 (yes, early adopter, and it "just worked").

[msikma]

There's no longer a way to directly import Markdown files. In case anyone finds their way here through Google, you could always use fetch() to accomplish this asynchronously:

// return the URL, e.g. /static/media/changelog.1fb9caf0.md
import myMarkdownFile from '../../../changelog.md';

fetch(myMarkdownFile)
  .then(response => response.text())
  .then(text => {
    // logs a string of Markdown content
    console.log(text);
  });

[gaearon]

Check out https://github.com/facebookincubator/create-react-app/issues/2961 for a discussion.

[pjm17971]

@gaearon thanks for adding the above issue for discussion. Some solution along those lines would be very helpful.

@msikma yeah, that's what I ended up doing too. Not ideal, but it works well enough for now.

[gaearon]

Related: https://github.com/facebookincubator/create-react-app/issues/3722.