Docz: v2: Pages crash with Material-UI installed

[chrissantamaria]

Bug Report

Describe the bug

When creating a new project with Material-UI installed, pages crash on load when running the dev server. Omitting Material-UI causes docz to work as expected. This occurs even with the MDX file below where Material-UI is not imported.

Downgrading to docz 1.2.0 (and installing docz-theme-default) causes the page to load as expected.

To Reproduce

(reproduction repo available here)

1. Create the following files:

package.json:

{
  "name": "docz-v2-mui-bug",
  "version": "1.0.0",
  "scripts": {
    "dev": "docz dev",
    "build": "docz build"
  },
  "dependencies": {
    "@material-ui/core": "^4.2.1",
    "docz": "^2.0.0-rc.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

home.mdx:

---
name: Hello world
route: /
---

# Hello world

Hello, I'm a mdx file!

1. Install dependencies (I'm running yarn)
2. Run the dev server (I'm running yarn run dev)
3. Wait for docz to download dependencies and start the dev server

In the docz console, no errors are reported, but the following error is displayed in the browser console and rendered on the page:

Uncaught TypeError: e is not a function
    at ./node_modules/compass-vertical-rhythm/dist/index.js.module.exports (index.js:1)
    at toTheme (index.esm.js:239)
    at Module.<anonymous> (index.js:1)
    at Module../node_modules/gatsby-theme-docz/src/theme/index.js (index.js:1)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Module.<anonymous> (index.js:1)
    at Module../node_modules/gatsby-theme-docz/src/index.js (index.js:1)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Module.<anonymous> (Layout.js:1)
    at Module../node_modules/gatsby-theme-docz/src/base/Layout.js (Layout.js:1)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Module.<anonymous> (bootstrap:790)
    at Module.../home.mdx (home.mdx:18)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Object.<anonymous> (sync-requires.js:4)
    at Object../.cache/sync-requires.js (sync-requires.js:4)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Module.<anonymous> (app.js:1)
    at Module../.cache/app.js (app.js:38)
    at __webpack_require__ (bootstrap:723)
    at fn (bootstrap:100)
    at Object.0 (404.js:1)
    at __webpack_require__ (bootstrap:723)
    at bootstrap:790
    at bootstrap:790
index.js:2177 hot update failed for module "./.cache/sync-requires.js". Last file processed: "./node_modules/gatsby-theme-docz/src/theme/index.js".

Expected behavior

The server starts and displays the home page without any errors.

Environment

• OS: Windows 10
• Node/npm version: 12.4.0
• Yarn version: 1.16.0

[farhantahir]

Any update on this one guys ?

I'm also facing an issue here.

[pigmanbear]

This is a result of a collision between gatsby-plugin-theme-ui and material-ui. If you create a src/gatsby-theme-docz/theme/index.js file and then remove typography, e.g. something like
(which is just moving prism, modes, etc into the shadowing folder), I was able to get it running:

import { mergeDeepRight } from "ramda"
import * as modes from "./modes"
import prism from './prism'

export default mergeDeepRight(baseTheme, {
  colors: {
    ...modes.light,
    modes: {
      dark: modes.dark,
    },
  },
})






const baseTheme = {
  prism,
  initialColorMode: 'light',
  colors: {
    ...modes.light,
    modes: {
      dark: modes.dark,
    },
  },
  fonts: {
    monospace: 'Inconsolata',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  letterSpacings: {
    body: 'normal',
    caps: '0.2em',
  },
  space: [0, 4, 8, 16, 32, 48, 64, 80, 100],
  radii: {
    square: 0,
    radius: 4,
    rounded: 10,
  },
  styles: {
    Container: {
      p: 4,
      maxWidth: 1280,
    },
    root: {
      fontSize: 3,
      color: 'text',
      bg: 'background',
    },
    a: {
      color: 'primary',
      textDecoration: 'none',
      '&:hover': {
        color: 'secondary',
        textDecoration: 'underline',
      },
    },
    h1: {
      fontSize: 6,
    },
    h2: {
      fontSize: 5,
    },
    h3: {
      fontSize: 4,
    },
    h4: {
      fontSize: 3,
    },
    h5: {
      fontSize: 2,
    },
    h6: {
      fontSize: 1,
    },
    li: {
      marginBottom: 1,
    },
    blockquote: {
      my: 4,
      mx: 0,
      py: 3,
      px: 4,
      bg: 'blockquote.bg',
      borderLeft: t => `5px solid ${t.colors.blockquote.boder}`,
      color: 'blockquote.color',
      fontStyle: 'italic',
      '> p': {
        m: 0,
      },
    },
    code: {
      fontFamily: 'monospace',
    },
    inlineCode: {
      fontFamily: 'monospace',
    },
    pre: {
      my: 4,
      p: 3,
      variant: 'prism',
      textAlign: 'left',
      fontFamily: 'monospace',
      borderRadius: 'radius',
    },
    table: {
      width: '100%',
      my: 4,
      borderCollapse: 'separate',
      borderSpacing: 0,
      [['th', 'td']]: {
        textAlign: 'left',
        py: '4px',
        pr: '4px',
        pl: 0,
        borderColor: 'muted',
        borderBottomStyle: 'solid',
      },
    },
    th: {
      verticalAlign: 'bottom',
      borderBottomWidth: '2px',
    },
    td: {
      verticalAlign: 'top',
      borderBottomWidth: '1px',
    },
    hr: {
      border: 0,
      borderBottom: t => `1px solid ${t.colors.border}`,
    },
  },
}

Also, I added the gatsby-plugin-material-ui and set the option for injectFirst to true, the gatsby-theme-material-ui would probably also work, but haven't done much beyond removing typography in docz theme and was able to get it to work. It also worked without adding the plugin, other collisions may exist. A more comprehensive solution I am sure exists, but this might help get you up and running.

[chrissantamaria]

@pigmanbear I'm not too familiar with docz theme structures, would it possible for you to post a code snippet / fork my bug repo to detail how to use gatsby-theme-material-ui?

[pigmanbear]

@chrissantamaria

If you want to create a quick repo with your base current config, I will fork and then PR and then you will have a diff to look over.

[chrissantamaria]

@pigmanbear I have a repo linked in my original comment - are you asking for something further?

[pigmanbear]

@chrissantamaria No, sorry, didn't see the here

[pigmanbear]

@chrissantamaria

Docz Main

__Notes__:

• Using Patch-package to copy themes folder to .docz folder running gatsby
• The folder src/gatsby-theme-**/ is not watched, so changes are not reloaded. I fiddled with trying to fix that for a bit. A few PRs possible when I find the time
• After installing:

yarn patch-package gatsby-theme-docz

As Gatsby Theme

__Notes__:

• Gatsby Default Starter with Docz Theme
• Docz located at /docs/
• Using patch-package to add gatsby remark plugins (another PR opportunity for the gatsby-theme-docz)
• Playground with Material-UI Button

Hopefully this helps show component shadowing, and if you were trying to do it with Docz, the component shadowing would not work without the patch, as it is not being copied over, as aforementioned. Still, using gatsby starter with docz theme works with component shadowing as it should.

[revmischa]

Getting this exact same error as well, using Material-UI and TypeScript

[rakannimer]

Hey all !

Sorry for the late reply.

The reason for the problem is that docz and material-ui have conflicting dependencies for the convert-css-length module.

The quick fix is to patch convert-css-length.

If you're starting from scratch with Material UI + Docz

npx create-docz-app my-material-ui-docz --example material-ui

If you're adding docz to an existing project with material-ui

1. Make sure you're using the latest docz version

rm -rf .docz && yarn add docz@next`

1. Add patch-package and postinstall-postinstall to your dev dependencies:

yarn add -D patch-package postinstall-postinstall

1. Add a postinstall hook to run patch-package every-time an install occurs, in your package.json :

"scripts": {
+ "postinstall": "patch-package" 
}

1. Download the convert-css-length patch to your project

curl https://codeload.github.com/doczjs/docz/tar.gz/master | tar -xz --strip=3 docz-master/examples/material-ui/patches

1. Apply the patch

yarn patch-package

1. Ready to go 👍

[chrissantamaria]

@rakannimer works as expected! Thanks so much.

[revmischa]

I don't think this issue is really resolved....

[rakannimer]

The patch-package patching is a temporary fix while we get time to implement a better fix.

[revmischa]

I don't really understand the issue or what needs to happen but I opened issues:

• https://github.com/KyleAMathews/convert-css-length/issues/4
• https://github.com/system-ui/theme-ui/issues/343

[oliviertassinari]

Is there anything Material-UI can change to address the problem?

[rakannimer]

Thanks @oliviertassinari for asking !

I narrowed it down to being a problem with dom-helpers imports not resolving to the right version when two different versions were installed.

docz -> gatsby -> gatsby-react-router-scroll -> scroll-behavior depends on the older 3.4.0

and

@material-ui/core -> react-transition-group depends on 5.1.2 which has some understandable breaking changes.

Both versions are in node_modules :

node_modules/dom-helpers/ -> 5.1.2

and

node_modules/scroll-behavior/node_modules/dom-helpers/ -> 3.4.0

But are not being resolved correctly by gatsby (I think)

The easiest way I could think of to get this fixed was to submit a PR to scroll-behavior that updates dom-helpers but it turned out the scrollTop method in dom-helpers v5 doesn't behave like v3.

So I opened these 2 PRs to attempt to fix this :

• dom-helpers

• scroll-behavior

[Steve-Jones]

Any update on this?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.