My web app built with react doesn't run on safari browser - ios

Question

I've built and pushed my minified code to a site to test on various devices and it works on windows desktop, various android devices that I've tested with but when I go to iOS devices my code doesn't run and displays like this. (I realize now that every browser on iOS is basically safari and that this is a safari issue)
Here's the link for the isolated code if you want to load it up on your own
https://app.gohighlevel.com/v2/preview/6fAe9cXYdS11V8TSUgIL?notrack=true
I thought maybe I need to change my babelrc to include more devices but I feel like it has something to do with my overall webpack build config I'm just at a loss as to why.
Here are what my configs look like
webpack.config.common.js
const paths = require('./paths');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const imageInlineSizeLimit = parseInt(
process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
);
module.exports = {
entry: ['core-js/stable', 'regenerator-runtime/runtime', paths.appIndexJs],
output: {
filename: '[name].[contenthash].js',
path: paths.appBuild,
publicPath: './'
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx', 'scss']
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebPackPlugin({
filename: 'index.html',
inject: true,
template: paths.appHtml
}),
new ESLintPlugin({
formatter: eslintFormatter,
eslintPath: 'eslint',
resolvePluginsRelativeTo: __dirname
})
],
module: {
rules: [
{
test: /\.(js|ts)x?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
loader: require.resolve('file-loader'),
exclude: [/\.(js|mjs|jsx|ts|tsx|scss)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
]
}
}
webpack.config.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const TerserPlugin = require('terser-webpack-plugin');
//const postcssNormalize = require('postcss-normalize');
const commonConfig= require('./webpack.config.common');
const { merge } = require('webpack-merge');
module.exports = merge(commonConfig, {
mode: 'production',
devtool: 'source-map',
output: {
publicPath: './'
},
module: {
rules: [
{
test:/\.(scss|sass)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: {
getLocalIdent: getCSSModuleLocalIdent
}
}
},
'resolve-url-loader',
'sass-loader'
],
sideEffects: true
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
})
],
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
map: {
inline: false,
annotation: true
}
}
}),
new TerserPlugin({
terserOptions: {
sourceMap: true
},
parallel: true
})
],
}
})
babelrc
{
"presets": [
"#babel/preset-typescript",
[
"#babel/preset-env",
{
"targets": {
"browsers": [
"> 0.1%",
"ios >= 6"
]
},
"useBuiltIns": "usage",
"corejs": 3
}
],
"#babel/preset-react"
],
"plugins": [
"react-hot-loader/babel",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-runtime"
]
}
package.json
//....package.json details
"devDependencies": {
"#babel/core": "^7.20.2",
"#babel/plugin-transform-runtime": "^7.19.6",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#types/react": "^18.0.25",
"#types/react-dom": "^18.0.9",
"babel-loader": "^9.1.0",
"babel-plugin-import": "^1.13.5",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.26.1",
"css-loader": "^6.7.2",
"eslint": "^8.28.0",
"eslint-config-react-app": "^7.0.1",
"eslint-loader": "^4.0.2",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.2.0",
"gulp": "^4.0.2",
"gulp-inline-source": "^4.0.0",
"gulp-replace": "^1.1.3",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.7.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"react-dev-utils": "^12.0.1",
"react-hot-loader": "^4.13.1",
"regenerator-runtime": "^0.13.11",
"resolve-url-loader": "^5.0.0",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.6",
"url-loader": "^4.1.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"axios": "^1.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.56.1",
"swr": "^1.3.0"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
"> 0.1%",
"ios >= 6"
]
}

Answer 1

So Like I said in my comment the issue ended up being my terser minifier. The version I posted is the latest version as of this post and apparently will not work on safari once minified as when I built the code without the minfier it worked fine on safari.
The version of Terser plugin I rolled back to is "terser-webpack-plugin": "4.2.3".
There maybe other version that works but this is the version that worked for me and fixed my issue