Docz: Not so 'Zero Configuration'

[caiangums]

Hey, I'm having a lot of problems here with docz. Just to clarify:

• yarn --version 1.3.2
• node --version v9.11.1 (but tried with v10.0.0 too)
• MacOS

My project use React + Webpack and it is a simple project with two components (one is the main component).
I ran yarn add docz --dev and installed the dependencies. Then I created a file on the project like the documentation says anywhere in the project and when I tried to run the yarn docz dev, this is the output:

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                               20:23:09

These dependencies were not found:

* docz-theme-default in ./.docz/app/root.jsx
* webpack-hot-client/client?e355a93e-1b0c-4aa5-a751-e8c3c0b5968b in multi webpack-hot-client/client?e355a93e-1b0c-4aa5-a751-e8c3c0b5968b ./node_modules/docz-core/node_modules/babel-polyfill/lib/index.js ./.docz/app/index.jsx

To install them, you can run: npm install --save docz-theme-default webpack-hot-client/client?e355a93e-1b0c-4aa5-a751-e8c3c0b5968b

This seems the first problem: Not install all the dependencies when the docz is installed.
I suggest installing the default theme with docz and correct the missing dependency if it's possible.

Then, I've installed the dependencies and all seems ok but when I opened my browser even with the .mdx simple file from the documentation I don't see anything, just a blank page.
This is the file I wrote:

---
name: Hello world
---

# Hello world

I'm a markdown document that can have components!

I've placed the file on all the directories on my project and I still see a blank page.
Then I thought: 'Oh, maybe I need to place my component on the file' and imported the Component. Then I got another error with problems when my component import css from my style.css file.

Any help?

[pedronauck]

What's version of webpack do you on your project? Docz need webpack 4 and babel 7, if you have another version, maybe your errors are coming from here!

[caiangums]

These are my configs on package.json:

  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "@storybook/react": "^3.3.14",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "css-loader": "^0.28.10",
    "file-loader": "^1.1.11",
    "style-loader": "^0.20.2",
    "url-loader": "^1.0.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-server": "^3.1.3"
  }

As you may notice, webpack > 4 but babel stuff > 6.24(the lastest versions of 6.x was released on April) but the 7.0 is still in beta. You probably should declare somewhere that the user must use babel > 7.

The point with the theme still an issue on my point of view, but I'll try to install babel 7.

[caiangums]

yarn could not even recognize the last version of Babel in beta. The option for me is version 7.0.0-beta.3 and all my small project broke on storybook and I can't compile to run in dev mode.

I'll give up on using docz for now, wait until babel release the version 7.0.0 (all the beta versions are pre-releases) and wait for a release 1.0.0 of docz.
You can close the issue. Thanks for your time! 😄

[marceloavf]

We do have a plug-in for babel 6 @caian-gums, you can give a try to it, please
https://github.com/pedronauck/docz/tree/master/packages/docz-plugin-babel6

[pedronauck]

Tell me if you got to work with docz-plugin-babel6 @caian-gums, please 🙏

[caiangums]

That's what I've done:

1. Reset the project to working version (babel 6 with no docz)
2. Installed the docz-plugin-babel6 and created a dockzrc.js on root directory like the readme.md says on link that @marceloavf gave
3. Installed docz
4. Installed the requested libs (default theme of docz and webpack-hot-client)
5. created file hello.mdx on src/ directory like the documentation says on Getting Started
6. $ yarn docz dev

And still blank page like before on my browser, as if I didn't install docz-plugin-babel6
Did I miss something on config/install process?

Edit: the filename is doczrc.js

[pedronauck]

Try to rename your dockzrc.js to doczrc.js...

[caiangums]

Sorry, I mispelled. The filename is doczrc.js

[pedronauck]

Maybe you get me a small repo version of your project on github, what you think about?

[caiangums]

I'll work on this.

[nicholasess]

@caian-gums Do you have a position of repository public? We need to test the environment!

[caiangums]

Sorry, but I'll take some time to end and publish the project. It's a personal project and for now, it's on hold and I'm focusing on tests(with Jest and maybe Enzyme).

If you want to close the issue and re-open when I got the project ready to test it's ok. 😄

[nicholasess]

@marceloavf Can u close the issue?

[ghostCoder]

@caian-gums were you able to get docz working with babel 6?

[pedronauck]

You're dropping support for babel 6 in the next releases @ghostCoder, since Babel 7 now is a reality.

[Pabloicaza]

Can someone elaborate a bit more on the subject? I'm trying to configure docz to my proyect and on first bundle I get this error:

ERROR

 ERROR  Failed to compile with 1 errors                                                                                                                17:55:29

 error  in ./.docz/app/index.jsx

Module build failed (from ./node_modules/happypack/loader.js):
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3".
If you are sure you have a compatible version of @babel/core, it is likely that something in your
build process is loading the wrong version.
Inspect the stack trace of this error to look for the first entry that doesn't 
mention "@babel/core" or "babel-core" to see what is calling Babel. 

Dependencies
"dependencies": { "apollo-client": "^2.3.1", "autoprefixer": "^8.5.0", "classnames": "^2.2.5", "file-loader": "^2.0.0", "graphql": "^0.13.2", "graphql-tag": "^2.9.2", "lost": "^8.2.1", "node-sass-chokidar": "^1.3.0", "postcss-flexbugs-fixes": "^3.3.1", "postcss-inline-svg": "^3.1.1", "react-apollo": "^2.1.4", "react-inlinesvg": "^0.8.1", "rupture-sass": "^0.3.0" }, "devDependencies": { "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.0", "babel-plugin-transform-class-properties": "^6.24.1", "clean-webpack-plugin": "^0.1.19", "css-loader": "^1.0.0", "docz": "^0.10.3", "docz-plugin-babel6": "^0.10.3", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "postcss-loader": "^3.0.0", "react": "^16.4.2", "react-dom": "^16.4.2", "react-router-dom": "^4.3.1", "sass-loader": "^7.1.0", "standard": "^11.0.1", "style-loader": "^0.23.0", "url-loader": "^1.1.1", "webpack": "^4.17.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.7", "webpack-hot-client": "^4.1.1" }

[caiangums]

@ghostCoder no, I could not make the project works on my repo and I'm not with so much personal time to manage this. As Babel 7 was released, I encourage you to increase your Babel version to 7 like @pedronauck said.

@Pabloicaza try to delete your node_modules/ directory and install again. Your Babel version probably is not the new one(you didn't run npm update).

[Pabloicaza]

@caian-gums that solved the problem!! Thanks for the time!