Docz: dev and build scripts fail — TypeError: programPath.hub.addHelper is not a function

[thislogancall]

Bug Report

Describe the bug
Using Babel 7, Webpack 4... Running dev or build scripts fail

A clear and concise description of what the bug is.

Module build failed (from ./node_modules/happypack/loader.js):
TypeError: programPath.hub.addHelper is not a function
    at wrapInterop (/Users/logan/code/bidchuck/documentation/node_modules/@babel/helper-module-transforms/lib/index.js:165:45)
    at PluginPass.exit (/Users/logan/code/bidchuck/documentation/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js:174:70)
    at newFn (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/path/context.js:97:8)
    at TraversalContext.visitQueue (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/context.js:146:19)
    at Function.traverse.node (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/index.js:94:17)
    at traverse (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/traverse/lib/index.js:76:12)
    at transformFile (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/core/lib/transformation/index.js:88:29)
    at runSync (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/core/lib/transformation/index.js:45:3)
    at runAsync (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/Users/logan/code/bidchuck/documentation/node_modules/docz-core/node_modules/@babel/core/lib/transform.js:34:34)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)

 @ multi ./node_modules/docz-core/node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

To Reproduce

package.json depedencies

{
    "@babel/core": "7.0.0-beta.54",
    "@babel/plugin-proposal-class-properties": "7.0.0-beta.54",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-emotion": "^9.2.6",
    "docz": "^0.9.6",
    "emotion": "^9.2.6",
    "faker": "^4.1.0",
    "lodash": "^4.17.10",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-emotion": "^9.2.5",
    "react-spring": "^5.6.8",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.54",
    "@babel/plugin-proposal-do-expressions": "7.0.0-beta.54",
    "@babel/plugin-proposal-export-default-from": "7.0.0-beta.54",
    "@babel/plugin-proposal-export-namespace-from": "7.0.0-beta.54",
    "@babel/plugin-proposal-function-bind": "7.0.0-beta.54",
    "@babel/plugin-proposal-function-sent": "7.0.0-beta.54",
    "@babel/plugin-proposal-json-strings": "7.0.0-beta.54",
    "@babel/plugin-proposal-logical-assignment-operators": "7.0.0-beta.54",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.0.0-beta.54",
    "@babel/plugin-proposal-numeric-separator": "7.0.0-beta.54",
    "@babel/plugin-proposal-optional-chaining": "7.0.0-beta.54",
    "@babel/plugin-proposal-pipeline-operator": "7.0.0-beta.54",
    "@babel/plugin-proposal-throw-expressions": "7.0.0-beta.54",
    "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.54",
    "@babel/plugin-syntax-import-meta": "7.0.0-beta.54",
    "@babel/preset-env": "^7.0.0-rc.3",
    "@babel/preset-react": "^7.0.0-rc.3"
  }

.babelrc config

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "retainLines": true,
  "plugins": [
    "emotion",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-syntax-import-meta",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-json-strings",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    "@babel/plugin-proposal-function-sent",
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-numeric-separator",
    "@babel/plugin-proposal-throw-expressions",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-logical-assignment-operators",
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ],
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-do-expressions",
    "@babel/plugin-proposal-function-bind"
  ]
}

index.mdx file

---
name: /
route: '/'
---

import { LogoColor } from '../src/components/Icons/LogoColor.js'

<LogoColor />

# bidCHUCK Components

_This project is actively being developed._

Logo being imported by index.mdx

import React from 'react'

export const LogoColor = () => (
  <svg viewBox="0 0 148 128">
    <defs>
      <mask id="circle-mask">
        <rect fill="#fff" width="100%" height="100%" />
        <circle id="logo-mask" cx="120" cy="96" r="28" />
      </mask>
    </defs>
    <polygon
      id="logo-hexagon"
      fill="#00B4FF"
      points="64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96"
      mask="url(#circle-mask)"
    />
    <circle id="logo-circle" fill="#3F3C3C" cx="120" cy="96" r="20" />
  </svg>
)

Then run docz dev or docz build and it'll fail with the error above

Expected behavior

The build won't fail, and i'll be able to see Docz working with the Logo on page.

Environment

• OS: macOS 10.13.6
• Node/npm version: Node 8.11.3/npm 5.6.0

[thislogancall]

Upon googling this error I found a suggestion to upgrade all babel dependencies to ...-rc.2 versions, but it didn't make a difference.

[jigsawye]

I have same error with babel-*-rc.3

[thislogancall]

rc.4 + yarn (opposed to npm) produce the same error.

[jigsawye]

~The babel 7.0.0 has been released, my Docz work fine after upgrade babel dpes to 7.0.0 😂~

My docz still broken after reinstall all dependencies

[nsatija]

i just upgraded all babel deps to 7, still see to same error while deploying next.js 6.1.1 on heroku or now
TypeError: programPath.hub.addHelper is not a function\n at wrapInterop (/node_modules/@babel/helper-module-transforms/lib/index.js:165:45)

[viralganatra]

I think this has already been fixed in the dev branch with an upgrade to Babel 7, so I'm guessing with the next release it should be out. It worked for me by manually upgrade docz-core from babel 7.0.0-beta.55 to the latest (7.0.0).

[thislogancall]

My project requires babel 6... so I was nesting the documentation within a sub dir with it's own package.json so I could use babel 7 with docz. I then pulled components from the master project. I don't understand why that didn't work, but moving the documentation to the master project dir and using the babel 6 plugin worked. Although for this to work I am forced to use docz version 0.9.6... so it'd still be nice to have the setup I was using, but this works for now.