Add markdown rule

Hello, I’ve made a few attempts and want to know if I’m on the right track.

I’m importing project details in markdown files and I’ve set the webpack option within static.config.js as follows:

webpack: (config, { defaultLoaders }) => {
    const renderer = new marked.Renderer()
    config.module.rules.push({
      test: /\.md$/,
      loader: 'html!markdown?gfm=false',
      options: renderer,
    })
    return config
  },

When running the project I get a series of errors:

Failed to rebuild.
./node_modules/grid-styled/dist/index.js
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <p>&#39;use strict&#39;;</p>
| <p>Object.defineProperty(exports, &quot;__esModule&quot;, {
|   value: true

./node_modules/react-dom/index.js
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <p>&#39;use strict&#39;;</p>
| <p>function checkDCE() {
|   /<em> global <strong>REACT_DEVTOOLS_GLOBAL_HOOK</strong> </em>/

./node_modules/react/index.js
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <p>&#39;use strict&#39;;</p>
| <p>if (process.env.NODE_ENV === &#39;production&#39;) {
|   module.exports = require(&#39;./cjs/react.production.min.js&#39;);

And the errors continue quite a bit. Obviously I’m not configuring webpack correctly. I assume that if it had anything to do with the html loader definition in my new rules that it would fail at an HTML item and tell me so. Your docs seem high-quality, I just believe I’m missing something. Any direction would be greatly appreciated, thank you.

[EmilTholin]

@josephdburdick Ah, gotcha. You need to use webpack in the files that will eventually get sent to your users’ browser, but in the static.config.js file you can use any Node utility you like, e.g:

import fs from 'fs'
import { markdown } from 'markdown'

// ... 

export default {
  getRoutes: () => {
    return [
      {
        path: '/about',
        component: 'src/containers/About',
        getProps: () => ({
          markdown: markdown.toHTML(fs.readFileSync('./src/test.md', 'utf-8')),
        })
      },
    ]
  },
}

I added an example to the same repository.

[josephdburdick]

I appreciate the examples you guys have produced, it has helped me get a better idea as to what the problem is and what the solution could be.

First, I understand the approach with static.config.js, is there a way however to import the .md file inside the static.config.js file so produce the data that would be summoned within a route definition? For example, I have a route for “projects” and each :id for the project is the name of the markdown or frontmatter file that would be pulled from src/projects/projectID.md