docz: v2: Pages crash with Material-UI installed

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)

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!

Install dependencies (I’m running yarn)
Run the dev server (I’m running yarn run dev)
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".

chrome_23

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 17 (6 by maintainers)

Most upvoted comments

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 :

rakannimer on Oct 20, 2019

Any update on this?

steve-jones on Nov 21, 2019

@rakannimer works as expected! Thanks so much.

chrissantamaria on Sep 5, 2019

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

Make sure you’re using the latest docz version

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

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

yarn add -D patch-package postinstall-postinstall

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

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

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

Apply the patch

yarn patch-package

Ready to go 👍

rakannimer on Sep 5, 2019