[Error] React Native 0.63+ Support

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.

> jsdoc1@0.0.1 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! jsdoc1@0.0.1 docs: `jsdoc -c ./jsdoc.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jsdoc1@0.0.1 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?

[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

[VictorioMolina]

any updates on this?