Syntax template fails to run when using `pnpm`

[oscartbeaumont]

• URL for template: https://tailwindui.com/templates/syntax
• Template name: Syntax

Describe the bug I download the template and then go pnpm install && pnpm dev. When I open the page in the browser I get the following error.

Error message

ready - started server on 0.0.0.0:3005, url: http://localhost:3005
warn  - You have enabled experimental features (newNextLinkBehavior, scrollRestoration) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

info  - automatically enabled Fast Refresh for 1 custom loader
event - compiled client and server successfully in 393 ms (447 modules)
wait  - compiling / (client and server)...
Invalid attribute: 'frontmatter'
Undefined tag: 'quick-links'
Undefined tag: 'quick-link'
Undefined tag: 'quick-link'
Undefined tag: 'quick-link'
Undefined tag: 'quick-link'
Invalid attribute: 'content'
Undefined tag: 'callout'
Invalid attribute: 'content'
Undefined tag: 'callout'
Error: Undefined tag: 'quick-links'
{% quick-links %}

Undefined tag: 'quick-link'
{% quick-link title="Installation" icon="installation" href="/" description="Step-by-step guides to setting up your system and installing the library." /%}

Undefined tag: 'quick-link'
{% quick-link title="Architecture guide" icon="presets" href="/" description="Learn how the internals work and contribute." /%}

Undefined tag: 'quick-link'
{% quick-link title="Plugins" icon="plugins" href="/" description="Extend the library with third-party plugins or write your own." /%}

Undefined tag: 'quick-link'
{% quick-link title="API reference" icon="theming" href="/" description="Learn to easily customize and modify your app's visual design to fit your brand." /%}

Undefined tag: 'callout'
{% callout type="warning" title="Oh no! Something bad happened!" %}

Undefined tag: 'callout'
{% callout title="You should know!" %}

    at Object.load (/Users/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/@[email protected]_ikrbaone44a3r7mpkljmq3ttvu/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/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/@[email protected]_ikrbaone44a3r7mpkljmq3ttvu/node_modules/@markdoc/next.js/src/loader.js:297:20)
error - ./src/pages/index.md
Error: Undefined tag: 'quick-links'
{% quick-links %}

Undefined tag: 'quick-link'
{% quick-link title="Installation" icon="installation" href="/" description="Step-by-step guides to setting up your system and installing the library." /%}

Undefined tag: 'quick-link'
{% quick-link title="Architecture guide" icon="presets" href="/" description="Learn how the internals work and contribute." /%}

Undefined tag: 'quick-link'
{% quick-link title="Plugins" icon="plugins" href="/" description="Extend the library with third-party plugins or write your own." /%}

Undefined tag: 'quick-link'
{% quick-link title="API reference" icon="theming" href="/" description="Learn to easily customize and modify your app's visual design to fit your brand." /%}

Undefined tag: 'callout'
{% callout type="warning" title="Oh no! Something bad happened!" %}

Undefined tag: 'callout'
{% callout title="You should know!" %}
error - TypeError: document.addEventListener is not a function
    at applyFocusVisiblePolyfill (/Users/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/[email protected]/node_modules/focus-visible/dist/focus-visible.js:251:14)
    at /Users/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/[email protected]/node_modules/focus-visible/dist/focus-visible.js:309:5
    at /Users/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/[email protected]/node_modules/focus-visible/dist/focus-visible.js:2:66
    at Object.<anonymous> (/Users/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/[email protected]/node_modules/focus-visible/dist/focus-visible.js:5:2)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18) {
  page: '/'
}
info  - automatically enabled Fast Refresh for 1 custom loader
wait  - compiling /_error (client and server)...
Invalid attribute: 'frontmatter'
Undefined tag: 'quick-links'
Undefined tag: 'quick-link'
Undefined tag: 'quick-link'
Undefined tag: 'quick-link'
Undefined tag: 'quick-link'
Invalid attribute: 'content'
Undefined tag: 'callout'
Invalid attribute: 'content'
Undefined tag: 'callout'
Error: Undefined tag: 'quick-links'
{% quick-links %}

Undefined tag: 'quick-link'
{% quick-link title="Installation" icon="installation" href="/" description="Step-by-step guides to setting up your system and installing the library." /%}

Undefined tag: 'quick-link'
{% quick-link title="Architecture guide" icon="presets" href="/" description="Learn how the internals work and contribute." /%}

Undefined tag: 'quick-link'
{% quick-link title="Plugins" icon="plugins" href="/" description="Extend the library with third-party plugins or write your own." /%}

Undefined tag: 'quick-link'
{% quick-link title="API reference" icon="theming" href="/" description="Learn to easily customize and modify your app's visual design to fit your brand." /%}

Undefined tag: 'callout'
{% callout type="warning" title="Oh no! Something bad happened!" %}

Undefined tag: 'callout'
{% callout title="You should know!" %}

    at Object.load (/Users/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/@[email protected]_ikrbaone44a3r7mpkljmq3ttvu/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/oscar/Downloads/tailwindui-syntax/node_modules/.pnpm/@[email protected]_ikrbaone44a3r7mpkljmq3ttvu/node_modules/@markdoc/next.js/src/loader.js:297:20)
error - ./src/pages/index.md
Error: Undefined tag: 'quick-links'
{% quick-links %}

Undefined tag: 'quick-link'
{% quick-link title="Installation" icon="installation" href="/" description="Step-by-step guides to setting up your system and installing the library." /%}

Undefined tag: 'quick-link'
{% quick-link title="Architecture guide" icon="presets" href="/" description="Learn how the internals work and contribute." /%}

Undefined tag: 'quick-link'
{% quick-link title="Plugins" icon="plugins" href="/" description="Extend the library with third-party plugins or write your own." /%}

Undefined tag: 'quick-link'
{% quick-link title="API reference" icon="theming" href="/" description="Learn to easily customize and modify your app's visual design to fit your brand." /%}

Undefined tag: 'callout'
{% callout type="warning" title="Oh no! Something bad happened!" %}

Undefined tag: 'callout'
{% callout title="You should know!" %}

Expected behavior The template to compile and run successfully.

Browser/Device (if applicable)

• OS: macOS 12.5.1
• Browser: Chrome 105.0.5195.125

node -v # v18.6.0
pnpm -v # 7.5.2

[adamwathan]

Hey thanks for reporting! I can reproduce this when using pnpm instead of npm to install the dependencies and run the dev script. Will try to take a look at this this week and see if there's any reason we can't make it work with both package managers.

In the mean time though you should have no issues if you use npm instead 👍

[thecrypticace]

I believe this is a problem with later versions of Markdoc's Next.js package. As a temporary solution you can pin to 0.1.6 in your package.json, run pnpm install, and it should work:

"@markdoc/next.js": "0.1.6",

[reinink]

Hey @oscartbeaumont!

I just gave this another try, and the issue appears to be resolved now — at least on my system 😅

I am using [email protected], [email protected], @markdoc/[email protected] and @markdoc/[email protected].

Going to close this one, as I'm pretty confident that this has been resolved, but if anyone bumps into this again, please report back here 👍