Confusion about the right way to start develop server and build docz website

[Ayase-252]

Question

I'm a bit confused on how to develop and build a docz website with gatsby. According to document, yarn docz dev or yarn docz build should be used to start a developing server and build production version respectively. Howerver, in example, it seems to use gastby develop and gastby build for development and build respectively.

I tried both methods. If I use yarn docz dev, it ends up a weird webpack error:

Generating development JavaScript bundle failed

unknown: Identifier '_frontmatter' has already been declared (139:13)

  137 | MDXContent.isMDXComponent = true;
  138 | 
> 139 | export const _frontmatter = {};
      |              ^
  140 | 

File: ../docs/index.mdx:139:13

If I use gatsby develop, it do not reflect the configration on doczrc.js. As you can see with config

// doczrc.js
export default {
  gatsbyRemarkPlugins: [
    {
      resolve: "gatsby-remark-vscode",
      // OPTIONAL
      options: {},
    },
  ],
  // it should enable dark mode in default.
  themeConfig: {
    mode: "dark"
  }
}

light mode is still default when open localhost:8000.

There is the demo repository. I'm not certain about where I did wrong. Wrong project configration, wrong commands to use? What is the preferred way to start and build? Thank you.

[adamkudrna]

A few things to note:

• I would use npx docz dev / yarn docz dev as stated in the docs. It wouldn't surprise me if running directly the underlying Gatsby would skip the Docz configuration.

• If you want the dark mode as the default one, it should be done this way:

  themeConfig: {
    initialColorMode: 'dark',
  },
  

• I checked your repository and there is nothing suspicious in your MDX file (except the ~~Japanese~~ Chinese (sorry! 🙏 ) 🙂). Have you tried updating the dependencies? Also, there are some other issues here related to the MDX package used so it might be the cause…