[Error] React Native 0.63+ Support

[nadishan]

I did better-docs and JSDoc integration with React Native.

• First I created a fresh React Native CLI project using react-native init whatevername

• I did follow exactly the same steps mentioned in this tutorial

• However when I run npm run docs, it throws the below error.

> [email protected] docs C:\MY\DIR\jsdoc
> jsdoc -c ./jsdoc.json

Parsing C:\MY\DIR\jsdoc\src\Documented.js ...
C:\MY\DIR\jsdoc\node_modules\better-docs\component.js:67
      throw error
      ^

Error: [BABEL] unknown: Preset /* your preset */ requires a filename to be set when babel is called directly,

babel.transform(code, { filename: 'file.ts', presets: [/* your preset */] });

See https://babeljs.io/docs/en/options#filename for more information.
    at validateIfOptionNeedsFilename (C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\config\full.js:287:11)
    at C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\config\full.js:299:52
    at Array.forEach (<anonymous>)
    at validatePreset (C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\config\full.js:299:25)
    at loadPresetDescriptor (C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\config\full.js:306:3)
    at loadPresetDescriptor.next (<anonymous>)
    at recursePresetDescriptors C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\config\full.js:113:30)
    at recursePresetDescriptors.next (<anonymous>)
    at C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\config\full.js:187:21
    at Generator.next (<anonymous>)
    at loadFullConfig (C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\config\full.js:143:5)
    at loadFullConfig.next (<anonymous>)
    at Object.parse C:\MY\DIR\jsdoc\node_modules\@babel\core\lib\parse.js:28:45)
    at parse.next (<anonymous>)
    at evaluateSync (C:\MY\DIR\jsdoc\node_modules\gensync\index.js:245:28)
    at Object.sync (C:\MY\DIR\jsdoc\node_modules\gensync\index.js:85:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] docs: `jsdoc -c ./jsdoc.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] docs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

Documented.js

import React from 'react';
import PropTypes from 'prop-types';

/**
 * Some documented component
 *
 * @component
 * @example
 * const size = 12
 * const text = 'I am documented!'
 * return (
 *   <Documented size={size} text={text} />
 * )
 */
const Documented = (props) => {
  const {text, size} = props;
  return (
    <p style={{fontSize: size, padding: 10, border: '1px solid #ccc'}}>
      {text}
    </p>
  );
};

Documented.propTypes = {
  /**
   * Text is a text :)
   */
  text: PropTypes.string.isRequired,
  /**
   * Font size
   */
  size: PropTypes.number,
};

Documented.defaultProps = {
  text: 'Hello World',
  size: 12,
};

export default Documented;

package.json

"dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "better-docs": "^2.3.2",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "jsdoc": "^3.6.6",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

jsdoc.json

{
    "tags": {
        "allowUnknownTags": true
    },
    "source": {
        "include": ["./src"]
    },
    "plugins": [
        "plugins/markdown",
        "better-docs/component"
    ],
    "opts": {
        "encoding": "utf8",
        "destination": "docs/",
        "recurse": true,
        "verbose": true,
        "template": "./node_modules/better-docs"
    },
    "templates": {
        "better-docs": {
            "name": "My React components"
        }
    }
  }

What am I missing here in my code?

[sonisourabh]

I am facing the same issue, does better-docs supports react-native (without preview)?

[sonyboy232]

@sonisourabh

I am facing the same issue, does better-docs supports react-native (without preview)?

I'm not sure if it helps, but I have made a pull request that includes the ability to turn on react-native "support", which just essentially allows for the documentation using the @component tag, but skips the whole preview piece. It includes a bunch of other things as well, but each of them has the ability to be toggled from within the "jsdoc.json" configuration file. My PR also includes updates to the README.md to document the use of each addition.

Link to my PR

Link to my fork

I'm not part of the development team, but I am a developer and have made quite a few changes to this template and I believe I have a good working knowledge of it's inner workings

[sonisourabh]

@sonisourabh

I am facing the same issue, does better-docs supports react-native (without preview)?

I'm not sure if it helps, but I have made a pull request that includes the ability to turn on react-native "support", which just essentially allows for the documentation using the @component tag, but skips the whole preview piece. It includes a bunch of other things as well, but each of them has the ability to be toggled from within the "jsdoc.json" configuration file. My PR also includes updates to the README.md to document the use of each addition.

Link to my PR

Link to my fork

I'm not part of the development team, but I am a developer and have made quite a few changes to this template and I believe I have a good working knowledge of it's inner workings

Great! I could use your fork (with isReactNative = true) in my project to generate the doc. Thanks for the help.

[darshan09200]

@sonisourabh

I am facing the same issue, does better-docs supports react-native (without preview)?

I'm not sure if it helps, but I have made a pull request that includes the ability to turn on react-native "support", which just essentially allows for the documentation using the @component tag, but skips the whole preview piece. It includes a bunch of other things as well, but each of them has the ability to be toggled from within the "jsdoc.json" configuration file. My PR also includes updates to the README.md to document the use of each addition.

Link to my PR

Link to my fork

I'm not part of the development team, but I am a developer and have made quite a few changes to this template and I believe I have a good working knowledge of it's inner workings

@sonyboy232 I tried your fork and configured it as said in the readme of your fork, but it didn't solve my issue. It was still giving me the same error as mentioned in the question. Can you add an example repo to show how can we properly use the fork?

Version info: "react": "17.0.1" "react-native": "0.64.1"

[anonymous33999]

@darshan09200 Did you found any suitable solution. I am also facing the same error. I also forked @sonyboy232's branch but still got the same error

[anonymous33999]

@sonisourabh Can you help me out? What steps did you follow to generate the document? I have forked the GitHub repo and cloned it in my project. I have uninstalled the better-docs from node_modules also. Then also I am not able to generate the document. Can you help me out?

[darshan09200]

@darshan09200 Did you found any suitable solution. I am also facing the same error. I also forked @sonyboy232's branch but still got the same error

@anonymous33999 No, I wasn't able to find any solution.

[sonisourabh]

@sonisourabh Can you help me out? What steps did you follow to generate the document? I have forked the GitHub repo and cloned it in my project. I have uninstalled the better-docs from node_modules also. Then also I am not able to generate the document. Can you help me out?

@anonymous33999 I added the fork as dependency yarn add "git://github.com/sonyboy232/better-docs.git#master" --dev and added "isReactNative": true in better-docs node in jsdoc configuration file. For example the configurlation looks like:

{
  "tags": {
    "allowUnknownTags": true,
    "dictionaries": ["jsdoc", "closure"]
  },
  "source": {
    "include": ["./src"],
    "includePattern": ".+\\.js(doc|x)?$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "plugins": [
    "plugins/markdown", 
    "node_modules/better-docs/component",
    "node_modules/better-docs/category"
  ],
  "templates": {
    "search": true,
    "default": {
      "includeDate": false,
      "outputSourceFiles": false
    },
    "better-docs": {
      "name": "package-name",
      "hideGenerator": true,
      "isReactNative": true
    }
  },
  "opts": {
    "template": "node_modules/better-docs",
    "destination": "docs",
    "recurse": true,
    "verbose": true,
    "readme": "README.md"
  }
}

[anonymous33999]

@sonisourabh Can you help me out? What steps did you follow to generate the document? I have forked the GitHub repo and cloned it in my project. I have uninstalled the better-docs from node_modules also. Then also I am not able to generate the document. Can you help me out?

@anonymous33999 I added the fork as dependency yarn add "git://github.com/sonyboy232/better-docs.git#master" --dev and added "isReactNative": true in better-docs node in jsdoc configuration file. For example the configurlation looks like:

{
  "tags": {
    "allowUnknownTags": true,
    "dictionaries": ["jsdoc", "closure"]
  },
  "source": {
    "include": ["./src"],
    "includePattern": ".+\\.js(doc|x)?$",
    "excludePattern": "(^|\\/|\\\\)_"
  },
  "plugins": [
    "plugins/markdown", 
    "node_modules/better-docs/component",
    "node_modules/better-docs/category"
  ],
  "templates": {
    "search": true,
    "default": {
      "includeDate": false,
      "outputSourceFiles": false
    },
    "better-docs": {
      "name": "package-name",
      "hideGenerator": true,
      "isReactNative": true
    }
  },
  "opts": {
    "template": "node_modules/better-docs",
    "destination": "docs",
    "recurse": true,
    "verbose": true,
    "readme": "README.md"
  }
}

@sonisourabh Thanks for the reply but still facing the same issue

[sonisourabh]

@anonymous33999 I followed the steps described in this README. Instead of npm install --save-dev better-docs, I did npm install --save-dev git://github.com/sonyboy232/better-docs.git#master and added "isReactNative": true line in my jsdoc.json. Refer the content of my jsdoc.json in my previous reply. I hope that this is helpful.

[anonymous33999]

@sonisourabh Thanks it's working but I am not getting any output. Can you just give me an example of what does your JSDoc comment looks like? Can you validate my JSDoc comment. If I add a function plugin then I get the above error and if I do not add it then I get null as the output. Thanks a lot again

/**
 * @component AppLoading
 * @description `<AppLoading />`
 * 
 * @example
 *
 * return (
 *   <AppLoading />
 * )
 */

This is my output.

[anonymous33999]

@sonisourabh Can you help me out ??

[VictorioMolina]

any updates on this?