I'm new to babel and trying to transpile my es6 code to work with IE11. But when I run the code in IE11 I get js errors about my forEach
code. From what I've read I needed to add the preset @babel/preset-env
. I added that to my config file so I'm not sure why it's not transpiling those forEach
calls.
const path = require('path');
module.exports = {
entry: {
setupForm: "./Scripts/es6/setupForm.js",
prelimForm: "./Scripts/es6/prelimForm.js"
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './Scripts/build'),
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/,
query: {
presets: ['@babel/preset-env']
}
}]
}
}
I thought that perhaps I needed to additionally reference the babel polyfill.js
as discussed here so I added it to my page, however, I'm getting the same error about Object doesn't support property or method 'forEach' .
Here is my package.json file.
{
"name": "OurSite",
"version": "1.0.0",
"description": "",
"main": "map_embed.js",
"directories": {
"doc": "docs"
},
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
},
"babel": {
"presets": [
"env"
]
},
"dependencies": {}
}
As of Babel 7.4.0 @babel/polyfill
has been deprecated in favour of core-js
and regenerator
packages.
https://babeljs.io/docs/en/babel-polyfill#docsNav
Either include in webpack
module.exports = {
entry: {
main: [
'core-js/stable',
'regenerator-runtime/runtime',
'src/main.js'
]
}
}
OR include in your js at the top
import 'core-js/stable';
import 'regenerator-runtime/runtime';
Here's what you should do:
@babel/polyfill
@babel/polyfill
in your entry
(If you have more than 1 entry, and you don't plan to have both on the same page, include the polyfill in both)7.xx
(don't worry about babel-loader
- that's actually a webpack package, not a babel package).Webpack
module.exports = {
...
entry: {
setupForm: ["@babel/polyfill", "./Scripts/es6/setupForm.js"],
prelimForm: ["@babel/polyfill", "./Scripts/es6/prelimForm.js"]
},
...
}
package.json
{
...
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"@babel/polyfill": "^7.4.4",
"babel-loader": "^8.0.6",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
},
...
}
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.