Hot reload not working in 0.56.0-rc.1 #70
Comments
|
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 |
birkir
changed the title
|
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 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 Config Filestsconfig.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: 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: 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 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 |
|
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 |
|
I am also getting the same error , did u got any solution for this ? @fbartho |
HMR does not work with [email protected]
The text was updated successfully, but these errors were encountered: