The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Could Not Get mdx-js loader To Work

TODO: Pull subtitle into page object

TL;DR: I couldn't get `@mdx-js/loader@next` to work without showing frontmatter. So, I'm moving to `next-mdx-remote`

TL;DR: It's not that hard to get the basic loader running, but it shows the yaml frontmatter. I'm still trying to figure out a way to get around that. I've tried the `compile` but can't figure out how to get it to show back up (I keep getting errors when I try `run` or `runSync`)

I think the way to go is to make a new version of loader that skips the frontmatter at that point.

Another option would be to remove the frontmatter with a pre-processing step (e.g. the one that copies the files from my grimoire into the processing directory). Could also setup at that step to convert the yaml frontmatter into exported variables. That feels a little fraught thouth

This isn't all my notes, just a few things.

code_start_default_section code_end_default_section

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Could Not Get mdx-js loader To Work

-- p

TL;DR: I couldn't get `@mdx-js/loader@next` to work without showing frontmatter. So, I'm moving to `next-mdx-remote`

-- p

TL;DR: It's not that hard to get the basic loader running, but it shows the yaml frontmatter. I'm still trying to figure out a way to get around that. I've tried the `compile` but can't figure out how to get it to show back up (I keep getting errors when I try `run` or `runSync`)

-- p

I think the way to go is to make a new version of loader that skips the frontmatter at that point.

-- p

Another option would be to remove the frontmatter with a pre-processing step (e.g. the one that copies the files from my grimoire into the processing directory). Could also setup at that step to convert the yaml frontmatter into exported variables. That feels a little fraught thouth

-- p

This isn't all my notes, just a few things.

-- code/

npx create-next-app .
npm install @mdx-js/loader@next

-- /code

-- p

Setup `next.config.js` with:

-- code/
-- javascript

module.exports = {
  reactStrictMode: true,
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,
      use: '@mdx-js/loader',
    })
    return config
  },
}

-- /code

-- p

@mdx-js/loader@next works, but it doesn't deal with frontmatter.

-- p

Did:

-- code/

npm i @mdx-js/mdx@next

-- /code

-- p

and remove the webpack loader from next.config.js

-- p

also did

-- code/

npm install remark-frontmatter

-- /code

-- p

add the webpack stuff back in

-- p

This is the state of the file now, trying to do the import dynamically of the file that gets created, but that seems to only be able to be done async and the main component can't be async so it can't wait.

-- code/
-- javascript

import fs from 'fs'
import Document from '../index-content.mdx'
import matter from 'gray-matter'

// let Document2 = null

export async function loadDocument2() {
  try {
    const Document2 = await import('../index-content.mdx')
    console.log(Document2)
  } catch (err) {
    console.error('import failed')
  }
}

export default function Home() {
  async function loadModule() {}

  // // loadDocument2()
  // return `${import('../index-content.mdx').then((obj) => {
  //   return obj
  // })}`

  console.log('here3')
  return <div>here</div>
  // return <Document2 />
}

export async function getStaticProps() {
  const fileContents = fs.readFileSync('./index.mdx')
  const { content, data } = matter(fileContents)
  fs.writeFileSync('./index-content.mdx', content)

  try {
    var Document2 = await import('../index-content.mdx')
    return {
      props: {
        // doc: Document2,
      },
    }
  } catch (err) {
    console.error('import failed')
  }

  return {
    props: {},
  }
}

-- /code


-- categories
-- Next.js

-- metadata
-- date: 2021-11-21 18:55:50
-- id: 21fzm1jj
-- status: scratch
-- type: post
-- SCRUBBED_NEO: false
-- site: aws