Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nextjs MUI doesn't work properly

See original GitHub issue

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

create a nextjs app
install markdoc and MUI
add tags with MUI components

Version

@markdoc/next.js@^0.1.8

Additional context

No response

Issue Analytics

State:
Created a year ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

mfix-stripecommented, Oct 28, 2022

Glad you figured it out @champsupertramp!

1reaction

juanvargas-paxcommented, Sep 30, 2022

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

Thank you, now it’s working properly 💯

Top Results From Across the Web

Material-UI 4 example does not work properly with nextjs ...

The issue is present in the latest release (Latest stable). I have searched the issues of this repository and believe that this is...

Material UI is not working properly with Next.js - Stack Overflow

Media query is not working in production ( theme.breakpoints.down("sm") ). export const useButtonStyle = makeStyles(theme ...

Getting started with MUI and Next.js - LogRocket Blog

Configuring MUI and Next.js to work together takes a bit more effort than you may initially think. Learn how to properly start with...

How to use material UI with nextjs and react 18 - Medium

In the first step, you install the material UI and help library packages using the one of package mangar the npm, yarn, and...

Troubleshooting - Material UI - MUI

First, check if you have configured the StyledEngineProvider correctly, ... To check this, run npm ls @material-ui/core (or yarn why @material-ui/core ).