Troubleshooting, workaround bug by configuring a separate loader

msand · Sep 25, 2018 · 70d4198 · 70d4198
1 parent 953e694
commit 70d4198
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 54 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,9 +1,4 @@
 {
-  "presets": ["@babel/preset-flow", "next/babel"],
-  "plugins": [
-    "@babel/plugin-transform-flow-strip-types",
-    "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-proposal-optional-chaining",
-    ["react-native-web", { "commonjs": true }]
-  ]
+  "presets": ["next/babel"],
+  "plugins": [["react-native-web", { "commonjs": true }]]
 }
diff --git a/next.config.js b/next.config.js
@@ -12,7 +12,15 @@ module.exports = {
     });
     config.module.rules.push({
       test: /\.+(js|jsx)$/,
-      loader: defaultLoaders.babel,
+      use: {
+        loader: 'next-babel-loader',
+        options: {
+          presets: ['module:metro-react-native-babel-preset'],
+          plugins: [
+            ['react-native-web', { commonjs: true }],
+          ],
+        },
+      },
       include: [internalNodeModulesRegExp],
     });
     config.resolve.alias = {

diff --git a/package.json b/package.json
@@ -6,10 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@babel/preset-flow": "^7.0.0",
     "babel-plugin-react-native-web": "^0.9.0",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-preset-flow": "^6.23.0",
     "metro-react-native-babel-preset": "^0.46.0",
     "next": "7.0.0",
     "react": "16.5.2",

diff --git a/pages/index.js b/pages/index.js
@@ -50,6 +50,7 @@ const FirstRoute = () => (
     <Text>Test 1</Text>
   </View>
 );
+
 const SecondRoute = () => (
   <View
     style={[
@@ -63,6 +64,8 @@ const SecondRoute = () => (
   </View>
 );
 
+const getLabelText = ({ route: { title } }) => title;
+
 class TabViewExample extends Component {
   state = {
     index: 0,
@@ -71,8 +74,9 @@ class TabViewExample extends Component {
       { key: 'second', title: 'Test 2' },
     ],
   };
-  _renderLabel(scene) {
-    const { position, navigationState, getLabelText } = this;
+
+  renderLabel(scene) {
+    const { position, navigationState } = this;
     const { routes } = navigationState;
     const { route } = scene;
 
@@ -105,32 +109,38 @@ class TabViewExample extends Component {
       </Animated.Text>
     );
   }
+
+  renderTabBar = props => (
+    <TabBar
+      indicatorStyle={styles.indicator}
+      renderLabel={this.renderLabel}
+      tabStyle={styles.tabStyle}
+      style={styles.tabBar}
+      {...props}
+    />
+  );
+
+  sceneMap = SceneMap({
+    first: FirstRoute,
+    second: SecondRoute,
+  });
+
+  onIndexChange = index => this.setState({ index });
+
   render() {
     return (
       <TabView
+        onIndexChange={this.onIndexChange}
+        renderTabBar={this.renderTabBar}
         navigationState={this.state}
-        renderScene={SceneMap({
-          first: FirstRoute,
-          second: SecondRoute,
-        })}
+        renderScene={this.sceneMap}
         style={styles.tabView}
-        renderTabBar={props => (
-          <TabBar
-            {...props}
-            getLabelText={({ route: { title } }) => title}
-            indicatorStyle={styles.indicator}
-            renderLabel={this._renderLabel}
-            tabStyle={styles.tabStyle}
-            style={styles.tabBar}
-          />
-        )}
-        onIndexChange={index => this.setState({ index })}
       />
     );
   }
 }
 
-export default props => (
+export default () => (
   <View style={styles.container}>
     <TabViewExample />
   </View>

diff --git a/yarn.lock b/yarn.lock
@@ -651,13 +651,6 @@
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
 
-"@babel/preset-flow@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2"
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
-
 "@babel/[email protected]":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0"
@@ -1067,32 +1060,15 @@ [email protected]:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-require/-/babel-plugin-react-require-3.0.0.tgz#2e4e7b4496b93a654a1c80042276de4e4eeb20e3"
 
-babel-plugin-syntax-flow@^6.18.0:
-  version "6.18.0"
-  resolved "http://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
-
 [email protected]:
   version "6.18.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
-babel-plugin-transform-flow-strip-types@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
-  dependencies:
-    babel-plugin-syntax-flow "^6.18.0"
-    babel-runtime "^6.22.0"
-
 [email protected]:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.15.tgz#7ba830e77276a0e788cd58ea527b5f70396e12a7"
 
-babel-preset-flow@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
-  dependencies:
-    babel-plugin-transform-flow-strip-types "^6.22.0"
-
-babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies: