2

I am using Vuejs for my web project. As there are some users out there who are still using IE11, I need to make this web project compatible.

Currently I am getting this error on IE11:

SCRIPT5022: Exception thrown and not caught

/***/ "./node_modules/core-js/internals/internal-state.js":
/*!**********************************************************!*\
  !*** ./node_modules/core-js/internals/internal-state.js ***!
  \**********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

var NATIVE_WEAK_MAP = __webpack_require__(/*! ../internals/native-weak-map */ "./node_modules/core-js/internals/native-weak-map.js");

var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js/internals/global.js");

var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js/internals/is-object.js");

var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js/internals/create-non-enumerable-property.js");

var objectHas = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js/internals/has.js");

var sharedKey = __webpack_require__(/*! ../internals/shared-key */ "./node_modules/core-js/internals/shared-key.js");

var hiddenKeys = __webpack_require__(/*! ../internals/hidden-keys */ "./node_modules/core-js/internals/hidden-keys.js");

var WeakMap = global.WeakMap;
var set, get, has;

var enforce = function enforce(it) {
  return has(it) ? get(it) : set(it, {});
};

var getterFor = function getterFor(TYPE) {
  return function (it) {
    var state;

    if (!isObject(it) || (state = get(it)).type !== TYPE) {
      throw TypeError('Incompatible receiver, ' + TYPE + ' required');
    }

    return state;
  };
};

The faulty line is

throw TypeError('Incompatible receiver, ' + TYPE + ' required');

I was hoping to avoid incorrect behavior by using polyfills.

This is webpack.mix.js

const {EnvironmentPlugin} = require ('webpack');
const mix = require ('laravel-mix');
const glob = require ('glob');
const path = require ('path');
const {CleanWebpackPlugin} = require ('clean-webpack-plugin');
const ChunkRenamePlugin = require ('webpack-chunk-rename-plugin');

require ('laravel-mix-tailwind');
require ('laravel-mix-purgecss');
require('laravel-mix-polyfill');

mix.webpackConfig ({
    output: {
        chunkFilename: 'js/chunks/[name].[chunkhash].js'
    },
    plugins: [
        new CleanWebpackPlugin ({
            cleanOnceBeforeBuildPatterns: ['chunks/**/*']
        }),
        new EnvironmentPlugin ({
            BASE_URL: '/'
        }),
        new ChunkRenamePlugin ({
            initialChunksWithEntry: true,
            '/js/app': 'js/main.js',
            '/js/vendor': 'js/vendor.js',
        }),
    ],
    module: {
        rules: [
            {
                test: /node_modules(?:\/|\\).+\.js$/,
                loader: 'babel-loader',
                options: {
                    presets: [['@babel/preset-env', {targets: 'last 2 versions, ie >= 10'}]],
                    plugins: ['@babel/plugin-transform-destructuring', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-template-literals'],
                    babelrc: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.join (__dirname, 'resources'),
            'node_modules': path.join (__dirname, 'node_modules')
        }
    },
});

mix.js ('resources/js/main.js', 'public/js')
.postCss ('resources/css/app.css', 'public/css')
.tailwind ('./tailwind.config.js')
.polyfill({
    enabled: true,
    useBuiltIns: "entry",
    targets: "> 0.25%, not dead"
})

Any idea how I can solve this issue?

SPQRInc
  • 162
  • 4
  • 23
  • 64

3 Answers3

1

For me, the fix was the following:

Added import 'core-js/stable'; into polyfills.ts(js) file.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Calin Vlasin
  • 1,331
  • 1
  • 15
  • 21
1

The problem for me was that I was also transpiling core-js module in webpack rules. More details in this thread https://github.com/zloirock/core-js/issues/514

This solved my problem exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,

module: {
   rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {
                                targets: {
                                    browsers: [
                                        "last 2 versions",
                                        "IE >= 11"
                                    ]
                                }
                            }],
                            '@babel/preset-react'
                        ],
                        plugins: [ '@babel/plugin-transform-arrow-functions', '@babel/plugin-proposal-class-properties' ]
                    }
                }
            },
     ...
          ]
rMonteiro
  • 1,371
  • 1
  • 14
  • 37
0

I know it's a little late to respond. I recently had the same problem. I solved it as follows:

The message in the exception is the key to know if it is a problem with any API. In this case it happened to me with Symbols.

If you want to see the message in console, you can click here

I was struggling with core-js to add the polyfills and the error persisted. I used the polyfills from https://polyfill.io and everything worked correctly.

I put the script in the head of the index.html and everything went fine.

 <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=fetch%2Cdefault"></script>

The babel configuration I only add the presets and plugins as string, I did not configure anything else. And in the webpack.config I only added the babel-loader

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

If you have any questions, I am attentive. Thank you and I hope this reply can give you some idea of what may be going on.

Greetings!

Gonzalo Novak
  • 1