[Error] React Native 0.63+ Support #112

nadishan · 2020-10-20T21:24:03Z

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?

The text was updated successfully, but these errors were encountered:

sonisourabh · 2021-01-03T05:14:46Z

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

sonyboy232 · 2021-01-06T15:20:46Z

@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 · 2021-01-09T01:40:24Z

@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 · 2021-06-18T09:02:43Z

@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 · 2021-07-16T09:53:38Z

@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 · 2021-07-16T09:58:05Z

@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 · 2021-07-16T09:59:39Z

@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 · 2021-07-16T22:25:58Z

@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 · 2021-07-17T10:18:03Z

@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 · 2021-07-19T08:31:25Z

@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 · 2021-07-19T16:14:35Z

@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 · 2021-07-21T05:00:28Z

@sonisourabh Can you help me out ??

VictorioMolina · 2022-02-02T02:25:48Z

any updates on this?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Error] React Native 0.63+ Support #112

[Error] React Native 0.63+ Support #112

nadishan commented Oct 20, 2020 •

edited

Loading

sonisourabh commented Jan 3, 2021

sonyboy232 commented Jan 6, 2021 •

edited

Loading

sonisourabh commented Jan 9, 2021 •

edited

Loading

darshan09200 commented Jun 18, 2021 •

edited

Loading

anonymous33999 commented Jul 16, 2021

anonymous33999 commented Jul 16, 2021 •

edited

Loading

darshan09200 commented Jul 16, 2021

sonisourabh commented Jul 16, 2021

anonymous33999 commented Jul 17, 2021

sonisourabh commented Jul 19, 2021

anonymous33999 commented Jul 19, 2021

anonymous33999 commented Jul 21, 2021

VictorioMolina commented Feb 2, 2022

[Error] React Native 0.63+ Support #112

[Error] React Native 0.63+ Support #112

Comments

nadishan commented Oct 20, 2020 • edited Loading

sonisourabh commented Jan 3, 2021

sonyboy232 commented Jan 6, 2021 • edited Loading

sonisourabh commented Jan 9, 2021 • edited Loading

darshan09200 commented Jun 18, 2021 • edited Loading

anonymous33999 commented Jul 16, 2021

anonymous33999 commented Jul 16, 2021 • edited Loading

darshan09200 commented Jul 16, 2021

sonisourabh commented Jul 16, 2021

anonymous33999 commented Jul 17, 2021

sonisourabh commented Jul 19, 2021

anonymous33999 commented Jul 19, 2021

anonymous33999 commented Jul 21, 2021

VictorioMolina commented Feb 2, 2022

nadishan commented Oct 20, 2020 •

edited

Loading

sonyboy232 commented Jan 6, 2021 •

edited

Loading

sonisourabh commented Jan 9, 2021 •

edited

Loading

darshan09200 commented Jun 18, 2021 •

edited

Loading

anonymous33999 commented Jul 16, 2021 •

edited

Loading