Styjun

I'm updating dependencies on my website.
It works fine on recents browsers, Edge, Chrome, Firefox.

But on IE11, I get "SCRIPT1014: Caractère incorrect"
on this line :

eval("__webpack_require__.r(__webpack_exports__);n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Foundation", function

I thaught babel was well configured to make it work on IE11, but it's not.

Here is my configurations files
Package.json :

 "name": "project_name",
 "version": "3.0.0",
 "description": "Starter project by us, build with foundation 6 & compiled with webpack 4",
 "main": "index.js",
 "scripts": 
 "test": "echo "Error: no test specified" && exit 1",
 "dev": "webpack --mode development --watch",
 "build": "cross-env NODE_ENV=production webpack --progress",
 "proxy": "./node_modules/.bin/browser-sync start --config ./proxy.dev.json"
 ,
 "keywords": [],
 "author": "Me",
 "license": "ISC",
 "devDependencies": 
 "autoprefixer": "^8.6.0",
 "babel-cli": "^6.26.0",
 "babel-core": "^6.26.3",
 "babel-loader": "^7.1.4",
 "babel-preset-env": "^1.7.0",
 "browser-sync": "^2.26.3",
 "cross-env": "^5.1.6",
 "css-loader": "^0.28.11",
 "mini-css-extract-plugin": "^0.5.0",
 "node-sass": "^4.11.0",
 "optimize-css-assets-webpack-plugin": "^4.0.2",
 "postcss-loader": "^2.1.5",
 "sass-loader": "^6.0.7",
 "style-loader": "^0.23.1",
 "webpack": "^4.20.2",
 "webpack-cli": "^3.0.2"
 ,
 "dependencies": 
 "jquery": "^3.2.1",
 "foundation-sites": "^6.5.1",
 "slick-carousel": "^1.6.0",
 "cleave.js": "^0.7.15",
 "family.scss": "^1.0.8",
 "url-safe-string": "^1.1.0",
 "jquery.easing": "1.4.1",
 "jquery-colorbox": "^1.6.4",
 "select2": "^4.0.3"
 

.babelrc

 
 "presets" : [
 ["env", 
 "targets": 
 "browsers": ["last 2 versions", "ie >= 11"]
 
 ],
 ]

webpack.config.js

 // webpack v4

const webpack = require('webpack');
const path = require('path');

// pour créer le fichier CSS on utilise extractText
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// pour minifier le CSS
const OptimizeCSSAssets = require("optimize-css-assets-webpack-plugin");
new OptimizeCSSAssets();

const devMode = process.env.NODE_ENV !== 'production';
var nodePath = path.resolve(__dirname, 'node_modules');

module.exports = 
 entry: [ './src/index.js'],
 output: 
 path: path.resolve(__dirname, '../public/assets'),
 filename: 'bundleV4.js'
 ,
 module: 
 rules: [
 // babel converts ES6 JS into old-browser friendly JS, see .babelrc for more details
 
 test: /.js$/,
 exclude: /(node_modules,
 // allow SCSS to be compiled in CSS
 
 test: /.(sa

 ]
 ,
 plugins: [
 new MiniCssExtractPlugin(
 // Options similar to the same options in webpackOptions.output
 // both options are optional
 filename: "appV4.css",
 chunkFilename: "[id].css"
 ),
 new webpack.ProvidePlugin(
 $: 'jquery',
 jQuery: 'jquery',
 'window.jQuery': 'jquery'
 )
 ],
;

// minify CSS for production
if (process.env.NODE_ENV === 'production') 
 module.exports.plugins.push(new OptimizeCSSAssets());

Thanks to you Daniel Ruf, I found the solution.

I deleted .babelrc

and I put this in my webpack.config.js file :

 module: {
 rules: [
 // babel converts ES6 JS into old-browser friendly JS, see .babelrc for more details
 
 test: /.js$/,

 use: 
 loader: "babel-loader",
 options: 
 presets: ['@babel/preset-env'],
 plugins: ['@babel/plugin-proposal-object-rest-spread']
 

 
 ,

it might be that there are some transform plugins missing.
Try adding babel-plugin-transform-es2015-template-literals using npm i babel-plugin-transform-es2015-template-literals -D and add it in your .babelrc

 "presets" : [
 ["env", 
 "targets": 
 "browsers": ["last 2 versions", "ie >= 11"]
 
 ],
 ],
 "plugins": ["transform-es2015-template-literals"]

See https://babeljs.io/docs/en/babel-plugin-transform-template-literals