0

Tenho um projeto feito com react usando o Webpack para frontend e Spring Maven para back. Estou usando arquivos JSX e como framework o Ant Design. O problema está no fato de em Windows e Android, o site abre sem problema nenhum, porém quando vai para alguma coisa da Apple ele não abre. Fiz teste com máquina virtual, ipad e um iphone 8. O único que funcionou foi no Iphone 8. Em nenhum outro o site abriu. Somente está abrindo no Chrome, no Safari não abre. Não faço ideia de onde está o problema. Alguma idéia?

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')
    })
  ]
}
5
  • Como o aplicativo foi lançado e o que aparece no console do navegador?
    – nbkhope
    10/02/2018 às 0:47
  • Em uma versão mais antiga do safari (porém pra windows) mostra o erro "can't find variable: promise". Já para erros que dá em Mobile não achei uma forma de saber o erro. 14/02/2018 às 16:36
  • Ajudaria mais com o stacktrace completo dos erros, mas de acordo com a mensagem, provavelmente seja que o navegador antigo não tem suporte de promessas ("Promise"), então tem que usar um polyfill. Como você está compilando o bundle.js do Webpack? Tem que usar, no minimo, babel-preset-env e babel-preset-react
    – nbkhope
    14/02/2018 às 18:04
  • adicionei fonte do package.json e o webpack.config. Saberia dizer o que precisa ser feito? 15/02/2018 às 12:14
  • Tenta atualizar para a versão mais nova do webpack 3 (dá um npm i -S webpack@3) e se não funcionar, atualizar o babel também. 17/04/2018 às 22:12

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .