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?
– nbkhope
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.
– Lorenzo Dornelles
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
andbabel-preset-react
– nbkhope
added source for package.json and webpack.config. I could tell you what needs to be done?
– Lorenzo Dornelles
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.
– Rodrigo Mello