karolis-sh / gatsby-mdx

Utilities to work with MDX and netlify-cms in Gatsby sites
MIT License
60 stars 9 forks source link

process.cwd is not a function error for netlify-cms-widget-mdx #71

Closed white3km closed 1 year ago

white3km commented 1 year ago

Hello, I'm using netlify-cms-app (^2.15.72) with netlify-cms-widget-mdx (0.5.0). When I try to use the Markdown Editor the Preview Panel displays "Invalid MDX: TypeError: process.cwd is not a function" and the console message below. image

netlifycms.config.ts

 {
      name: 'docs_mdx',
      label: 'Docs (MDX)',
      label_singular: 'MDX Doc',
      folder: 'docs',
      identifier_field: 'title',
      // editor: {
      //   preview: false,
      // },
      extension: 'mdx',
      create: true,
      format: 'frontmatter',
      fields: [
        {
          name: 'title',
          label: 'Title',
          widget: 'string',
        },
        // @ts-ignore
        {
          name: 'body',
          label: 'Body',
          widget: 'mdx',
        },
]}

index.tsx

import CMS from 'netlify-cms-app'
// @ts-ignore
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx'
import { DocPreview } from './components/DocPreview'
import { config } from './netlifycms.config'

const isDev = process.env.NODE_ENV === 'development'

if (isDev) {
  config.backend.name = 'test-repo'
}

// Initialize the CMS object
CMS.init({ config })

// Load content preview css
CMS.registerPreviewStyle('css/theme.css')
CMS.registerPreviewStyle('css/preview.css')

// Register the preview template for the `docs` collection
CMS.registerPreviewTemplate('docs', DocPreview)

CMS.registerWidget('mdx', MdxControl, MdxPreview)

Am I missing something with my configuration?

karolis-sh commented 1 year ago

Hey Ken, your setup should be fine. It's not really about the Netlify setup per se, it's about the webpack config of the admin panel (Gatsby web app and admin app are like 2 separate apps). Your code or some package you're using in your code, is using node style code that's not being properly handled for web use case (some webpack plugin for env variables is missing). Previously, you couldn't adjust the Netflify CMS webpack config, but it seems later versions could handle that. I suggest looking at https://github.com/gatsbyjs/gatsby/issues/10326 for more hints.