Phazoning commented 2 years ago

My problem is as follows:

I'm trying to document my react-native project, but when I use any components from it, errors arise, preventing me from doing the webpack. The data is as follows:

Input: > yarn docz build

Conflictive MD file:

---
name: Home
menu: Components
Route: /Components/Menu
---

import Home from './app/components/home/home.js'

Errors:

node_modules\react-native-gesture-handler\dist\src\components*: Support for the experimental syntax 'jsx' isn't currently enabled (persists for all components on react-native-gesture-handler)

node_modules\react-native-vector-icons\lib\create-icon-set.js: Support for the experimental syntax 'jsx' isn't currently enabled

Suggested fixes

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundle --sourcemap-output android/app/src/main/assets/index.map --assets-dest android/app/src/main/res",
    "build-apk": "cd android && ./gradlew bundleRelease",
    "clean-build": "cd android && ./gradlew clean",
    "code-formatter": "prettier app/**/*.{js,ts,tx,tsx} --write",
    "code-formatter-check": "prettier --check app/**/*.{js,ts,tx,tsx}",
    "coverage": "jest --coverage",
    "docs-dev": "docz dev",
    "docs-build": "docz build",
    "generate-dotenv": "sh util/generate-dotenv.sh > .env",
    "generate-licenses": "npm-license-crawler -onlyDirectDependencies --omitVersion -json app/data/licenses.json",
    "generate-gradle-properties": "sh util/generate-gradle-properties.sh > android/gradle.properties",
    "ios": "react-native run-ios",
    "lint": "eslint app/**/*.{js,ts,tx,tsx}",
    "forcelint": "eslint --fix app/**/*.{js,ts,tx,tsx}",
    "log": "react-native log-android",
    "publish-package": "cd android && ./gradlew publishRelease",
    "send-app-distribution": "cd android && ./gradlew assembleRelease appDistributionUploadRelease",
    "start": "react-native start",
    "tests": "jest",
    "types-check": "tsc --project . --noEmit --pretty --skipLibCheck",
    "watch-tests": "jest --watch"
  },
  "dependencies": {
    "@babel/preset-env": "^7.15.4",
    "@babel/preset-react": "^7.14.5",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^5.8.0",
    "@react-native-community/progress-bar-android": "^1.0.4",
    "@react-native-community/progress-view": "^1.2.3",
    "@react-native-community/slider": "^2.0.9",
    "@react-native-firebase/analytics": "^6.7.2",
    "@react-native-firebase/app": "^6.7.1",
    "@react-native-firebase/crashlytics": "^6.7.1",
    "@react-native-firebase/messaging": "^6.7.1",
    "@react-native-mapbox-gl/maps": "^8.1.0",
    "@react-native-picker/picker": "^1.9.11",
    "@react-navigation/drawer": "^5.11.4",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "babel-preset-react": "^6.24.1",
    "html-entities": "^2.0.2",
    "js-base64": "^3.6.0",
    "locutus": "^2.0.14",
    "moment": "^2.25.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.2",
    "react-native": "^0.63.4",
    "react-native-action-sheet": "^2.2.0",
    "react-native-app-auth": "^5.1.2",
    "react-native-appstore-version-checker": "^3.0.0",
    "react-native-auto-height-image": "^3.2.3",
    "react-native-config": "^1.0.0",
    "react-native-device-info": "^7.0.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-localization": "^2.1.6",
    "react-native-onesignal": "^4.0.3",
    "react-native-pdf": "^6.3.0",
    "react-native-picker-select": "^8.0.4",
    "react-native-popup-dialog": "^0.18.3",
    "react-native-reanimated": "^1.8.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.7.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-simple-toast": "^1.1.3",
    "react-native-svg": "^12.1.0",
    "react-native-vector-icons": "^7.0.0",
    "react-native-version-check": "^3.4.1",
    "react-native-video": "^5.1.0-alpha8",
    "react-native-webview": "^11.2.1",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.12.0",
    "sib-api-v3-sdk": "^8.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/runtime": "^7.9.6",
    "@react-native-community/eslint-config": "^1.1.0",
    "@testing-library/jest-native": "^3.1.0",
    "@testing-library/react-native": "^5.0.3",
    "babel-jest": "^26.0.1",
    "docz": "^2.3.1",
    "eslint": "^6.8.0",
    "jest": "^26.0.1",
    "jest-fetch-mock": "^3.0.3",
    "jest-react-native": "^18.0.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "mock-async-storage": "^2.2.0",
    "npm-license-crawler": "^0.2.1",
    "prettier": "^2.0.5",
    "react-native-config-node": "^0.0.3",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-react', '@babel/preset-env'],
  plugins: ['react-native-config-node/transform', '@babel/plugin-proposal-class-properties'],
};

Additional notes

The faulty modules both lack any sort of .babelrc source file
I have checked that babel runs properly with this config

Thanks beforehand

ohheyitskartik commented 2 years ago

@Phazoning i am facing the same issue

for adding something in babel for v2 & above you need to use gatsby hooks in gatsby-node.js - https://www.docz.site/docs/powered-by-gatsby

but it still doesn't seem to solve the issue, any update from your side ?

renatobenks commented 2 years ago

are you facing this in react-native as well @ohheyitskartik?