From c59bd25826379dbcaff507c54daf2d3992a77d85 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 29 Apr 2019 14:12:19 +0200 Subject: [PATCH 1/6] Revert "Revert "fix(gatsby): fixes react-hot-reloader for new react features" (#13705)" This reverts commit 0d78d71168c290039ff2b473f451bd85f217c884. --- packages/gatsby/src/utils/webpack.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 4700ddcdbb24b..dc3aca862903f 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -275,6 +275,16 @@ module.exports = async ( }, ]) + // RHL will patch React, replace React-DOM by React-🔥-DOM and work with fiber directly + // It's necessary to remove the warning in console (https://github.com/gatsbyjs/gatsby/issues/11934) + configRules.push({ + include: /node_modules/, + test: /\.jsx?$/, + use: { + loader: `react-hot-loader/webpack`, + }, + }) + break } case `build-html`: From 1ea818ecfa7f8a21c27f6a7e8e98c67d2a677729 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 29 Apr 2019 14:15:08 +0200 Subject: [PATCH 2/6] upgrade react-hot-loader --- packages/gatsby/package.json | 2 +- yarn.lock | 29 ++++++++++++++++++----------- 2 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 90a162d491004..7bfeded6b28f6 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -107,7 +107,7 @@ "raw-loader": "^0.5.1", "react-dev-utils": "^4.2.1", "react-error-overlay": "^3.0.0", - "react-hot-loader": "^4.6.2", + "react-hot-loader": "^4.8.4", "redux": "^4.0.0", "semver": "^5.6.0", "shallow-compare": "^1.2.2", diff --git a/yarn.lock b/yarn.lock index 571c8d0f3172f..f97c948622e16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10865,10 +10865,12 @@ hoek@4.x.x: resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb" integrity sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== -hoist-non-react-statics@^2.5.0: - version "2.5.5" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" - integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== +hoist-non-react-statics@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" + integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== + dependencies: + react-is "^16.7.0" home-or-tmp@^2.0.0: version "2.0.0" @@ -13919,7 +13921,7 @@ lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= -lodash.merge@^4.6.0, lodash.merge@^4.6.1: +lodash.merge@^4.6.0: version "4.6.1" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54" integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ== @@ -17437,21 +17439,26 @@ react-error-overlay@^3.0.0: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" integrity sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw== -react-hot-loader@^4.6.2: - version "4.6.2" - resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.6.2.tgz#9844b76a7bf4b6fdd45dd91f7e757ddf3aad5289" - integrity sha512-9XxH/t9jblu4vUDgxHcMLwvm4aOhaoxazzTP9vwjTVzOgU987T4rDYA85XrlmbDan9WkD+h/iVHOK8F8UnQsDg== +react-hot-loader@^4.8.4: + version "4.8.4" + resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.8.4.tgz#357ba342e367fd42d6a870a9c0601c23fa0730c6" + integrity sha512-O98btZXcm24ZgP+aPBD0W9N+GEnkOg6vlLEy/IMZ53u3K/dGqO0I/RU4qrmQzE+wMDLpwNo5TwxaAjVw9Y+IBA== dependencies: fast-levenshtein "^2.0.6" global "^4.3.0" - hoist-non-react-statics "^2.5.0" + hoist-non-react-statics "^3.3.0" loader-utils "^1.1.0" - lodash.merge "^4.6.1" + lodash "^4.17.11" prop-types "^15.6.1" react-lifecycles-compat "^3.0.4" shallowequal "^1.0.2" source-map "^0.7.3" +react-is@^16.7.0: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" + integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" From 5053f3831a0f35e27a010d9fdc1d426eff8042fa Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 29 Apr 2019 16:08:22 +0200 Subject: [PATCH 3/6] fix(gatsby): fix hot-reloading for hooks (patch hmr) --- packages/gatsby/src/utils/webpack-hmr-hooks-patch.js | 6 ++++++ packages/gatsby/src/utils/webpack.config.js | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 packages/gatsby/src/utils/webpack-hmr-hooks-patch.js diff --git a/packages/gatsby/src/utils/webpack-hmr-hooks-patch.js b/packages/gatsby/src/utils/webpack-hmr-hooks-patch.js new file mode 100644 index 0000000000000..169718284d486 --- /dev/null +++ b/packages/gatsby/src/utils/webpack-hmr-hooks-patch.js @@ -0,0 +1,6 @@ +const originalFetch = global.fetch +delete global.fetch + +module.exports = require(`react-hot-loader/webpack`) + +global.fetch = originalFetch diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index dc3aca862903f..8968e1afb5942 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -281,7 +281,7 @@ module.exports = async ( include: /node_modules/, test: /\.jsx?$/, use: { - loader: `react-hot-loader/webpack`, + loader: require.resolve(`./webpack-hmr-hooks-patch`), }, }) From 16af033fc10d75821cfe89953f9cac1f450d4271 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 29 Apr 2019 16:36:23 +0200 Subject: [PATCH 4/6] update e2e test to check hmr --- e2e-tests/development-runtime/gatsby-config.js | 2 ++ packages/gatsby/src/utils/webpack.config.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/e2e-tests/development-runtime/gatsby-config.js b/e2e-tests/development-runtime/gatsby-config.js index bdc16cdbf1f65..111e0b6544ac5 100644 --- a/e2e-tests/development-runtime/gatsby-config.js +++ b/e2e-tests/development-runtime/gatsby-config.js @@ -1,3 +1,5 @@ +require(`isomorphic-fetch`) + module.exports = { siteMetadata: { title: `Gatsby Default Starter`, diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index 8968e1afb5942..dc3aca862903f 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -281,7 +281,7 @@ module.exports = async ( include: /node_modules/, test: /\.jsx?$/, use: { - loader: require.resolve(`./webpack-hmr-hooks-patch`), + loader: `react-hot-loader/webpack`, }, }) From a21789f2c046101260c7643abe10af7140a91847 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 29 Apr 2019 17:02:07 +0200 Subject: [PATCH 5/6] apply hooks patch to e2e-test --- packages/gatsby/src/utils/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index dc3aca862903f..8968e1afb5942 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -281,7 +281,7 @@ module.exports = async ( include: /node_modules/, test: /\.jsx?$/, use: { - loader: `react-hot-loader/webpack`, + loader: require.resolve(`./webpack-hmr-hooks-patch`), }, }) From 2bbc8cb64629387315f05ade0e1c1ae1f43dd516 Mon Sep 17 00:00:00 2001 From: Ward Peeters Date: Mon, 29 Apr 2019 19:41:52 +0200 Subject: [PATCH 6/6] add comments on why isomorphic-fetch was added --- e2e-tests/development-runtime/gatsby-config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/e2e-tests/development-runtime/gatsby-config.js b/e2e-tests/development-runtime/gatsby-config.js index 111e0b6544ac5..6fefd4aaed7ff 100644 --- a/e2e-tests/development-runtime/gatsby-config.js +++ b/e2e-tests/development-runtime/gatsby-config.js @@ -1,3 +1,6 @@ +// isomorphic-fetch sets global.fetch which seems to conflicts with source-map@<0.8.0 where it does a +// simple browser check if (global.fetch) which is true when isomorphic-fetch is used. This creates an +// exception in react-hot-loader. @see https://github.com/gatsbyjs/gatsby/pull/13713 require(`isomorphic-fetch`) module.exports = {