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?
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!
For me, the fix was the following:
Added import 'core-js/stable';
into polyfills.ts(js) file.
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' ]
}
}
},
...
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.