Use babel-plugin-react-native-web instead of webpack alias

Fixes necolas/react-native-web#629
paularmstrong · Mar 17, 2018 · f2c7933 · f2c7933
1 parent 1e52f25
commit f2c7933
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -48,7 +48,6 @@ module.exports = (resolve, rootDir, srcRoots) => {
       '^.+\\.module\\.css$',
     ],
     moduleNameMapper: {
-      '^react-native$': 'react-native-web',
       '^.+\\.module\\.css$': 'identity-obj-proxy',
     },
     moduleFileExtensions: [