Nextjs MUI doesn't work properly

[juanvargas-pax]

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

[mfix-stripe]

@juanvargas-pax can you try upgrading to @markdoc/next.js@0.1.9 and trying again?

[mfix-stripe]

@WatsonWBlair likewise, could you try upgrading to @markdoc/next.js@0.1.9 and trying again?

[WatsonWBlair]

Updated and its working for me. thanks for the quick attention!

[juanvargas-pax]

@juanvargas-pax can you try upgrading to @markdoc/next.js@0.1.9 and trying again?

Thank you, now it's working properly 💯

[champsupertramp]

Hi @mfix-stripe I tried creating the same files and content with markdoc/next.js version 0.1.10. I got the following error:

error - node_modules/.pnpm/@markdoc+next.js@0.1.10_hqefxpkwllsncs7p2dbwevcuri/node_modules/@markdoc/next.js/src/runtime.js (20:0) @ eval
error - TypeError: Cannot read properties of undefined (reading 'render')
    at eval (webpack-internal:///./node_modules/.pnpm/@markdoc+next.js@0.1.10_hqefxpkwllsncs7p2dbwevcuri/node_modules/@markdoc/next.js/src/runtime.js:20:42)
    at Array.forEach (<anonymous>)
    at transformRecord (webpack-internal:///./node_modules/.pnpm/@markdoc+next.js@0.1.10_hqefxpkwllsncs7p2dbwevcuri/node_modules/@markdoc/next.js/src/runtime.js:15:28)
    at getSchema (webpack-internal:///./node_modules/.pnpm/@markdoc+next.js@0.1.10_hqefxpkwllsncs7p2dbwevcuri/node_modules/@markdoc/next.js/src/runtime.js:37:53)
    at eval (webpack-internal:///./pages/index.md:46:247) {
  page: '/'
}
null

Here's the index.md:

---
title: Welcome
---

{% button %}
Test
{% /button %}

Removing this export { default as mybutton } from './button2.markdoc'; from the /tags/index.js removes the issue.

Inside button2.markdoc:

import { Button } from '../../components/Button';

export const button = {
  render: Button
};

Inside ../../components/Button

import { Button as MuiButton } from '@mui/material';

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

[champsupertramp]

Hi @mfix-stripe I apologize. I've found the issue:

I've changed the following:

export const button = {
  render: Button
};

to

export default {
  render: Button
};

Thanks anyways

[mfix-stripe]

Glad you figured it out @champsupertramp!