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"
  ]
}

CodePudding user response：

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