Docusaurus 2.1.0 has another config.

[DraTeots]

Describe the bug

Running

npx create-docusaurus@latest test-code classic --typescript
# or
npx create-docusaurus@latest test-code classic

Creates a website, that has another config strcture, than in examples. While look similar, seems there is no "remarkPlugins" in JS definition. As there is no createConfig() and other changes.

Experiments with importing mdxMermaid and adding to remarkPlugins got errors like:

config

  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          remarkPlugins: [mdxMermaid.default],

errors:

> docusaurus start

[INFO] Starting the development server...
[ERROR] ValidationError: "beforeDefaultRemarkPlugins[0]" must not be a sparse array item
[INFO] Docusaurus version: 2.1.0
Node version: v16.17.1

I also tried to npm instlal mdx-markdown@^2.0.0. but it was not found in npm.

related to #64

[chungkwonryu]

@DraTeots
Hi. I was also tried it, and succeed to adapt sjwall's mdx-mermaid plugin to docusaurus 2.1 (the newest version)

At first, you should write this to the top of the config file.
const mdxMermaid = require('mdx-mermaid');

And then, just add below presets to docs,

docs: {
   ... some codes...
   remarkPlugins: [mdxMermaid],
},

I hope it works for you, too!

[PackElend]

I'm on v2.1.0 and getting the same error when I run npx docusaurus start

this code

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
const mdxMermaid = require('mdx-mermaid');

/** @type {import('@docusaurus/types').Config} */
const config = {
...
  presets: [
    [
      'classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          remarkPlugins: [mdxMermaid.default],
          sidebarPath: require.resolve('./sidebars.js'),
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
        },
        blog: {

throws this error:

> npx docusaurus start
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[INFO] Starting the development server...
[ERROR] ValidationError: "remarkPlugins[0]" must not be a sparse array item

trying instead

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

async function createConfig() {
  const mdxMermaid = await import('mdx-mermaid')

  /** @type {import('@docusaurus/types').Config} */
  ...
    presets: [
      [
        'classic',
        /** @type {import('@docusaurus/preset-classic').Options} */
        ({
          docs: {
            remarkPlugins: [mdxMermaid.default],
            sidebarPath: require.resolve('./sidebars.js'),
            // Please change this to your repo.
            // Remove this to remove the "edit this page" links.
            editUrl:
              'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
          },
          blog: {
	...	  
  };
}  

compiles and shows the diagram as given in the tutorial

so @chungkwonryu, is there anything else you modified to make the following code work?

const mdxMermaid = require('mdx-mermaid');

/** @type {import('@docusaurus/types').Config} */
const config = {

[mathieu-souchet]

I use :

• "@docusaurus/core": "^2.0.0"
• "@mdx-js/react": "^1.6.21"
• "mdx-mermaid": "^1.3.2"

And solution given by @chungkwonryu works for me 😃 (#68 (comment))

Thanks !!!

[PackElend]

And solution given by @chungkwonryu works for me 😃 (#68 (comment))

means you an on docusaurus/core v2.1?
Could you share your config?

[gerasimos]

Hello,

Yesterday I tried a brand new installation of Docusaurus 2.1 along with the current mdx-mermaid plugin.

First, I get the following typescript error, If I try the proposed solution:

Conversion of type '{ docs: { remarkPlugins: ((config?: Config | undefined) => (ast: Parent<Node<Data> | Literal<unknown, Data>, Data>) => Promise<Parent<Node<Data>, Data>>)[]; sidebarPath: string; }; blog: { ...; }; theme: { ...; }; }' to type 'Options' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Types of property 'docs' are incompatible. Type '{ remarkPlugins: ((config?: Config | undefined) => (ast: Parent<Node<Data> | Literal<unknown, Data>, Data>) => Promise<Parent<Node<Data>, Data>>)[]; sidebarPath: string; }' is not comparable to type 'false | Partial<Overwrite<PluginOptions, { numberPrefixParser: boolean | NumberPrefixParser; }, Diff<PluginOptions, { numberPrefixParser: boolean | NumberPrefixParser; }> & Intersection<...>>> | undefined'. Type '{ remarkPlugins: ((config?: Config | undefined) => (ast: Parent<Node<Data> | Literal<unknown, Data>, Data>) => Promise<Parent<Node<Data>, Data>>)[]; sidebarPath: string; }' is not comparable to type 'Partial<Overwrite<PluginOptions, { numberPrefixParser: boolean | NumberPrefixParser; }, Diff<PluginOptions, { numberPrefixParser: boolean | NumberPrefixParser; }> & Intersection<...>>>'. Types of property 'remarkPlugins' are incompatible. Type '((config?: Config | undefined) => (ast: Parent<Node<Data> | Literal<unknown, Data>, Data>) => Promise<Parent<Node<Data>, Data>>)[]' is not comparable to type 'MDXPlugin[]'.

Can you figure out the reason?

[PackElend]

First, I get the following typescript error, If I try the proposed solution:

how do the first lines of the config look like?
I mean these:

[gerasimos]

@PackElend I followed the initial recommendation #68 (comment)

and this is how it looks

[gerasimos]

I also switched to the code proposed on the README.md file of this repo (with the async), but I still get the same typescript error.

[gerasimos]

Seems that a restart of nodeJS made it work, with Docusaurus 2.1 and the code in the README.md. The typescript error is still there though.

[PackElend]

I got it working in 2.1 doing

async function createConfig() {
  const mdxMermaid = await import('mdx-mermaid')

see #68 (comment) but that is not how it is recommended here, that concerns me a bit.

[mathieu-souchet]

And solution given by @chungkwonryu works for me 😃 (#68 (comment))

means you an on docusaurus/core v2.1? Could you share your config?

Nice to see it works for you now

I'm on Docusaurus/core 2.0.0 with a custom config because I use this plugin to generate my site. So my working config (docusaurus.config.js) is like that :

// @ts-check

[...]

const mdxMermaid = require('mdx-mermaid')

/** @type {import('@docusaurus/types').Config} */
const config = {
  [...]
  presets: [
    [
      "docusaurus-preset-openapi",
      /** @type {import('docusaurus-preset-openapi').Options} */
      ({
        docs: {
          sidebarPath: require.resolve("./sidebars.js"),
          editUrl: "MyRepoEditUrl",
          remarkPlugins: [mdxMermaid],
        },
      }),
    ],
  ],
  [...]
};

module.exports = config;

[slorber]

FYI official Docusaurus support is coming with facebook/docusaurus#7490