What happened?

When running a new NextJS app on a Windows machine running Node v14.19.3 using the markdoc example, the app fails to load, throwing a failed to compile error:

After some tinkering - I found that by removing the tags, the app / page would finally render.

To reproduce

• run npx create-next-app --example https://github.com/markdoc/markdoc-starter
• run npm run dev
• App will fail to load and show the error above.

Version

0.1.2

Additional context

I tried setting up the project on a M1 Mac running node v16.13.0 and the app was able to compile and render. So I'm wondering if this is related to the OS or possibly the node version.

What happened?

@benguz and I need set up a markdoc site for a nonprofit.

We are getting this cryptic error, and the error message text cuts off strangely:

C:UsersenjaOneDriveDocumentsGitHub eactjs.orgeta ode_modules@markdoc ext.jssrc untime.js is not handled by plugins (Unhandled scheme). Webpack supports "data:" and "file:" URIs by default. You may need an additional plugin to handle "c:" URIs.

To reproduce

@benguz followed the quick start docs.

Version

Latest

Additional context

Deploying on GitHub pages.

What happened?

Whenever I run npm run dev and leave the page untouched in the browser and editor for about a minute, hot reloading doesn't have an effect anymore. The Next.js reload indicator in the lower right corner still shows up but the page does not update when I change something in my sources. Refreshing the page or performing any sort of page navigation (without a full reload) fixes hot reloading until it breaks again after one minute.

To reproduce

1. Clone the Next.js starter project and install dependencies using npm install
2. Start npm run dev
3. Load the page in a browser
4. Wait for one minute
5. Change something in a page file
6. The Next.js reloading indicator shows up but the page is not updated

Version

0.1.4

Additional context

The exact commit of the starter repository used is cf36368f405a41499aded8b61b136c0bda44c0e3.

This problem doesn't occur with a Next.js starter project without Markdoc, so it doesn't seem to be a Next.js issue.

I'm also not seeing any errors or warnings in the browser console or network tab.

Currently there's no way to inject markdown-it plugins down to the tokenizer, so we can't just pass markdown-it-footnotes here, but I can't see any facility for supporting Footnote syntax (which are common in GFM). Any current workarounds?

What happened?

I clone markdoc's Next.js starter demo, randomly add 97 markdom files to pages/docs/ folder, then run npm run build, and Next.js will stuck on info - Creating an optimized production build ... forever.

To reproduce

1. git clone https://github.com/markdoc/markdoc-starter
2. Add random markdown files to pages/docs/ folder like below:

const fs = require("fs");
for (let i = 0; i < 98; i++) {
  fs.writeFileSync(`./pages/docs/${i}.md`, `##${i}`);
}

3. npm run build
4. It will stuck on info - Creating an optimized production build ... forever.
5. Delete one markdown file from pages/docs/, and it will build successfully.
6. And then, without deleting .next folder, add some more markdown files to pages/docs/, will build successfully. But if you delete .next before adding more files, it will hang forever.

I try to refactor my blog using markdoc, then found this issue. Had tried several next versions and markdoc versions, no luck. I think it's more likely markdoc related? Looking for help, thanks!

Version

try latest and older versions

Additional context

No response

What happened?

Nextjs and markdoc works fine but there is an issue when tried to use @MUI components in the tags

// Button.tsx
import { Button as MuiButton } from "@mui/material";

export const Button = (props) => <MuiButton {...props} variant="contained" />;

// markdoc/tags/index.tsx
import { Button } from "../../components/Button";

export const button = {
  render: Button
};

// pages/docs/index.md
---
title: Get started with Markdoc
description: How to get started with Markdoc
---

# Get started with Markdoc

- test markdoc
{% button %}custom button{% /button %}

• package.json

{
  "name": "nextjs-markdoc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@markdoc/next.js": "^0.1.8",
    "@mui/material": "^5.10.7",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.24.0",
    "eslint-config-next": "12.3.1"
  }
}

I got this error

wait  - compiling /docs (client and server)...
Undefined tag: 'button'
Error: Undefined tag: 'button'
- test markdoc
{% button %}custom button{% /button %}

    at Object.load (/Users/my-user/Documents/projects/nextjs-markdoc/node_modules/@markdoc/next.js/src/loader.js:150:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.loader (/Users/my-user/Documents/projects/nextjs-markdoc/node_modules/@markdoc/next.js/src/loader.js:297:20)
error - ./pages/docs/index.md
Error: Undefined tag: 'button'
- test markdoc
{% button %}custom button{% /button %}
error - TypeError: document.querySelectorAll is not a function
    at createCache (/Users/my-user/Documents/projects/nextjs-markdoc/node_modules/@emotion/cache/dist/emotion-cache.cjs.dev.js:267:30)
    at Object.<anonymous> (/Users/my-user/Documents/projects/nextjs-markdoc/node_modules/@mui/styled-engine/node/StyledEngineProvider/StyledEngineProvider.js:26:34)
    at Module._compile (node:internal/modules/cjs/loader:1112:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1166:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)
    at Module._load (node:internal/modules/cjs/loader:834:12)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/my-user/Documents/projects/nextjs-markdoc/node_modules/@mui/styled-engine/node/StyledEngineProvider/index.js:15:52)
    at Module._compile (node:internal/modules/cjs/loader:1112:14) {
  page: '/docs'

To reproduce

1. create a nextjs app
2. install markdoc and MUI
3. add tags with MUI components

Version

@markdoc/next.js@^0.1.8

Additional context

No response

What happened?

Following the docs on nodes and next js nodes is confusing.

Goal: replace the default heading node as the nodes doc demonstrates.

Following the examples in the nodes seems to lead to either the render function being called with no props other than children, or only the transform step being called and not the render step.

Suggestion

Provide more details on the way the nextjs integration interacts with the described transform and render steps, and provide more complete examples for nextjs.

To reproduce

1. Create a markdoc file with a h1, h2, h3.
2. Try this basic example (as implied by the combination of nextjs and non-nextjs docs)

import { Title } from '../title';
import { Tag } from '@markdoc/markdoc';


const TitleWrapper = ({ level, id, children }) => {
    console.log('Wrapper called')
    return (
        <Title level={level} id={id}>{children}</Title>
    )
}

export const heading = {
    render: TitleWrapper,
    children: ['inline'],
    attibutes: {
        id: { type: String },
        level: {type: Number, required: true, default: 1}
    }
}

3. This does render the component however it is never passed any value for level other than the default.

4. Attempt #2 Try the following

import { Title } from '../title';
import { Tag } from '@markdoc/markdoc';

const TitleWrapper = ({ level, id, children }) => {
    console.log('wrapper')
    const order = Math.min((level || 1) +1, 6) as TitleOrder;
    return (
    
        <Title order={order} id={id}>{children}</Title>
    )
}


function generateID(children, attributes) {
 //... skipped for brevity as not relevant
}

export const heading = {
    render: TitleWrapper,
    children: ['inline'],
    attibutes: {
        id: { type: String },
        level: {type: Number, required: true, default: 1}
    },
    transform(node, config) {
        const attributes = node.transformAttributes(config);
        const children = node.transformChildren(config);

        const id = generateID(children, attributes);

        return new Tag(
        `h${node.attributes['level']}`,
        { ...attributes, id },
        children
        );
  }
}

This does allow for multi-level headings however the render function is never called (no log lines printed or component rendered).

Version

@markdoc/markdoc": 0.1.2, @markdoc/next.js: 0.1.4

Additional context

No response

What happened?

Importing @markdoc/markdoc in a fresh TypeScript projects shows multiple errors:

node_modules/@markdoc/markdoc/dist/index.d.ts:15:24 - error TS2307: Cannot find module 'markdown-it/lib/token' or its corresponding type declarations.                                                     
                                                                                                                                                                                                           
15 import type Token from 'markdown-it/lib/token';                                                                                                                                                         
                          ~~~~~~~~~~~~~~~~~~~~~~~                                                                                                                                                          
                                                                                                                                                                                                           
node_modules/@markdoc/markdoc/dist/index.d.ts:98:35 - error TS2552: Cannot find name 'Generator'. Did you mean 'Enumerator'?                                                                               
                                                                                                                                                                                                           
98         getAstValues(value: any): Generator<import("./src/types").AstType, void, unknown>;                                                                                                              
                                     ~~~~~~~~~                                                                                                                                                             
                                                                                                                                                                                                           
  node_modules/typescript/lib/lib.scripthost.d.ts:271:13                                                                                                                                                   
    271 declare var Enumerator: EnumeratorConstructor;                                                                                                                                                     
                    ~~~~~~~~~~                                                                                                                                                                             
    'Enumerator' is declared here.                                                                                                                                                                         
                                                                                                                                                                                                           
node_modules/@markdoc/markdoc/dist/src/ast/index.d.ts:11:31 - error TS2552: Cannot find name 'Generator'. Did you mean 'Enumerator'?                                                                       
                                                                                                                                                                                                           
11     getAstValues(value: any): Generator<AstType, void, unknown>;                                                                                                                                        
                                 ~~~~~~~~~                                                                                                                                                                 
                                                                                                                                                                                                           
  node_modules/typescript/lib/lib.scripthost.d.ts:271:13                                                                                                                                                   
    271 declare var Enumerator: EnumeratorConstructor;                                                                                                                                                     
                    ~~~~~~~~~~                                                                                                                                                                             
    'Enumerator' is declared here.                                                                                                                                                                         
                                                                                                                                                                                                           
node_modules/@markdoc/markdoc/dist/src/ast/node.d.ts:14:13 - error TS2552: Cannot find name 'Generator'. Did you mean 'Enumerator'?                                                                        
                                                                                                                                                                                                           
14     walk(): Generator<Node, void, unknown>;                                                                                                                                                             
               ~~~~~~~~~                                                                                                                                                                                   
                                                                                                                                                                                                           
  node_modules/typescript/lib/lib.scripthost.d.ts:271:13                                                                                                                                                   
    271 declare var Enumerator: EnumeratorConstructor;                                                                                                                                                     
                    ~~~~~~~~~~                                                                                                                                                                             
    'Enumerator' is declared here.                                                                                                                                                                         
                                                                                                                                                                                                           
node_modules/@markdoc/markdoc/dist/src/renderers/react/react.d.ts:1:57 - error TS2307: Cannot find module 'react' or its corresponding type declarations.                                                  
                                                                                                                                                                                                           
1 import type { createElement, Fragment, ReactNode } from 'react';                                                                                                                                         
                                                          ~~~~~~~                                                                                                                                          
                                                                                                                                                                                                           
node_modules/@markdoc/markdoc/dist/src/tokenizer/index.d.ts:1:24 - error TS2307: Cannot find module 'markdown-it/lib' or its corresponding type declarations.                                              
                                                                                                                                                                                                           
1 import MarkdownIt from 'markdown-it/lib';                                                                                                                                                                
                         ~~~~~~~~~~~~~~~~~                                                                                                                                                                 
                                                                                                                                                                                                           
node_modules/@markdoc/markdoc/dist/src/tokenizer/index.d.ts:2:24 - error TS2307: Cannot find module 'markdown-it/lib/token' or its corresponding type declarations.                                        
                                                                                                                                                                                                           
2 import type Token from 'markdown-it/lib/token';                                                                                                                                                          
                         ~~~~~~~~~~~~~~~~~~~~~~~                                                                                                                                                           
                                                                                                                                                                                                           
node_modules/@markdoc/markdoc/dist/src/utils.d.ts:1:24 - error TS2307: Cannot find module 'markdown-it/lib/token' or its corresponding type declarations.                                                  
                                                                                                     
1 import type Token from 'markdown-it/lib/token';                                                    
                         ~~~~~~~~~~~~~~~~~~~~~~~                                                     

Some of these errors are due to missing dependencies @types/react and @types/markdown-it

To reproduce

1. Download or clone https://gist.github.com/alunny-stripe/ed7e03f7a6fd712a8ea93eee36af8dbb
2. Run npm install
3. Run npm run types

Version

0.1.7

Additional context

I ran into slightly different errors on my project, which is using TypeScript 4.5.4 and pnpm. Here are the [email protected] errors:

node_modules/@markdoc/markdoc/dist/index.d.ts:15:24 - error TS2307: Cannot find module 'markdown-it/lib/token' or its corresponding type declarations.                                                     

15 import type Token from 'markdown-it/lib/token';
                          ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@markdoc/markdoc/dist/index.d.ts:98:35 - error TS2552: Cannot find name 'Generator'. Did you mean 'Enumerator'?

98         getAstValues(value: any): Generator<import("./src/types").AstType, void, unknown>;
                                     ~~~~~~~~~

  node_modules/typescript/lib/lib.scripthost.d.ts:271:13
    271 declare var Enumerator: EnumeratorConstructor;
                    ~~~~~~~~~~
    'Enumerator' is declared here.

node_modules/@markdoc/markdoc/dist/index.d.ts:111:48 - error TS2694: Namespace '"/Users/alunny/dev/markdoc-ts/node_modules/@markdoc/markdoc/dist/src/types"' has no exported member 'Variable'.

111         Variable: typeof import("./src/types").Variable;
                                                   ~~~~~~~~

node_modules/@markdoc/markdoc/dist/src/ast/index.d.ts:11:31 - error TS2552: Cannot find name 'Generator'. Did you mean 'Enumerator'?

11     getAstValues(value: any): Generator<AstType, void, unknown>;
                                 ~~~~~~~~~

  node_modules/typescript/lib/lib.scripthost.d.ts:271:13
    271 declare var Enumerator: EnumeratorConstructor;
                    ~~~~~~~~~~
    'Enumerator' is declared here.

node_modules/@markdoc/markdoc/dist/src/ast/node.d.ts:14:13 - error TS2552: Cannot find name 'Generator'. Did you mean 'Enumerator'?

14     walk(): Generator<Node, void, unknown>;
               ~~~~~~~~~

  node_modules/typescript/lib/lib.scripthost.d.ts:271:13
    271 declare var Enumerator: EnumeratorConstructor;
                    ~~~~~~~~~~
    'Enumerator' is declared here.

node_modules/@markdoc/markdoc/dist/src/renderers/react/react.d.ts:1:57 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import type { createElement, Fragment, ReactNode } from 'react';
                                                          ~~~~~~~

node_modules/@markdoc/markdoc/dist/src/tokenizer/index.d.ts:1:24 - error TS2307: Cannot find module 'markdown-it/lib' or its corresponding type declarations.

1 import MarkdownIt from 'markdown-it/lib';
                         ~~~~~~~~~~~~~~~~~

node_modules/@markdoc/markdoc/dist/src/tokenizer/index.d.ts:2:24 - error TS2307: Cannot find module 'markdown-it/lib/token' or its corresponding type declarations.

2 import type Token from 'markdown-it/lib/token';
                         ~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@markdoc/markdoc/dist/src/utils.d.ts:1:24 - error TS2307: Cannot find module 'markdown-it/lib/token' or its corresponding type declarations.

1 import type Token from 'markdown-it/lib/token';

I need to write a script that modifies Markdoc files. Specifically, it will add an id attribute to nodes that do not yet have one. For example, given the file:

# Debugging

# Running {% #running %}

I want to modify the file to:

# Debugging {% #d3adb33f %}

# Running {% #running %}

(Where d3adb33f is some fresh identifier, e.g. a UUID.)

I want to do this transform with a pipeline like

input --[Markdoc.parse]--> AST -> --[custom logic]--> AST --[Markdown.stringify]--> output

However, I don't see a Markdoc.stringify, or a Node.toString, or a Markdoc renderer, or anything like that.

Has anyone written a Markdown.stringify or similar? Or could you recommend some other way to achieve my goals?

What happened?

Markdown automatically wraps a <p> around the whole image component. This results in a Hydration mismatch

Hydration failed because the initial UI does not match what was rendered on the server.

`Expected server HTML to contain a matching <div> in <p>` because I need a `div` in my component to make it work with `next/image`.

import * as React from 'react'
import NextImage from 'next/image'

export function Image({ src, alt }: { src: string; alt: string }) {
  return (
    <div style={{ position: 'relative', width: '300px', height: '500px' }}>
      <NextImage
        src={src}
        alt={alt}
        layout="fill"
        objectFit="contain"
        className="rounded object-cover shadow"
      />
    </div>
  )
}

To reproduce

See above.

Version

No response

Additional context

No response

What happened?

Fast Refresh does not work when using the Next.js plugin. You can reproduce it on your own docs.

To reproduce

1. Checkout https://github.com/markdoc/docs
2. Start npm run dev
3. Go to http://localhost:3002/docs/getting-started
4. Edit text in pages/docs/getting-started.md
5. No effect unless you reload the page.

Version

0.1.3

Additional context

@markdoc/next.js": "^0.1.4"

What happened?

When using a custom Fence node with a definition of:

{
 ...
 fence: {
    render: 'Fence',
    attributes: {
      language: { type: String },
      process: { type: Boolean, render: false, default: true },
    }
  },
  ...
}

And a (simplified) component being passed like:

  const r = Markdoc.renderers.react(markdoc.content, React, {
    components: (name) => {
      return componentLibrary[name]
    },
  })

Where component library has a component like:

export const componentLibrary = {
  ...
  Fence: Fence,
  ...

Can result an AST representation like:

{
  "$$mdtype": "Node",
  "errors": [], 
  "lines": [
    21, 
    35  
  ],  
  "inline": false,
  "attributes": {
    "content": "int main() {...}\n",
    "language": "cpp"
  },  
  "children": [
    {   
      "$$mdtype": "Node",
      "errors": [], 
      "lines": [default
        21, 
        35  
      ],  
      "inline": true,
      "attributes": {
        "content": "int main() {...}\n"
      },
      "children": [], 
      "type": "text",
      "annotations": [], 
      "location": {
        "file": "4 - Connect/2 - Clients & Tools/3 - Client - C++.md",
        "start": {
          "line": 21
        },  
        "end": {
          "line": 35
        }   
      }   
    }   
  ],  
  "type": "fence",
  "annotations": [], 
  "location": {
    "file": "4 - Connect/2 - Clients & Tools/3 - Client - C++.md",
    "start": {
      "line": 21
    },  
    "end": {
      "line": 35
    }   
  }
}

And an output node of

{
  "$$mdtype": "Tag",
  "attributes": {
    "language": "cpp"
  },  
  "children": [
    "int main() {...}\n"
  ]
}

This results in an error in an error:

Error occurred prerendering page "/docs/connect-cpp". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I have traced this down to https://github.com/markdoc/markdoc/blob/main/src/renderers/react/react.ts#L53

Where the name property is undefined, which results in us being unable to resolve to the proper component.

I have been unable to see where this happens.

If I take the default transform function for fence node and add it to my fence defintion, this fixes the error (but breaks the rendering of my component)

To reproduce

I don't have a minimal reproduce yet....

Version

0.2.1

Additional context

This is using a custom integration, but it is a pretty straight forward in it's usage of transforms and react

I've been trying out markdoc and I noticed that when I write an image node, it will get wrapped in a <p>, which can be a bit problematic when trying to customise it.

Is there any way to disable this automatic wrapping of certain nodes? I can't immediately find anything about this in the documentation.

One workaround seems to be to use tags instead, but I would like to avoid this as much as possible as I want to write regular markdown as much as possible. Especially for the basic stuff like images and headers I don't want to have to create a custom tag.

What happened?

When using {% colspan=2 %} or {% rowspan=2 %} this warning or equivalent is logged serverside.

To reproduce

{% table %}

- 1
- 2
- 3

---

- 1
- 2 & 3 {% colspan=2 %}

---

- 1
- 2 & 3 {% colspan=2 %}

{% /table %}

Version

0.2.1

Additional context

@markdoc/next.js

What happened?

After adding markdoc to my typescript project, running yarn run build gives me this error:

./node_modules/@markdoc/markdoc/src/utils.ts:134:3
Type error: Type '({ type: string; start: number; end: number; content: string; } | { type: string; tag: string; attrs: [string, string][] | null; map: [number, number] | null; nesting: 0 | 1 | -1; level: number; ... 9 more ...; end: number; } | { ...; })[]' is not assignable to type 'Token[]'.
  Type '{ type: string; start: number; end: number; content: string; } | { type: string; tag: string; attrs: [string, string][] | null; map: [number, number] | null; nesting: 0 | 1 | -1; level: number; ... 9 more ...; end: number; } | { ...; }' is not assignable to type 'Token'.
    Type '{ type: string; start: number; end: number; content: string; }' is missing the following properties from type 'Token': tag, attrs, map, nesting, and 12 more.

  132 |   });
  133 |
> 134 |   return output;
      |   ^
  135 | }
  136 |

To reproduce

1. Add markdoc to a new next.js project using Typescript
2. run yarn run build

Version

No response

Additional context

No response

• [ ] Run typedoc index.ts --includeVersion --readme none --excludePrivate --excludeExternals --excludeInternal --sort source-order --out types against latest ./node_modules/@markdoc/markdoc/index.ts
• [ ] Add Next.js write from /types -> /types/index.html

Run Markdoc.validate at build time: https://markdoc.dev/docs/validation

• [ ] Ensure it works with https://github.com/markdoc/markdoc/issues/250
• [ ] Support validation without needing __webpack_require__ hacks