Gatsby: Can't import .md files into a component

Created on 15 Jan 2019  路  10Comments  路  Source: gatsbyjs/gatsby

https://github.com/gatsbyjs/gatsby/issues/8280 - Issue reference.

TL;DR - Basically I want to import some privacy policies that are updated via a cli globally for my company and stored in S3, which our Gatsby static website then pulls down and updates manually (or via a webhook) But the issue is that because of the way you have to use frontmatter to create a template that then calls the .md file using GraphQL means that I have to specify the frontmatter in my global .md file which would then in turn add it to all my privacy policies. This means I have to write some hacky js function to remove the frontmatter when the project pulls it down.

Question / Bug - Why can't I just import the .md file?!

I love Gatsby but this just seems ludicrous.

question or discussion

Most helpful comment

Awesome, really appreciate the answer - I have got around this another way but will look at doing it this way in the future 馃憤

@eikhunter How did you get around this?

All 10 comments

Since the originally referenced comment was posted in 2016, I would assume that this functionality was since removed in Gatsby 2.0.

You can easily add a Webpack loader for markdown yourself. There are a variety of different loaders available, I personally like @mdx-js/loader.

Thanks for your response, it doesn't answer my question as to why the functionality has been removed, can't see any viable reason for this.

I honestly don't know, I only started contributing to the project when v2 was already released. Maybe someone from @gatsbyjs/core can answer.

Thanks for your help either way! 馃憤

Hey @eikhunter

The general idea is that we want to discourage expensive computation like parsing at runtime and _strongly_ encourage build time transformations

However, you can definitely add a loader to the webpack config and make it work

Like @jgierer12 mentioned https://github.com/mdx-js/mdx is quite nice

Did some digging, we did indeed put any files that were _imported_ in the public directory in v1
https://github.com/gatsbyjs/gatsby/blob/899bf5be088fc743253ec5a3430608135372f2e2/packages/gatsby/src/utils/webpack.config.js#L421

Now we only allow pdf files
https://github.com/gatsbyjs/gatsby/blob/c3ef5a718ca7a78371be295c4c0b4930f478ab83/packages/gatsby/src/utils/webpack-utils.js#L376

With respect to your original question, @eikhunter, @DSchau just made a great point and mentioned that the best way to do this would probably be to create custom nodes for this

Awesome, really appreciate the answer - I have got around this another way but will look at doing it this way in the future 馃憤

Awesome, really appreciate the answer - I have got around this another way but will look at doing it this way in the future 馃憤

@eikhunter How did you get around this?

Yeah, I am looking for a similar functionality. I simply want to be able to import some markdown content into various static sections of our website. I don't want to create pages based on markdown files.

Yeah, I am looking for a similar functionality. I simply want to be able to import some markdown content into various static sections of our website. I don't want to create pages based on markdown files.

Did you come up with a good method for achieving this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

magicly picture magicly  路  3Comments

mikestopcontinues picture mikestopcontinues  路  3Comments

totsteps picture totsteps  路  3Comments

ferMartz picture ferMartz  路  3Comments

timbrandin picture timbrandin  路  3Comments