upgrading my react-native-web project. webpack dependencies - reactjs

Question

I have recently updated my react-native-web project to use a more recent react native version to use a more recent expo version.
with the help of npm I have now a fully functional updated code running on ios and android.
However I have still difficulties running it on webpack with different problems related (to the best of my understanding) to a webpack that needs to be updated as well to a higher version (2 -> 3or4).
in this process I have found difficulties matching the right webpack version to the right dev-server and cli.
here is my package.json
"devDependencies": {
"babel-loader": "^7.1.2",
"babel-plugin-expo-web": "^0.0.5",
"babel-plugin-react-native-web": "0.9.9",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-imports": "1.4.1",
"babel-plugin-transform-runtime": "6.23.0",
"css-loader": "0.28.7",
"docz": "^0.12.16",
"eslint-plugin-react": "^7.10.0",
"file-loader": "^1.1.7",
"gh-pages": "^1.2.0",
"jest-expo": "^30.0.0",
"react-native-scripts": "^2.0.1",
"react-styleguidist": "^8.0.6",
"react-test-renderer": "16.4.1",
"style-loader": "^0.19.0",
"sw-precache-webpack-plugin": "^0.11.5",
"webpack-cli": "^3.1.2",
"webpack-manifest-plugin": "^2.0.4"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry-web.js",
"scripts": {
"start": "expo start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest",
"clean": "rm -rf node_modules && yarn cache clean && npm cache clean --force",
"make": "yarn",
"docu:dev": "docz dev",
"docu:build": "docz build",
"web": "webpack-dev-server -d --config ./webpack.config.js --env dev --inline --hot --colors --content-base app/ --history-api-fallback",
"build:dev": "NODE_ENV=production webpack --env dev --config ./webpack.config.js",
"build:prod": "NODE_ENV=production webpack --env prod --config ./webpack.config.js"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#sentry/browser": "^4.4.1",
"#sentry/cli": "^1.31.0",
"audit": "0.0.6",
"babel-plugin-transform-remove-console": "^6.9.4",
"es6-symbol": "^3.1.1",
"expo": "^30.0.0",
"expo-analytics": "1.0.7",
"expo-firebase-crashlytics": "1.0.0",
"expo-web": "0.0.14",
"firebase": "^5.0.4",
"jsc-android": "^224109.1.0",
"mobx": "4",
"mobx-react": "5.1.0",
"npm": "^6.5.0",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "16.5.1",
"react-art": "16.5.1",
"react-css-blur": "^1.1.1",
"react-dom": "^16.5.1",
"react-markdown": "^4.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
"react-native-blur": "^3.2.2",
"react-native-camera-roll-picker": "^1.2.3",
"react-native-dialog": "^5.4.0",
"react-native-simple-markdown": "^1.1.0",
"react-native-web": "0.9.0",
"react-native-web-svg": "1.0.0",
"react-navigation": "~2.3.1",
"sentry-expo": "^1.11.0",
"sweetalert": "2.1.2",
"uglifyjs-webpack-plugin": "1",
"webpack": "^4.0.0",
"webpack-dev-server": "^3.1.10",
"ws": "^6.0.0"
}
And now I would like to know and understand what I should change web-wise to make my yarn run web script work again, basically.
//web/webpack.config.js
const path = require("path");
const webpack = require("webpack");
const appDirectory = path.resolve(__dirname, "./");
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// 'node_module'.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, "src"),
path.resolve(appDirectory, "node_modules/react-navigation"),
path.resolve(appDirectory, "node_modules/react-native-tab-view"),
path.resolve(appDirectory, "node_modules/react-native-paper"),
path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
path.resolve(appDirectory, "node_modules/react-native-safe-area-view"),
path.resolve(appDirectory, "node_modules/#expo/samples"),
path.resolve(appDirectory, "node_modules/#expo/vector-icons"),
path.resolve(appDirectory, "node_modules/react-native-platform-touchable"),
],
use: {
loader: "babel-loader",
options: {
// cacheDirectory: false,
babelrc: false,
sourceMaps: true,
// minimize: false,
// Babel configuration (or use .babelrc)
// This aliases 'react-native' to 'react-native-web' and includes only
// the modules needed by the app.
plugins: [
"expo-web",
"react-native-web",
"transform-decorators-legacy",
["transform-runtime", { helpers: true, polyfill: true, regenerator: true }],
],
// The 'react-native' preset is recommended to match React Native's packager
presets: ["react-native"],
},
},
};
// This is needed for loading css
const cssLoaderConfiguration = {
test: /\.css$/,
use: ["style-loader", "css-loader"],
};
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
},
},
};
const ttfLoaderConfiguration = {
test: /\.ttf$/,
use: [
{
loader: "file-loader",
options: {
name: "./fonts/[hash].[ext]",
},
},
],
include: [
path.resolve(appDirectory, "./src/assets/fonts"),
path.resolve(appDirectory, "node_modules/react-native-vector-icons"),
],
};
module.exports = {
// your web-specific entry file
entry: path.resolve(appDirectory, "src/index.js"),
devtool: "#eval-source-map",
// mode: 'development',
// configures where the build ends up
output: {
filename: "bundle.js",
publicPath: "/assets/",
path: path.resolve(appDirectory, "./app/assets"),
},
module: {
rules: [
babelLoaderConfiguration,
cssLoaderConfiguration,
imageLoaderConfiguration,
ttfLoaderConfiguration,
],
},
plugins: [
// process.env.NODE_ENV === 'production' must be true for production
// builds to eliminate development checks and reduce build size. You may
// wish to include additional optimizations.
// https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/206#issuecomment-358015555
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "development"), //JSON.stringify("production")
__DEV__: process.env.NODE_ENV === "production" || true,
}),
],
resolve: {
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// '.web.js'.
symlinks: false,
extensions: [".web.js", ".js", ".json"],
alias: {
"./assets/images/expo-icon.png": "./assets/images/expo-icon#2x.png",
"./assets/images/slack-icon.png": "./assets/images/slack-icon#2x.png",
"#expo/vector-icons": "expo-web",
expo: "expo-web",
"react-native$": "react-native-web",
'react-native-svg$': 'react-native-web-svg',
"babel-runtime/regenerator": require.resolve("babel-runtime/regenerator"),
},
},
};
Thanks to all.