Project in React doesn’t open on Apple devices

Asked

Viewed 237 times

0

I have a project done with React using Webpack for frontend and Spring Maven for back. I am using JSX files and as a framework Ant Design. The problem is in the fact that on Windows and Android, the site opens without any problem, but when it goes to something from Apple it does not open. I tested with virtual machine, ipad and an iphone 8. The only one that worked was on Iphone 8. In no other site opened. It’s only opening in Chrome, Safari doesn’t open. I have no idea where the problem is. Any idea?

package json.:

{
  "name": "geraecom",
  "version": "1.19.17",
  "repository": {
    "type": "git",
    "url": ""
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.1.1",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.1",
    "eslint": "^3.19.0",
    "eslint-config-fbjs-opensource": "^1.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-react": "^7.0.1",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "image-webpack-loader": "^3.3.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "raw-loader": "^0.5.1",
    "string-mask": "^0.3.0",
    "style-loader": "^0.17.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.0.0",
    "webpack-livereload-plugin": "^0.11.0",
    "webpack-shell-plugin": "^0.5.0",
    "xml2js": "^0.4.19"
  },
  "scripts": {
    "start": "webpack",
    "build": "node build.js"
  },
  "dependencies": {
    "antd": "^2.13.11",
    "consys": "git+ssh://",
    "history": "^4.6.1",
    "moment": "^2.18.1",
    "net": "^1.0.2",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-fa": "^4.2.0",
    "react-intl": "^2.3.0",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-timeout": "^1.0.1",
    "react-to-string": "0.0.1",
    "redux-router": "^1.0.0-beta3",
    "sockjs-client": "^1.1.4",
    "stompjs": "^2.3.3"
  }
}

webpack.config.js:

/*eslint-env node*/
const path = require('path')
const buildConfig = require('./build/config')
const LiveReloadPlugin = require('webpack-livereload-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, 'ui/app/index.jsx'),
  cache: true,
  output: {
    path: path.join(__dirname, 'target/classes/static'),
    filename: 'bundle.js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/'
  },
  // output: {
  //   path: path.join(__dirname, 'target/classes/static'),
  //   filename: '[name].[hash].bundle.js',
  //   chunkFilename: '[name].[hash].chunk.js',
  //   publicPath: '/'
  // },
  watch: true,
  devtool: 'eval',
  module: {
    rules: [{
        test: /\.jsx?$/,
        exclude: /(attr-accept)/,
        // exclude: /node_modules\/(?!(consys)\/).*/,
        use: [
          {
            loader: "babel-loader",
            query: {
              presets: ['es2015', 'react'],
              plugins: [
                "transform-object-rest-spread",
                ["import", { libraryName: "antd", style: true }]
              ]
            }
          },
          "eslint-loader"
        ]
      },
      {
        test: /\.css$/,
        exclude: [path.resolve(__dirname, 'node_modules/font-awesome/css/font-awesome.css')],
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader",
          query: {
            modules: true,
            localIdentName: '[name]__[local]___[hash:base64:5]'
          }
        }]
      },
      {
        test: /node_modules[\\\/]font-awesome[\\\/]css[\\\/]font-awesome\.css/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader",
        }]
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader", 
          query: buildConfig.antDesign
        }]
      },
      { 
        test: /\.(png|jpg|jpeg|svg)$/,
        use: [
          {
            loader: 'file-loader',
          },
          {
            loader: 'image-webpack-loader',
            options: buildConfig.imageLoader,
          },
        ],
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ] 
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new LiveReloadPlugin(),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'ui/app/index.html')
    })
  ]
}
  • How the application was launched and what appears in the browser console?

  • An older version of safari (but for windows) shows the error "can’t find variable: Promise". Already for mistakes that it gives in Mobile did not find a way to know the error.

  • It would help more with full stacktrace of errors, but according to the message, it’s probably that the old browser doesn’t have promise support ("Promise"), so you have to use a polyfill. How are you compiling Webpack Bundle.js? You have to use at least, babel-preset-env and babel-preset-react

  • added source for package.json and webpack.config. I could tell you what needs to be done?

  • Try upgrading to the newer version of webpack 3 (gives an npm i -S webpack@3) and if it doesn’t work, update Babel as well.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.