Hot reload not working in 0.56.0-rc.1

[birkir]

HMR does not work with react-native@0.56.0-rc.1

[ds300]

Thansk for the report! Can you post your tsconfig file?

[birkir]

Yessir

{
  "compilerOptions": {
    "target": "es2015",
    "jsx": "react",
    "baseUrl": "./src",
    "noEmit": true,
    "noImplicitAny": false,
    "strictNullChecks": false,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

Diff:

diff --git a/.babelrc b/.babelrc
index 08a4f73..5ed5558 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,6 +1,6 @@
 {
   "presets": [
-    "react-native-stage-0/decorator-support"
+    "react-native"
   ],
   "plugins": [
     [
diff --git a/package.json b/package.json
index b2a30b8..3f07026 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "mobx-state-tree": "2.0.5",
     "prop-types": "15.6.1",
     "react": "16.4.0",
-    "react-native": "0.55.4",
+    "react-native": "0.56.0-rc.1",
     "react-native-blur": "3.2.2",
     "react-native-cheerio": "1.0.0-rc.4",
     "react-native-code-push": "5.3.4",
@@ -81,7 +81,7 @@
     "babel-eslint": "8.2.3",
     "babel-jest": "23.0.1",
     "babel-plugin-module-resolver": "3.1.1",
-    "babel-preset-react-native": "4.0.0",
+    "babel-preset-react-native": "5.0.1",
     "babel-preset-react-native-stage-0": "1.0.1",
     "css-to-react-native-transform": "1.6.0",
     "detox": "7.4.0",

I am trying to gather as much info as I can to help resolve the problem.

They seem to have moved hmrConfig to a separate file so I can't see the diff https://github.com/facebook/metro/blob/master/packages/metro/src/hmrConfig.js

[ds300]

Awesome, thanks!

As a first step, can you try this:

 {
   "compilerOptions": {
     "target": "es2015",
+    "module": "es2015",
     "jsx": "react",
     "baseUrl": "./src",
     "noEmit": true,
     "noImplicitAny": false,
     "strictNullChecks": false,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "sourceMap": true
   },
   "exclude": [
     "node_modules"
   ]
 }

[birkir]

Thanks for the quick reply, setting the module property to es2015 didn't work for me. Also tried jsx from react to react-native without any luck.

Also to be clear, in my instance, the iOS app gets the update when I log:

if (module.hot) {
  module.hot.accept(() => {
    console.log('Got update');
  });
}

But it doesn't get applied

[ds300]

Hmm looks like they added a plugins field to the transform props

https://github.com/facebook/metro/blob/d894a24f4352004df73be6c9ed24f4de7d4da341/packages/metro/src/reactNativeTransformer.js#L154

Maybe passing that along will help.

(I'll try this out later)

[fbartho]

I too am suffering from this, though a bit worse; it doesn't even get as far as reported by @birkir.

I'm trying the released react-native 0.56

Config Files

tsconfig.json ```json { "include": ["./src/**/*"], "exclude": ["dist/", "node_modules/"], "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist/", "jsx": "react", "reactNamespace": "RX", "moduleResolution": "node", "rootDir": ".", "baseUrl": "", "paths": { "*": ["*", "node_modules/*", "*.ios", "*.android", "*.web"] }, "importHelpers": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "pretty": true, "sourceMap": true, "types": ["react", "react-native", "jest"], "noLib": false, "preserveConstEnums": true, "suppressImplicitAnyIndexErrors": true, "allowJs": true, "allowSyntheticDefaultImports": false, "allowUnreachableCode": false, "allowUnusedLabels": false, "declaration": false, "strict": true, "strictNullChecks": false, "strictFunctionTypes": true, "skipLibCheck": true, "noResolve": false, "noImplicitAny": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitUseStrict": false, "noFallthroughCasesInSwitch": true, "lib": [ "es5", "es6", "es2015", "es7", "es2016", "es2017", "es2018", "esnext", "dom", "dom.iterable", "es2015.core", "es2015.collection", "es2015.generator", "es2015.iterable", "es2015.promise", "es2015.proxy", "es2015.reflect", "es2015.symbol", "es2015.symbol.wellknown", "es2016.array.include", "es2017.object", "es2017.sharedmemory", "es2017.string", "es2017.intl", "es2018.intl", "es2018.promise", "es2018.regexp", "esnext.asynciterable" ] }, "awesomeTypescriptLoaderOptions": { "useCache": false, "useBabel": true } } ``` .babelrc ```json { "comments": false, "ignore": ["node_modules/(?!react-navigation)"], "presets": ["react-native"], "plugins": [ "transform-flow-strip-types", ["react-intl", { "messagesDir": "./lang/messages/" }] ], "env": { "production": { "plugins": [ "transform-flow-strip-types", ["react-intl", { "messagesDir": "./lang/messages/" }], ["transform-remove-console", { "exclude": ["error"] }] ] } }, "sourceMaps": "inline" } ``` I also tried adding: `"@babel/plugin-proposal-object-rest-spread",` to plugins. rn-cli.config.js ```javascript const path = require("path"); module.exports = { getPlatforms() { return ["android", "ios", "web"]; }, getProjectRoots() { return [__dirname, __dirname + "/src/resources/"]; }, getTransformModulePath() { return require.resolve("react-native-typescript-transformer"); }, getSourceExts() { return ["ts", "tsx"]; }, getAssetRoots() { return ["dist/", "src/resources/"]; }, }; ``` package.json dependencies ```json { "devDependencies": { "@babel/cli": "^7.0.0-beta.52", "@babel/core": "^7.0.0-beta.52", "@babel/plugin-transform-flow-strip-types": "^7.0.0-beta.52", "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.52", "@babel/preset-env": "^7.0.0-beta.52", "@babel/preset-typescript": "^7.0.0-beta.52", "@types/jest": "23.x", "@types/react-test-renderer": "16.0.x", "apollo-codegen": "0.20.x", "argparse": "1.0.x", "awesome-typescript-loader": "*", "babel-loader": "^8.0.0-beta", "babel-plugin-react-intl": "2.4.0", "babel-plugin-transform-remove-console": "6.9.x", "babel-preset-react-native": "5.x", "bezier": "*", "codecov": "3.x", "concurrently": "*", "eslint": "*", "eslint-config-prettier": "*", "eslint-plugin-prettier": "*", "eslint-plugin-react": "*", "eslint-plugin-react-native": "*", "file-loader": "*", "jest": "23.x", "jest-fetch-mock": "1.6.x", "jest-react-native": "18.0.x", "lodash": "4.17.x", "markdown-table": "*", "node-fetch": "2.x", "pascal-case": "*", "prettier": "1.13.x", "react-addons-test-utils": "15.x", "react-native-typescript-transformer": "1.2.x", "react-test-renderer": "16.x", "replace-in-file": "3.x", "snake-case": "*", "source-map-loader": "0.2.x", "ts-jest": "22.x", "ts-node": "*", "tslint": "*", "tslint-config-prettier": "*", "tslint-consistent-codestyle": "*", "tslint-eslint-rules": "*", "tslint-plugin-prettier": "*", "tslint-react": "*", "typescript": "2.9.x", "webpack": "3.10.x", "xcode": "1.x" }, "dependencies": { "@types/argparse": "1.0.x", "@types/card-validator": "*", "@types/credit-card-type": "*", "@types/graphql": "0.13.x", "@types/named-regexp-groups": "1.0.x", "@types/node": "*", "@types/prop-types": "15.5.x", "@types/react-intl": "2.3.x", "@types/react-native": "0.55.x", "@types/react-native-fbsdk": "0.6.x", "@types/react-native-google-signin": "0.12.x", "@types/react-navigation": "2.x", "@types/webpack": "3.8.x", "abortcontroller-polyfill": "1.1.x", "apollo-cache-inmemory": "1.2.x", "apollo-client": "2.3.x", "apollo-link": "1.2.x", "apollo-link-context": "1.0.x", "apollo-link-error": "1.1.x", "apollo-link-http": "1.5.x", "apollo-link-rest": "0.3.x", "apollo-link-retry": "2.2.x", "apollo-link-state": "0.4.x", "bugsnag-react-native": "2.9.x", "card-validator": "5.0.x", "danger": "3.x", "danger-plugin-jest": "1.x", "fetch-headers": "2.0.x", "graphql": "0.13.x", "graphql-anywhere": "4.x", "graphql-tag": "2.9.x", "hoist-non-react-statics": "2.5.x", "intl": "1.2.x", "md5": "*", "moment": "2.22.x", "named-regexp-groups": "^1.0.3-1", "prop-types": "15.6.x", "qs": "6.5.x", "react": "16.4.x", "react-apollo": "2.1.x", "react-dom": "16.4.x", "react-intl": "2.4.*", "react-intl-native": "2.1.*", "react-native": "0.56.x", "react-native-fbsdk": "0.7.x", "react-native-gifted-chat": "github:FaridSafi/react-native-gifted-chat#master", "react-native-google-signin": "0.12.x", "react-native-image-crop-picker": "0.20.x", "react-native-invertible-scroll-view": "1.1.x", "react-native-keychain": "3.0.0-rc.3", "react-native-schemes-manager": "1.0.*", "react-navigation": "2.5.x", "react-navigation-tabs": "0.5.x", "reactxp": "^1.3.0-rc.0", "resub": "1.0.x", "shallowequal": "*", "synctasks": "0.3.x", "tslib": "1.x", "type-zoo": "2.x" }, } ```

I'm getting nearly unending repeats of this:

transform[stderr]: Trace: The node type SpreadProperty has been renamed to SpreadElement
transform[stderr]:     at Object.isSpreadProperty (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/types/lib/validators/generated/index.js:4080:11)
transform[stderr]:     at hasSpread (/Users/fbarthelemy/Code/TRClient/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:38:13)
transform[stderr]:     at PluginPass.ObjectExpression (/Users/fbarthelemy/Code/TRClient/node_modules/babel-plugin-transform-object-rest-spread/lib/index.js:234:14)
transform[stderr]:     at newFn (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/traverse/lib/visitors.js:237:21)
transform[stderr]:     at NodePath._call (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/traverse/lib/path/context.js:65:20)
transform[stderr]:     at NodePath.call (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/traverse/lib/path/context.js:40:17)
transform[stderr]:     at NodePath.visit (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/traverse/lib/path/context.js:100:12)
transform[stderr]:     at TraversalContext.visitQueue (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/traverse/lib/context.js:142:16)
transform[stderr]:     at TraversalContext.visitSingle (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/traverse/lib/context.js:102:19)
transform[stderr]:     at TraversalContext.visit (/Users/fbarthelemy/Code/TRClient/node_modules/@babel/traverse/lib/context.js:182:19)

I know that's not the most terse of reproduction details, but I'm happy to try out whatever to get us into shape.

[iRoachie]

You can just upgrade to 0.56, i have no issues with hot reloading on the actual release

[fbartho]

@iRoachie would you mind sending me the general outline of your tsconfig, .babelrc, and Rn-cli.config files? I’d love to see the config for a working typescript with Rn 56. I’m not sure what I did wrong, above.

[iRoachie]

tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "jsx": "react-native",
    "noEmit": true,
    "moduleResolution": "node",
    "strictPropertyInitialization": false,
    "skipLibCheck": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "noUnusedLocals": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedParameters": true,
    "paths": {
      "@components": ["components"],
      "@config": ["config"],
      "@pages": ["pages"],
      "@types": ["types"],
      "@util": ["util"],
      "@actions": ["actions"],
      "@reducers": ["reducers"]
    },
    "lib": ["es2017", "dom"]
  },
  "exclude": ["node_modules"]
}

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "cwd": "babelrc",
        "alias": {
          "@components": "./src/components",
          "@config": "./src/config",
          "@pages": "./src/pages",
          "@types": "./src/types",
          "@util": "./src/util",
          "@actions": "./src/actions",
          "@reducers": "./src/reducers"
        }
      }
    ]
  ]
}

rn-cli.config.js

const blacklist = require('metro/src/blacklist')

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer')
  },
  getSourceExts() {
    return ['ts', 'tsx']
  },
  getBlacklistRE() {
    return blacklist([/react-native\/local-cli\/core\/__fixtures__.*/])
  },
}

[fbartho]

@iRoachie Oh! I didn't know anything about the 'metro/src/blacklist' module.

For that matter, I didn't know about babelrc's alias mode either. Both of those are very neat!

I'm going to try the blacklist, maybe that's key to avoiding compiling things wrong for us.

[birkir]

Thanks for the update, will try and reporter back.

[tonypee]

seems this might be the issue.. not sure how to fix

https://github.com/babel/babel/issues/7318

(On upgrading to 0.56, I also have the error: The node type SpreadProperty has been renamed to SpreadElement)

[dengue8830]

someone have a working package.json (or shared project) for rn 0.56 or 0.57? im trying to upgrade but always fails for one o another reason

[iRoachie]

@dengue8830 https://github.com/iRoachie/channel-app

[birkir]

There is typescript support shipped with RN 56/57, HMR works fine.

[iRoachie]

@birkir You should know that it doesn't actually run your typescript through the typescript compiler, it only removes your types, similar to how it treats flow files.

[marcelkalveram]

I had to update react-native-typescript-transformer from 1.2.5 to version 1.2.10. This line in particular seems to resolve the issue: https://github.com/ds300/react-native-typescript-transformer/blob/master/index.js#L20

[shukla12manish]

I am also getting the same error , did u got any solution for this ? @fbartho react-native-cli: 2.0.1 react-native: 0.57.1 node: v8.11.3 npm: 5.6.0