Docz: Error on run docz dev command

[raisiqueira]

Bug Report

On run the docz dev command return this error on terminal:

 ERROR  Failed to compile with 1 errors                                                                                    15:02:50

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

Module build failed (from ./node_modules/happypack/loader.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /private/tmp/arv-ui-2/node_modules/babel-preset-react/lib/index.js
    at createDescriptor (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-descriptors.js:138:11)
    at items.map (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-descriptors.js:69:50)
    at Array.map (<anonymous>)
    at createDescriptors (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-descriptors.js:69:29)
    at createPresetDescriptors (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-descriptors.js:61:10)
    at passPerPreset (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-descriptors.js:53:96)
    at cachedFunction (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/caching.js:32:19)
    at presets.presets (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-descriptors.js:25:84)
    at mergeChainOpts (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-chain.js:303:26)
    at /private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-chain.js:266:7
    at buildRootChain (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/config-chain.js:56:29)
    at loadPrivatePartialConfig (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/partial.js:55:55)
    at Object.loadPartialConfig (/private/tmp/arv-ui-2/node_modules/@babel/core/lib/config/partial.js:80:18)
    at Object.<anonymous> (/private/tmp/arv-ui-2/node_modules/docz-core/node_modules/babel-loader/lib/index.js:82:26)
    at Generator.next (<anonymous>)
    at step (/private/tmp/arv-ui-2/node_modules/docz-core/node_modules/babel-loader/lib/index.js:3:221)

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

Package.json

{
  "name": "arv-ui",
  "version": "0.0.1",
  "author": "Raí Siqueira <[email protected]>",
  "repository": "raisiqueira/arv-ui",
  "keywords": [
    "react",
    "react-dom"
  ],
  "license": "MIT",
  "main": "dist/index.js",
  "source": "src/index.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "start": "NODE_ENV=development babel -w ./src --out-dir dist",
    "build": "NODE_ENV=production babel ./src --out-dir dist",
    "test": "jest",
    "test:coverage": "jest --coverage",
    "test:watch": "jest --watch",
    "test:lint": "eslint . --ignore-path .gitignore",
    "prepare": "npm run build",
    "deploy": "np",
    "docz:dev": "docz dev",
    "docz:build": "docz build"
  },
  "dependencies": {
    "path-to-regexp": "^2.2.1",
    "prop-types": "^15.6.2",
    "react-select": "^2.0.0",
    "reakit": "^0.14.0"
  },
  "peerDependencies": {
    "react": ">=15",
    "react-dom": ">=15"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "docz": "^0.10.2",
    "jest": "^23.5.0",
    "np": "^3.0.4",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "jest": {
    "collectCoverage": true,
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "packages"
    ]
  },
  "pre-push": [
    "test"
  ]
}

Environment

• OS: OSX 10.13.4
• Node/npm version: Node 9.4.0/npm 6.2.0

[pedronauck]

Related to #220

[anthify]

Both of these issues are closed although it doesn't seem to be resolved. I have the same issue - I just wanted to double check before updating babel.

[pedronauck]

@anthify see #220, the issue wasn't closed yet... I'm trying to find a solution, last night I spent a few hours trying to fix but with the lasts releases of babel is so hard to do a fix. If you're in a hurry, you can try to help me, will be so good since I can't find what's causing this bug!

[anthify]

@pedronauck sure I'll give it a look

[anthify]

@pedronauck I'm a bit strapped for time and I'm not sure where to even start 🙈

[nicholasess]

@pedronauck i wil reopen, because other people has the same problem and not find a issue to see some solutions.

[mahenrique94]

I'm having the same problem here, i didn't find a solution yet.

[mahenrique94]

I just upgrade my babel version with babel-upgrade and remove react-app from my .babelrc file in presets, and Docz became workz \o/

[pedronauck]

We're thinking to deprecate support for babel 6 next week since babel 7 will be released monday 🙏

[pedronauck]

So, after deprecate babel 6 support I'll gona close this issue and #220

[mahenrique94]

But there’s a side effect, after upgrade my babel version, all my tests are broked.

[pedronauck]

In the new release and since Babel 7 now is a reality, we're dropping support for older versions of babel. Please, if you want to use docz new version, upgrade your babel. You can use babel-upgrade by just running:

npx babel-upgrade --write

[caesarbell]

I am having issues with running docz:dev within a gatsbyjs project. I get the following error

Module parse failed: Unexpected token (473:30) app_1 | You may need an appropriate loader to handle this file type. app_1 | | async function loadFromImports(path) { app_1 | | // tslint:disable-next-line app_1 | > const { imports } = await import('~imports'); app_1 | | const { default: Component$$1, getInitialData } = await imports[path](); app_1 | | const ExportedComponent = props => (createElement(AsyncComponent, Object.assign({}, props, { as: Component$$1 || 'div', getInitialData: getInitialData })));

It seems like there is a conflict with the pre-built webpack that comes with Gatsby.

[nahumzs]

if you have a .babelrc file is not enough to run npx babel-upgrade --write you will need to do some modification to your .babelrc file.

ex:

{
  "env": {
    "development": {
      "presets": ["@babel/env", "@babel/react"],
      "plugins": ["@babel/plugin-transform-runtime"]
    }
}

you need to use as well the latest version of the plugin-transform-runtime