Update to support Webpack 5

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["es2015"],
+  "presets": ["@babel/preset-env"],
   "plugins": []
 }

example/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

example/package.json

@@ -6,25 +6,32 @@
   "main": "index.js",
   "scripts": {
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "dev": "webpack-dev-server --port 3000 --config web/webpack.config.js --inline --hot --colors --quiet"
+    "dev": "webpack serve --mode=development --config ./web/webpack.config.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
-    "react-native": "0.39.2",
-    "react-native-config": "0.2.5",
-    "react-native-web": "0.0.71",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "0.63.4",
+    "react-native-config": "1.4.2",
+    "react-native-web": "0.14.13",
     "react-web-config": "../"
   },
   "devDependencies": {
-    "babel-cli": "^6.14.0",
-    "babel-core": "^6.14.0",
-    "babel-loader": "^6.2.5",
-    "babel-preset-react-native": "^1.0.0",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1"
+    "@babel/cli": "^7.13.0",
+    "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/preset-env": "^7.13.9",
+    "@babel/preset-flow": "^7.12.13",
+    "@babel/preset-react": "^7.12.13",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-react-native-web": "0.14.13",
+    "babel-preset-react-native": "^4.0.1",
+    "webpack": "^5.24.3",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

example/src/App/App.js

@@ -1,21 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
 import Config from 'react-native-config'
 
-class App extends Component {
-  render() {
-    return (
-      <View style={Style.container}>
-        <Text style={Style.title}>react-web-config</Text>
-        <Text style={Style.desc}>Platform: {Platform.OS}</Text>
-        {
-          Object.keys(Config).map(key => (
-              <Text key={key} style={Style.desc}>{key}: {Config[key]}</Text>
-          ))
-        }
-      </View>
-    );
-  }
+const App = () => {
+  return (
+    <View style={Style.container}>
+      <Text style={Style.title}>react-web-config</Text>
+      <Text style={Style.desc}>Platform: {Platform.OS}</Text>
+      {
+        Object.keys(Config).map(key => (
+            <Text key={key} style={Style.desc}>{key}: {Config[key]}</Text>
+        ))
+      }
+    </View>
+  );
 }
 
 const Style = StyleSheet.create({

example/web/webpack.config.js

@@ -1,33 +1,54 @@
 const path = require('path');
-const webpack = require('webpack');
 const ReactWebConfig = require('react-web-config/lib/ReactWebConfig').ReactWebConfig;
 
 console.log(path.resolve(__dirname, '../.env'))
 
+const babelLoaderConfig = {
+  test: /\.js$/,
+  exclude: /node_modules/,
+  use: {
+    loader: 'babel-loader',
+    options: {
+      presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+      plugins: [
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-proposal-object-rest-spread',
+      ],
+    }
+  },
+}
+
+const compileReactNativeLibs = {
+  test: /\.js$/,
+  include: /node_modules\/react-native-/,
+  use: {
+    loader: 'babel-loader',
+    options: {
+      presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+      plugins: [
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-proposal-object-rest-spread',
+      ],
+      cacheDirectory: true
+    }
+  },
+}
+
 module.exports = {
   devServer: {
-    contentBase: path.join(__dirname, 'src')
+    historyApiFallback: true,
+    contentBase: path.join(__dirname, 'src'),
+    hot: true,
+    port: 3000
   },
   entry: [
     path.join(__dirname, '../index.web.js')
   ],
   module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loaders: [
-          'babel-loader'
-        ]
-      },
-      {
-        // Most react-native libraries include uncompiled ES6 JS.
-        test: /\.js$/,
-        include: /node_modules\/react-native-/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      }
-    ]
+    rules: [
+      babelLoaderConfig,
+      compileReactNativeLibs
+    ],
   },
   output: {
     filename: 'bundle.js'
@@ -38,7 +59,8 @@ module.exports = {
   resolve: {
     alias: {
       'react-native-config': 'react-web-config',
-      'react-native': 'react-native-web'
-    }
+      'react-native$': 'react-native-web'
+    },
+    extensions: [ '.web.js', '.js' ]
   }
 };

lib/ReactWebConfig.js

@@ -1,21 +1,23 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactWebConfig = undefined;
+exports.ReactWebConfig = void 0;
 
-var _webpack = require('webpack');
+var _webpack = _interopRequireDefault(require("webpack"));
 
-var _webpack2 = _interopRequireDefault(_webpack);
+var _dotenv = require("dotenv");
 
-var _dotenv = require('dotenv');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ReactWebConfig = exports.ReactWebConfig = function ReactWebConfig(path) {
-  var env = (0, _dotenv.config)({ path: path }).parsed;
-  return new _webpack2.default.DefinePlugin({
+var ReactWebConfig = function ReactWebConfig(path) {
+  var env = (0, _dotenv.config)({
+    path: path
+  }).parsed;
+  return new _webpack["default"].DefinePlugin({
     '__REACT_WEB_CONFIG__': JSON.stringify(env)
   });
-};
+};
+
+exports.ReactWebConfig = ReactWebConfig;