search

flow / flow-for-vscode

Flow for Visual Studio Code
Other
996 stars 111 forks source link

"runtimeArgs" in debugging config, typo? #299

Open ThomasGHenry opened 5 years ago

ThomasGHenry commented 5 years ago

runtimeArgs does not appear to be valid in the vscode launch config. Property runtimeArgs is not allowed.

However... the args property results in an error that says -r is not valid. So, now I don't know what to believe.

    {
      "name": "Debug Android",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "args": ["-r", "babel-register"],
      "platform": "android",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
...

Instructions source: https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode#overview

ThomasGHenry commented 5 years ago

bump

ThomasGHenry commented 5 years ago

: (

noppa commented 5 years ago

I think those instructions were written with a more general "node" type config in mind. I'm not an expert in VSCode's launch configs nor React Native, but it looks like you have a config for the vscode-react-native plugin there and the plugin doesn't accept those arguments.

Do you get it to run if you run it "normally" outside of VSCode?
Have you tried without any kind of args/runtimeArgs property?
Glancing through the plugin's readme, it looks to me like it should "just work" if your Babel/React Native configuration is all right.

ThomasGHenry commented 5 years ago

Thanks! It runs without the args and even attaches to the debugger, but the flow code breakpoints are always unbound/unverified. The untyped code, generated by manually running babel, can use breakpoints, but it's not as useful as being able to set them in the flow typed code. That's one gripe. The other is that I have to manually run babel on every save which touches every files and makes hot/live reloading awkward (instead of just saving the one file and having only that reload). I know that's not caused by the debugger config, but I do wonder whether something else in my config is the cause of both (unless the latter is just expected behavior when using flow).

Thanks for your time!

.babelrc

{
  "plugins": [
    "transform-class-properties",
    [
      "rewrite-require",
      {
        "aliases": {
          "joi": "joi-react-native"
        }
      }
    ]
  ],
  "presets": [
    "react-native",
    "@babel/preset-react",
    "@babel/preset-flow",
    "@babel/preset-env"
  ],
  "retainLines": true
}

.flowconfig

[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js

; Ignore polyfills
.*/Libraries/polyfills/.*

; Ignore metro
.*/node_modules/metro/.*

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/
node_modules/react-native/flow-github/

[options]
emoji=true

esproposal.optional_chaining=enable
esproposal.nullish_coalescing=enable

module.system=haste
module.system.haste.use_name_reducers=true
# get basename
module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
# strip .js or .js.flow suffix
module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
# strip .ios suffix
module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
module.system.haste.paths.blacklist=.*/__tests__/.*
module.system.haste.paths.blacklist=.*/__mocks__/.*
module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*

munge_underscores=true

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.native.js

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

[version]
^0.78.0

package.json

{
  "name": "com.blah.app",
  "version": "1.2",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "react-devtools": "react-devtools",
    "clean": "cd android && ./gradlew clean ; cd ..; watchman watch-del-all && rm -rf $TMPDIR/react-* $TMPDIR/metro* $TMPDIR/haste-* node_modules/ package-lock.json yarn.lock lib && rm -rf ios/build; npm install && react-native link && npm run build && react-native start --reset-cache",
    "ios:beta": "fastlane ios beta",
    "android:beta": "fastlane android beta",
    "build": "babel src/ -d lib/",
    "prepublish": "npm run build",
    "flow": "flow",
    "flow start": "flow start",
    "flow stop": "flow stop",
    "flow status": "flow status",
    "flow coverage": "flow coverage",
    "format": "prettier-eslint \"src/**/*.js\"",
    "format-DANGER": "prettier-eslint --write \"src/**/*.js\""
  },
  "dependencies": {
    "@babel/plugin-check-constants": "^7.0.0-beta.38",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@feathersjs/authentication-client": "^1.0.2",
    "@feathersjs/client": "^3.5.6",
    "@feathersjs/feathers": "^3.1.7",
    "@feathersjs/rest-client": "^1.4.5",
    "@feathersjs/socketio": "^3.2.2",
    "@feathersjs/socketio-client": "^1.1.0",
    "appcenter": "^1.8.1",
    "appcenter-analytics": "^1.8.1",
    "appcenter-crashes": "^1.8.1",
    "code-push": "^2.0.6",
    "core-decorators": "^0.15.0",
    "country-region-data": "^1.4.4",
    "currency-codes": "^1.5.0",
    "joi-react-native": "^2.0.1",
    "jsc-android": "^225067.0.0",
    "lodash": "^4.17.10",
    "mobx": "^3.6.2",
    "mobx-react": "^4.4.3",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "react": "16.6.0-alpha.8af6728",
    "react-native": "^0.57.3",
    "react-native-code-push": "^5.4.2",
    "react-native-device-info": "^0.22.5",
    "react-native-elements": "^0.19.1",
    "react-native-gifted-chat": "0.1.3",
    "react-native-image-crop-picker": "^0.21.2",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-progress": "^3.5.0",
    "react-native-securerandom": "^0.3.0",
    "react-native-swiper": "^1.5.13",
    "react-native-table-component": "^1.2.0",
    "react-native-vector-icons": "^4.0.1",
    "react-navigation": "^2.18.0",
    "request": "^2.88.0",
    "socket.io-client": "^1.7.3",
    "tipsi-stripe": "^6.0.1",
    "util": "^0.11.0",
    "validator": "^10.9.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-do-expressions": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-bind": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/preset-flow": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.4.2",
    "babel-plugin-rewrite-require": "^1.14.5",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react-native": "^5",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "eslint": "^5.7.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "flow-bin": "^0.78.0",
    "jest": "19.0.2",
    "prettier-eslint": "^8.8.2",
    "prettier-eslint-cli": "^4.7.1",
    "react-devtools": "^3.3.2",
    "react-test-renderer": "16.6.0-alpha.8af6728",
    "reactotron-react-native": "^2.1.0",
    "schedule": "^0.4.0"
  },
  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
      "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
      "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js"
    ]
  }
}
marknuzz commented 5 years ago

I was having some trouble with this for a bit too.

Basically what "-r babel-register" is doing is telling the runtime to load the babel-register module right on startup as opposed to loading it from a require directive.

from the node man page:

-r, --require module
              Preload  the  specified module at startup. Follows `require()`'s
              module resolution rules. module may be either a path to a  file,
              or a node module name.

I checked node-modules folder for babel-register and did not find any. However, I did find a folder "register" under the "@babel" folder. So I figure I'll try changing the argument from babel-register to "@babel/register", and that solved my "cannot find module" error. You might try something similar.

You might also edit your .vscode/launchReactNative.js file and add this line: require("@babel/register"); which may provide the same effect you're looking for, without the need of the -r argument. Good luck