Unable to generate development bundle with markdown files

[freshprinze]

Description

Created a brand new project using gatsby new. Added transformer-remark plugin to parse md files.
When I run gatsby develop the build complaints about the following.

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed
Assigning to rvalue (1:2)
File: src/pages/index/mine.md:1:2

ERROR in ./src/pages/index/mine.md 1:2
Module parse failed: Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> ---
| title: test
| ---
 @ ./src/ sync ^\.\/.*$ ./pages/index/mine.md
 @ ./src/pages/index.js 124:13-80 193:13-44 375:13-36
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 21:11-23:5
 @ ./.cache/app.js 17:0-52 30:0-86 32:27-40 30:0-86

The mine.md file only has the following frontmatter and no other content.

As a result of the error I am unable to load markdown files which is crucial for my project.
Any help is appreciated.

---
title: test
---

Steps to reproduce

1. Generate new v3 project using gatsby new main-site
2. Remove unneeded manifest & offline plugins and update gatsby-config.js as well
3. Add gatsby-transformer-remark plugin and update the config

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/pages`,
        name: "pages",
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        gfm: true,
        commonmark: true,
        footnotes: true,
        pedantic: true,
        plugins: [],
      },
    },
  ],
}

4. Create src/pages/index/mind.md, with the following frontmatter only

---
title: test
---

5. Run gatsby develop

Expected result

The development bundle should get generated without errors.

Actual result

Webpack complains, with the following

ERROR in ./src/pages/index/mine.md 1:2
Module parse failed: Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> ---
| title: test
| ---
 @ ./src/ sync ^\.\/.*$ ./pages/index/mine.md
 @ ./src/pages/index.js 124:13-80 193:13-44 375:13-36
 @ ./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js 21:11-23:5
 @ ./.cache/app.js 17:0-52 30:0-86 32:27-40 30:0-86

Environment

System:
OS: Linux 5.8 Ubuntu 20.10 (Groovy Gorilla)
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
Yarn: 1.22.10 - ~/.nvm/versions/node/v12.20.1/bin/yarn
npm: 6.14.10 - ~/.nvm/versions/node/v12.20.1/bin/npm
Languages:
Python: 3.8.5 - /home/asiri/miniconda3/bin/python
Browsers:
Chrome: 90.0.4430.72
Firefox: 87.0
npmPackages:
gatsby: ^3.3.1 => 3.3.1
gatsby-plugin-image: ^1.2.1 => 1.2.1
gatsby-plugin-material-ui: ^3.0.1 => 3.0.1
gatsby-plugin-react-helmet: ^4.2.0 => 4.2.0
gatsby-plugin-sharp: ^3.2.1 => 3.2.1
gatsby-source-filesystem: ^3.2.0 => 3.2.0
gatsby-transformer-remark: ^4.0.0 => 4.0.0
gatsby-transformer-sharp: ^3.2.0 => 3.2.0
npmGlobalPackages:
gatsby-cli: 3.3.0

[LekoArts]

Hi!

Gatsby has the conventation that you can only place valid React components (that serve as pages) inside src/pages. An exception to this is gatsby-plugin-mdx which will allow you to place MDX files (and MD files if you edit the extensions option) inside src/pages.

So you have two options:
a) use gatsby-plugin-mdx
b) Use the File System Route API (https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api/) to take your MD files and create pages this way.

Option b) would be something like:

src/pages/{MarkdownRemark.title}.js and then you'd get the content from your markdown files for that template.

[freshprinze]

Thank you for the prompt reply @LekoArts. I updated the location of the md files and the setup is now working.
Your help is greatly appreciated.