Gatsby: [This Totally doesnt'work! ] Just import a markdown file actually

[h0rhay]

Yup! Just import a markdown file actually :-) This is actually Gatsby is doing under the hood.

In a JS component you can do something like

// File should be underscored so Gatsby doesn't convert it into a page.
import Text from './_my_special_markdown_file.md'

There's also several React components on NPM that let you write Markdown directly in your React component e.g. https://www.npmjs.com/package/react-markdown-it which also uses markdown-it like Gatsby.

Did that answer your question?

_Originally posted by @KyleAMathews in https://github.com/gatsbyjs/gatsby/issues/245#issuecomment-210616237_

^^ I did the above:
Like this:

import Markdown from 'react-markdown'

import Intro from '../content/_homepage_intro.md'

I just get this :

 ERROR  Failed to compile with 1 errors                                                                                                                      18:00:47

 error  in ./src/content/_homepage_intro.md

Module parse failed: xxx/xxx/xxx/src/content/_homepage_intro.md Assigning to rvalue (2:2)
You may need an appropriate loader to handle this file type.

So I added the gatsby-source-filesystem plugin,

and resolved it like this:

plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-page-transitions',
    'gatsby-plugin-sass',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: path.resolve('src/content/'),
        name: 'markdown-pages',
      },
    },

in gatsby-config.js

And that just makes the entire build fail as it can no longer find graphql in the main index.js

error UNHANDLED EXCEPTION


  Error: Cannot find module 'gatsby/graphql'

Much sadness :(
Any pointers would be massively appreciated :)..
I LOVE Gatsby.. for SO many reasons, but its so hard to debug once graphql goes bang...

[stefanprobst]

It's not really clear to me what you are trying to achieve. The Gatsby tutorial walks you through building pages from markdown.

[DSchau]

Thanks @stefanprobst!

@h0rhay I'm going to close this as answered, but the general idea is that you wouldn't want to directly import Markdown and then implement a parser. A much _better_ strategy is to use the plugins specified in that tutorial, that let you query your content for Markdown, and then apply transformations at _build_ time (e.g. markdown -> html) instead of at runtime like it appears you're proposing.

We hope that tutorial helps, and please feel free to re-open if we can assist further. Additionally, I wrote a tutorial on getting a blog setup, which also uses Markdown as the content layer--this could be helpful!

Thanks!!

[eikhunter]

I am having the same issue, I don't want to build pages out of .md files I simply want to reference them in a component, not have to create a graphQL query to do something simple. I am currently trying to implement a t&c page and have the t&c saved in a .md file that is pull from a server and updated during build, I just want to be able to parse it. Any help would be appreciated

[barbalex]

I have a use case that I _think_ needs this too:

• My App is predominantly a dynamic SPA
• It has an extensive documentation part that is built at build time
• In some dynamic components I want to show some of the docs inside dialogs

So I tried exactly the same as @h0rhay and did not succeed.

Is there a better way?