Our app is choking when we load it up in IE 11. We are getting SCRIPT1002: Syntax error on the chunk.js file. It is having trouble with multiple things in that file. What are we missing for Babel to transpose all that to es5?
chunkjs.txt
.babelrc
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": "3.0.0"
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime"
]
}
webpack.common.js
const Path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: Path.resolve(__dirname, '../src/scripts/index.js')
},
externals: {
// jQuery: 'jQuery',
foundation: 'Foundation'
},
output: {
path: Path.join(__dirname, '../build'),
filename: 'js/[name].js'
},
optimization: {
splitChunks: {
chunks: 'all',
name: false
}
},
plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin([
{ from: Path.resolve(__dirname, '../public'), to: 'public' }
]),
new HtmlWebpackPlugin({
template: Path.resolve(__dirname, '../src/index.html')
})
],
resolve: {
alias: {
'~': Path.resolve(__dirname, '../src')
}
},
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
},
]
},
};
webpack.config.dev.js
const Path = require('path');
const Webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'cheap-eval-source-map',
output: {
chunkFilename: 'js/[name].chunk.js'
},
devServer: {
inline: true
},
plugins: [
new Webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
}),
new Webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: Path.resolve(__dirname, '../src'),
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
}
},
{
test: /\.js?x?$/,
include: Path.resolve(__dirname, '../src'),
exclude: /node_modules\/(?![gsap\-es|lodash\-es])/,
loader: 'babel-loader',
query: {
"presets": ["@babel/preset-env", "@babel/preset-react"],
}
},
{
test: /\.s?css$/i,
use: ['style-loader', 'css-loader?sourceMap=true', 'sass-loader']
},
],
},
});
webpack.config.prod.js
const Webpack = require('webpack');
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
// devtool: 'source-map',
stats: 'errors-only',
bail: true,
output: {
// filename: 'js/[name].[chunkhash:8].js',
// chunkFilename: 'js/[name].[chunkhash:8].chunk.js'
filename: 'js/[name].js',
chunkFilename: 'js/chunk.js'
},
plugins: [
new Webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new Webpack.optimize.ModuleConcatenationPlugin(),
new Webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new MiniCssExtractPlugin({
filename: 'bundle.css'
}),
],
module: {
rules: [
{
test: /\.js?x?$/,
exclude: /node_modules\/(?![gsap\-es|lodash\-es])/,
loader: 'babel-loader',
query: {
"presets": ["@babel/preset-env", "@babel/preset-react"],
}
},
{
test: /\.s?css/i,
use : [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
}
});
browserslistrc
[production staging]
>5%
last 2 versions
Firefox ESR
not ie < 11
[development]
last 1 chrome version
last 1 firefox version
last 1 edge version