Fails to render after successful compilation

Bug Report

Describe the bug

A clear and concise description of what the bug is. I upgraded my project’s webpack and babel versions to 4 and 7, respectively and tried to run docz. MY app starts as expected and the migration to the new versions of webpack and babel, and Docz compiles successfully. After startup, however, I see a blank white page and the console error shown below. I don’t use Typescript in my app… is there something I’m missing for the babel compilation that is failing to render the Docz theme components?

I’ve tried not having a doczrc.js file, and adding every type of config to I could think of with no success, including:

module.exports = {
  typescript: true,
  modifyBabelRc: (babelrc) => {
    babelrc.babelrc = true
    babelrc.presets = []
    babelrc.plugins = ['@babel/plugin-syntax-dynamic-import']
    return babelrc
  }
}

My babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": "> 1%"
        },
        "forceAllTransforms": true,
        "useBuiltIns": "entry"
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow",
    ["@babel/preset-stage-2", { "decoratorsLegacy": true }]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "relay"
  ]
}

To Reproduce

1. run docz dev
2. open localhost:3000
3. View console error

invariant.js?d8db:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (invariant.js?d8db:42)
    at createFiberFromElement (react-dom.development.js?61bb:5751)
    at reconcileSingleElement (react-dom.development.js?61bb:7552)
    at reconcileChildFibers (react-dom.development.js?61bb:7656)
    at reconcileChildrenAtExpirationTime (react-dom.development.js?61bb:7780)
    at reconcileChildren (react-dom.development.js?61bb:7771)
    at finishClassComponent (react-dom.development.js?61bb:7907)
    at updateClassComponent (react-dom.development.js?61bb:7879)
    at beginWork (react-dom.development.js?61bb:8253)
    at performUnitOfWork (react-dom.development.js?61bb:10244)
invariant @ invariant.js?d8db:42
createFiberFromElement @ react-dom.development.js?61bb:5751
reconcileSingleElement @ react-dom.development.js?61bb:7552
reconcileChildFibers @ react-dom.development.js?61bb:7656
reconcileChildrenAtExpirationTime @ react-dom.development.js?61bb:7780
reconcileChildren @ react-dom.development.js?61bb:7771
finishClassComponent @ react-dom.development.js?61bb:7907
updateClassComponent @ react-dom.development.js?61bb:7879
beginWork @ react-dom.development.js?61bb:8253
performUnitOfWork @ react-dom.development.js?61bb:10244
workLoop @ react-dom.development.js?61bb:10308
callCallback @ react-dom.development.js?61bb:540
invokeGuardedCallbackDev @ react-dom.development.js?61bb:579
invokeGuardedCallback @ react-dom.development.js?61bb:436
renderRoot @ react-dom.development.js?61bb:10386
performWorkOnRoot @ react-dom.development.js?61bb:11000
performWork @ react-dom.development.js?61bb:10952
requestWork @ react-dom.development.js?61bb:10861
scheduleWorkImpl @ react-dom.development.js?61bb:10744
scheduleWork @ react-dom.development.js?61bb:10706
scheduleTopLevelUpdate @ react-dom.development.js?61bb:11177
updateContainer @ react-dom.development.js?61bb:11215
(anonymous) @ react-dom.development.js?61bb:15232
unbatchedUpdates @ react-dom.development.js?61bb:11086
renderSubtreeIntoContainer @ react-dom.development.js?61bb:15231
render @ react-dom.development.js?61bb:15296
render @ index.jsx?2214:16
(anonymous) @ index.jsx?2214:23
./.docz/app/index.jsx @ app.js:966
__webpack_require__ @ app.js:800
fn @ app.js:163
1 @ app.js:1004
__webpack_require__ @ app.js:800
checkDeferredModules @ app.js:61
(anonymous) @ app.js:941
(anonymous) @ app.js:944
react-dom.development.js?61bb:9769 The above error occurred in the <ErrorBoundary> component:
    in ErrorBoundary
    in DoczTheme (created by Root)
    in Root
    in AppContainer
    in HotExportedRoot

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

In order to allow us to quickly reproduce you issue please include a link to a reproduction repository.

Expected behavior

The page to load with no error.

Enviroment

• OS: OSX 10.13.4
• Node/npm version: Node 8.9.4 / yarn 1.7.0

[fenbka]

oh no sorry that is my bad. styled-components plugin not compile him with error. Now its all ok

[nicholasess]

@fenbka you need to export as default the component, is a warning in doc

import Button from “./Button” will work