From f2c7933e30c520487fe1d4cf797c1da0453c2457 Mon Sep 17 00:00:00 2001 From: Paul Armstrong Date: Thu, 8 Mar 2018 10:30:02 -0800 Subject: [PATCH 1/3] Use babel-plugin-react-native-web instead of webpack alias Fixes necolas/react-native-web#629 --- packages/babel-preset-react-app/index.js | 3 +++ packages/babel-preset-react-app/package.json | 1 + packages/react-scripts/config/webpack.config.dev.js | 4 ---- packages/react-scripts/config/webpack.config.prod.js | 6 +----- packages/react-scripts/scripts/utils/createJestConfig.js | 1 - 5 files changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 6ec10b5a0cd..b7c751e7454 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -84,6 +84,9 @@ module.exports = function(api, opts) { // Experimental macros support. Will be documented after it's had some time // in the wild. require('babel-plugin-macros'), + // Allows correctly aliasing `react-native` to `react-native-web` + // Prevents bundling unused react-native(-web) modules in production + require('babel-plugin-react-native-web'), // Necessary to include regardless of the environment because // in practice some other transforms (such as object-rest-spread) // don't work without it: https://github.com/babel/babel/issues/7215 diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 5e3f3b0a5ff..bf3a8ed15c5 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -26,6 +26,7 @@ "@babel/preset-flow": "7.0.0-beta.38", "@babel/preset-react": "7.0.0-beta.38", "babel-plugin-macros": "2.0.0", + "babel-plugin-react-native-web": "0.5.2", "babel-plugin-transform-dynamic-import": "2.0.0", "babel-plugin-transform-react-remove-prop-types": "0.4.12" } diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 398b8bf53b7..1ba303d428f 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -115,10 +115,6 @@ module.exports = { '@babel/runtime': path.dirname( require.resolve('@babel/runtime/package.json') ), - // @remove-on-eject-end - // Support React Native Web - // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - 'react-native': 'react-native-web', }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d631fc32a3b..14d334799e8 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -122,10 +122,6 @@ module.exports = { '@babel/runtime': path.dirname( require.resolve('@babel/runtime/package.json') ), - // @remove-on-eject-end - // Support React Native Web - // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ - 'react-native': 'react-native-web', }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). @@ -413,7 +409,7 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json', - publicPath: publicPath + publicPath: publicPath, }), // Generate a service worker script that will precache, and keep up to date, // the HTML & assets that are part of the Webpack build. diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 593d17090a7..91846962e8f 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -48,7 +48,6 @@ module.exports = (resolve, rootDir, srcRoots) => { '^.+\\.module\\.css$', ], moduleNameMapper: { - '^react-native$': 'react-native-web', '^.+\\.module\\.css$': 'identity-obj-proxy', }, moduleFileExtensions: [ From f40e9c543df29a03125e8e28c37f463407e903d0 Mon Sep 17 00:00:00 2001 From: Paul Armstrong Date: Thu, 8 Mar 2018 10:59:40 -0800 Subject: [PATCH 2/3] Fix remove-on-eject-end comments --- packages/react-scripts/config/webpack.config.dev.js | 1 + packages/react-scripts/config/webpack.config.prod.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 1ba303d428f..1d688003eac 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -115,6 +115,7 @@ module.exports = { '@babel/runtime': path.dirname( require.resolve('@babel/runtime/package.json') ), + // @remove-on-eject-end }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 14d334799e8..659701907b8 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -122,6 +122,7 @@ module.exports = { '@babel/runtime': path.dirname( require.resolve('@babel/runtime/package.json') ), + // @remove-on-eject-end }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). From 6a1d05f1f2fd31edda617ed27fff98168785191b Mon Sep 17 00:00:00 2001 From: Paul Armstrong Date: Thu, 8 Mar 2018 13:10:14 -0800 Subject: [PATCH 3/3] Revert changes to webpack aliases --- packages/react-scripts/config/webpack.config.dev.js | 3 +++ packages/react-scripts/config/webpack.config.prod.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 1d688003eac..398b8bf53b7 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -116,6 +116,9 @@ module.exports = { require.resolve('@babel/runtime/package.json') ), // @remove-on-eject-end + // Support React Native Web + // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ + 'react-native': 'react-native-web', }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/). diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 659701907b8..06d23756023 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -123,6 +123,9 @@ module.exports = { require.resolve('@babel/runtime/package.json') ), // @remove-on-eject-end + // Support React Native Web + // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ + 'react-native': 'react-native-web', }, plugins: [ // Prevents users from importing files from outside of src/ (or node_modules/).