wigogeo
1 year ago
128
1
Vue

"Syntax error" on IE and" Unexpected keyword 'const'" on Safari

Posted 1 year ago by wigogeo

Hi guys,

i made an SPA application with Laravel (5.6.35) and VueJS (2.1.8).

It works perfectly on Chrome and Firefox but not on IE and Safari.

I get this error on IE : "SCRIPT1002: Syntax error on :"

class PerMessageDeflate {

This line is in my app.js (In public/js folder).

So i tried to use babel-polyfill and es6-promise in my ressources/assets/js/bootstrap.js :

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');
    // require('bootstrap-sass');
} catch (e) {}





import Es6Promise from 'es6-promise';
Es6Promise.polyfill();

import "babel-polyfill";

import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
import draggable from 'vuedraggable';
import VuexStore from './store';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/fr';
import VueDRR from 'vue-drag-resize-rotate';
import axios from 'axios';
import VueTouch from 'vue-touch'
import lightbox from 'vlightbox';
import io from 'socket.io';
import { ObserveVisibility } from 'vue-observe-visibility'




window.Vue = Vue;


Vue.use(lightbox);
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.directive('observe-visibility', ObserveVisibility)
Vue.use(ElementUI, { locale });
Vue.use(VueTouch, { name: 'v-touch' })

window.axios = axios;


/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */




window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


window.axios.interceptors.response.use((response) => { // intercept the global error
    return response
}, function (error) {
  let originalRequest = error.config
  if ((error.response.status === 401 || error.response.status === 419) && !originalRequest._retry ) { // if the error is 401 and hasent already been retried
    originalRequest._retry = true // now it can be retried
    window.location.href = '/login?alert=3'
  }
  if (error.response.status === 404 && !originalRequest._retry) {
    originalRequest._retry = true
    window.location.href = '/'
    return
  }
  // Do something with response error
  return Promise.reject(error)
})


/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo'


window.io = require('socket.io-client');

// window.Pusher = require('pusher-js');

window.Echo = new Echo({
  authEndpoint : window.location.hostname+':8888/public/broadcasting/auth',
  broadcaster: 'socket.io',
  host: window.location.hostname + ':3000'
});

I also added a .babelrc file with this code inside :

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

But none of this changes had helped the application. It still shows the same error on IE.

In safari i also get an error : "SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode." on :

const safeBuffer = __webpack_require__(5);

also in my app.js file.

This is my package.json :

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18",
    "babel-cli": "^6.26.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-node6": "^0.4.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "bootstrap": "^4.1.1",
    "cross-env": "^5.2.0",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "popper.js": "^1.12",
    "vue": "^2.5.7",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0-beta.51",
    "babel-polyfill": "^6.26.0",
    "element-ui": "^2.4.2",
    "es6-promise": "^4.2.4",
    "express": "^4.15.2",
    "fs": "0.0.1-security",
    "joi-browser": "^13.4.0",
    "jquery-ui": "^1.12.1",
    "laravel-echo": "^1.4.0",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "node-sass": "^4.9.0",
    "socket.io": "^2.1.1",
    "socketio": "^1.0.0",
    "utf-8-validate": "^4.0.2",
    "uws": "^9.14.0",
    "vlightbox": "^2.0.2",
    "vue-breadcrumbs": "^1.1.2",
    "vue-drag-resize-rotate": "^2.0.8",
    "vue-draggable-resizable": "^1.5.1",
    "vue-observe-visibility": "^0.3.1",
    "vue-router": "^3.0.1",
    "vue-socket.io": "^2.1.1",
    "vue-sortable": "^0.1.3",
    "vue-touch": "^2.0.0-beta.4",
    "vue2-dropzone": "^2.3.6",
    "vuedraggable": "^2.14.1",
    "vuex": "^3.0.0"
  },
  "optionalDependencies": {
    "bufferutil": "^3.0.5"
  }
}

and this is my composer.json :

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": "^7.1.3",
        "bugsnag/bugsnag-laravel": "^2.0",
        "fideloper/proxy": "^4.0",
        "kodeine/laravel-meta": "dev-master",
        "laravel/framework": "5.6.*",
        "laravel/tinker": "^1.0",
        "predis/predis": "^1.1",
        "robbiep/cloudconvert-laravel": "2.*",
        "spatie/laravel-glide": "^3.2",
        "spatie/laravel-image-optimizer": "^1.1",
        "spatie/pdf-to-image": "^1.4"
    },
    "require-dev": {
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^2.0",
        "phpunit/phpunit": "^7.0"
    },
    "autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "files": [
            "app/helpers.php"
        ],
        "psr-4": {
            "App\": "app/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "extra": {
        "laravel": {
            "dont-discover": [
            ]
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

Any ideas of how i can resolve this problems?

Thanks

Please sign in or create an account to participate in this conversation.