First run failed (webpack-hot-client ?)

[dyegolara]

Bug Report

When I try to run docz for the first time (the only thing I did was yarn add -D docz), it compiles but then throw this error:

Then, after I think "this is not zero-config", I install the webpack-hot-client and try to run docz again typing yarn docz dev in my terminal and it throws me this:

My index.mdx file looks like this:

---
name: Deudas
---

import { Playground } from 'docz'
import { StatusLabel, STATUSES } from './debtsList'

# StatusLabel

<Playground>
  {STATUSES.map(({ id, label, tagType }) => (
    <StatusLabel key={id} label={label} tagType={tagType} />
  ))}
</Playground>

I don't know if I'm missing something and this is my fault but it happens in my both laptops

To Reproduce

1. run yarn add -D docz in the terminal in the project folder
2. create an index.mdx file with the code pasted above
3. run yarn docz dev
4. See error

Enviroment

• OS: [e.g. OSX 10.13.45]
• Node/npm version: [e.g. Node 8.9.4/npm 5.6.0]

Additional context/Screenshots my package.json :

{
  "name": "rtd-frontend",
  "private": true,
  "description": "Servir de frontend para interactuar con __RTD API__ para los ARD y Negociadores.",
  "standard": {
    "parser": "babel-eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "linters": {
      "*.{js, scss}": [
        "prettier-standard",
        "git add"
      ]
    }
  },
  "dependencies": {
    "accounting": "^0.4.1",
    "axios": "^0.18.0",
    "bulma": "^0.6.2",
    "bulma-accordion": "^1.0.1",
    "bulma-pageloader": "^1.0.1",
    "bulma-steps": "^1.0.2",
    "bulma-timeline": "^2.0.1",
    "chai": "^4.1.2",
    "classnames": "^2.2.5",
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-15": "^1.0.0",
    "events": "^1.1.1",
    "jsdom": "^11.2.0",
    "jsoneditor": "^5.9.6",
    "lodash": "^4.17.10",
    "mobx": "^4.1.0",
    "mobx-react": "^5.0.0",
    "mocha": "^3.5.3",
    "moment": "^2.17.1",
    "prop-types": "^15.6.1",
    "query-string": "^4.3.2",
    "react": "^15.3.2",
    "react-addons-test-utils": "^15.6.2",
    "react-addons-update": "^15.4.2",
    "react-alert": "^2.4.0",
    "react-async-loader": "^0.1.2",
    "react-datepicker": "^0.52.0",
    "react-document-title": "^2.0.2",
    "react-dom": "^15.3.2",
    "react-google-login": "^2.9.3",
    "react-image-zoom": "^0.7.0",
    "react-router": "^3.0.2",
    "react-select": "^1.0.0-rc.5",
    "react-toastify": "^3.4.2",
    "react-tooltip": "^3.3.0",
    "recharts": "^0.21.2",
    "sinon": "^4.0.0",
    "stackdriver-errors-js": "^0.4.0",
    "store": "2.0.3",
    "validator": "^7.0.0",
    "validatorjs": "^3.14.2"
  },
  "scripts": {
    "deploy": "rm -rf build && mkdir build && npm run css && cp -R ./public/. ./build && npm run build",
    "build": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js -p",
    "deploy-sandbox": "rm -rf build && mkdir build && npm run css && cp -R ./public/. ./build && npm run build-sandbox",
    "build-sandbox": "node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=sandbox node_modules/webpack/bin/webpack.js -p",
    "test": "NODE_ENV=test mocha --compilers js:babel-register --require ./test/helpers.js --require ./test/dom.js --recursive",
    "tdd": "npm test -- --watch",
    "css": "node_modules/node-sass/bin/node-sass public/css/src/main.scss public/css/main.css --output-style compressed"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.28.11",
    "docz": "^0.2.4",
    "ejs-loader": "^0.3.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.0.0-rc.6",
    "jest": "^21.1.0",
    "lint-staged": "^7.1.2",
    "node-sass": "^4.9.0",
    "prettier-standard": "^8.0.1",
    "react-test-renderer": "^15.6.2",
    "sass-loader": "^7.0.3",
    "standard": "^11.0.1",
    "style-loader": "^0.21.0",
    "url-loader": "^0.5.7",
    "webpack": "^3.11",
    "webpack-dev-server": "^2.11.1"
  }
}

[danburzo]

I've also had this issue #24, I now realize it might have something to do with Docz needing webpack 4?

[pedronauck]

For sure @danburzo, you need to use webpack 4 and babel 7 to get it running!