Hot reload not working in 0.56.0-rc.1
birkir opened this issue · 18 comments
HMR does not work with react-native@0.56.0-rc.1
Thansk for the report! Can you post your tsconfig file?
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
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"
]
}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
Hmm looks like they added a plugins field to the transform props
Maybe passing that along will help.
(I'll try this out later)
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
{
"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
{
"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
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
{ "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.
You can just upgrade to 0.56, i have no issues with hot reloading on the actual release
@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.
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__.*/])
},
}@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.
Thanks for the update, will try and reporter back.
seems this might be the issue.. not sure how to fix
(On upgrading to 0.56, I also have the error: The node type SpreadProperty has been renamed to SpreadElement)
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
There is typescript support shipped with RN 56/57, HMR works fine.
@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.
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
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