We Keep Coding

How to use babel with webpack for ie11 compatibility

It's the first time i use webpack with babel, my goal is to make my small template app compatible with ie11.
For some reason I ignore, my JS does not work at all in ie11 even though I did set it as a target in my config. To test it, I use a ie11 on the internet but I don't have access to the stack errors since I'm on MacOS.
What am I missing here?
Source code for more info : https://github.com/VelynnXV/Front-End-Workflow
website : https://nifty-noether-cafbd5.netlify.app/
app.js
import regeneratorRuntime from "regenerator-runtime";
async function app() {
console.log('App entry point')
const template = document.getElementById('app')
await new Promise(r => setTimeout(() => r(), 2500))
template.innerHTML = `
<div class="web-container">
<div id="">
Async / awat test
</div>
</div>
`
console.log('App finished')
};
app();
webpack.config.json
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: ['core-js/stable', './src/app.js'],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.js',
},
devServer: {
publicPath: "./src/",
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000,
},
plugins: [
new HtmlWebpackPlugin({ // will generate the html file WITH app.js
// see plugin here : https://webpack.js.org/plugins/html-webpack-plugin/
template: './src/index.html',
filename: './index.html'
})
],
module: {
rules: [ // set of rules letting webpack know how to handle .xyz files
{
test: /\.m?js$/, // source: https://webpack.js.org/loaders/babel-loader/
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
}
}
],
},
};
babel.config.js
// babel.config.js
module.exports = api => {
return {
plugins: [
"#babel/plugin-proposal-nullish-coalescing-operator",
"#babel/plugin-proposal-optional-chaining",
"#babel/plugin-transform-runtime",
],
presets: [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
corejs:3,
// caller.target will be the same as the target option from webpack
targets: api.caller(caller => caller && caller.target === "node")
? { node: "current" }
: { chrome: "58", ie: "11" }
}
]
]
}
}
package.json
{
"name": "front-end-workflow",
"version": "1.0.0",
"description": "",
"main": "src/app.js",
"scripts": {
"dev": "npm run clean && npm run build && webpack serve",
"build": "webpack",
"clean": "rimraf ./dist"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.17",
"#babel/plugin-transform-runtime": "^7.12.17",
"#babel/preset-env": "^7.12.17",
"babel-loader": "^8.2.2",
"css-loader": "^5.0.2",
"html-loader": "^2.1.0",
"html-webpack-plugin": "^5.2.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"#babel/runtime": "^7.6.3",
"core-js": "^3.3.2"
}
}

You almost have a complete configuration for IE11 support. The only thing you're missing is a target: "es5" option in your webpack configuration. Babel correctly transpiled your files. Webpack also injected all the necessary polyfills. However, you need to tell Webpack when it bundles the code together to use a syntax that your target browser can understand. For whatever reason, Webpack set the default to a version of ES that contained arrow functions. The error that IE11 console was showing (SCRIPT1002:syntax error) was pointing at the very first occurrence of an arrow function in your bundled app.js file.
An extra tip: use comments: false in your babel config to strip the code comments out of your bundle. This can slightly decrease the size of your bundle.
You can git apply this diff in your repo to take the changes in.
diff --git a/babel.config.js b/babel.config.js
index 8d2442b..273176c 100644
--- a/babel.config.js
+++ b/babel.config.js
## -2,6 +2,7 ##
module.exports = api => {
return {
+ comments: false,
plugins: [
"#babel/plugin-transform-runtime",
],
diff --git a/webpack.config.js b/webpack.config.js
index 2243a11..08af521 100644
--- a/webpack.config.js
+++ b/webpack.config.js
## -21,6 +21,7 ## module.exports = {
filename: './index.html'
})
],
+ target: "es5",
module: {
rules: [ // set of rules letting webpack know how to handle .xyz files using loader
// see loaders : https://webpack.js.org/loaders/

Webpack 4 basic React js hello world fails with "Module parse failed: Unexpected token"

Update:
Code pushed to https://github.com/gsouvik/react_spa_experiment
Initial Post:
I know there are hundreds of threads out there, some had typos in webpack config, some used the loaders in a wrong way, some got it solved, some still open. But after numerous tries I still cannot get this working, a simple "Hello World" using Webpack 4, React js.
What I did
I was following this video tutorial line by line:
React & Webpack 4 from scratch
My package.json
{
"name": "my_react_experiment_2",
"version": "1.0.0",
"description": "Basic react with webpack ",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development --hot",
"build": "webpack --mode production"
},
"author": "Souvik Ghosh",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}
My webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};
My .babelrc
{
"presets": ["env", "react"]
}
My directory structure
Expected behaviour
I fire up the dev server npm run dev. Expected to see my shiny new React js page saying "My first React Webpack project" (from the component /components/App.js)
Actual Behavior
ERROR in ./src/index.js 5:16
Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
| import App from "./components/App";
|
ReactDOM.render(, document.getElementById('root'));
| //ReactDOM.render('Hello User ', document.getElementById('root'));
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main2
If required I can share the codebase via a git repo. Any help is greatly appreciated.

The issue is with typo in your webpack config file.
You have module.export which is not correct. It should be module.exports
Working example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/build'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/templates/index.html'
})
]
};

Webpack Initialization Fails

I just got into Webpack following an online tutorial.
Whenever I run npm run dev the web pack doesn't run and gives me the error: Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output has an unknown property 'fileName'. These properties are valid:
object { auxiliaryComment?, chunkFilename?, webassemblyModuleFilename?, globalObject?, crossOriginLoading?, jsonpScriptType?, chunkLoadTimeout?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, devtoolNamespace?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, chunkCallbackName?, library?, libraryTarget?, libraryExport?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
-> Options affecting the output of the compilation.outputoptions tell webpack how to write the compiled files to disk.
Here are my files:
package.json
{
"name": "forkify",
"version": "1.0.0",
"description": "Forkify Project",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "Sanjay",
"license": "ISC",
"devDependencies": {
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
},
"dependencies": {}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
fileName: 'bundle.js'
},
mode: 'development'
}

your output object is wrong. ( fileName => filename )
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js'
},
mode: 'development'
}

UglifyJs error with Gulp and webpack

I am currently discovering the module bundler "Webpack". I am trying to do something quite easy : I have a main.js entry and a bundle.js output. I use babel in order to translate in ES6.
My package.json :
{
"name": "me",
"version": "1.0.0",
"description": "Builder",
"main": "index.js",
"scripts": {
...
},
"author": "me",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"lodash": "^4.17.4",
"webpack": "^3.0.0",
"webpack-stream": "^3.2.0"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
Webpack.config.js :
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'js/main.js'),
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
When I prompt webpack in the CLI, it works pretty well, a bundle.js file which is minified is created in the dist folder.
Now, I want to combine with Gulp
Here is my gulpfile.js :
var gulp = require('gulp');
var webpackS = require('webpack-stream');
gulp.task('default', function() {
return gulp.src('./app/js/main.js')
.pipe(webpackS( require('./app/webpack.config.js') ))
.pipe(gulp.dest('./app/dist/'));
});
When I enter gulp in the CLI, I have this error :
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: bundle.js from UglifyJs
Unexpected token: name (_) [bundle.js:47,8]
However, when I remove the line new webpack.optimize.UglifyJsPlugin() from webpack.config.js and prompt gulp in the CLI it works perfectly !
I reinstalled all the npm packages but the problem is still here.
Does anybody have an idea ?

I would like to suggest you to don't mix webpack and gulp,
just create a script inside your package.json#scripts which runs webpack and then if you still want to exec webpack inside a gulp task you can do:
var exec = require('child_process').exec;
gulp.task('runWebpack', function (callback) {
exec('npm run webpack', callback);
})

How do you run the Webpack config? I assume by webpack path-to-config/webpack.config.js?
You have new webpack.optimize.UglifyJsPlugin() in your config, so by using webpack -p which executes the production mode, you get an error because UglifyJsPlugin is executed twice.
I guess the same happens with your Gulp setup.
However, the error message points to "_" not defined, which could be related to lodash. Maybe the import can't be resolved by Gulp?
However, I would not mix Gulp and Webpack. See the discussion here: Gulp + Webpack or JUST Webpack?
There is also an example using Webpack from within a gulp task.

babel-loader 6.0.0 doesn't work correct

I am using webpack this is my
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app',
output: {
path: path.join(__dirname, '/public'),
filename: 'bundle.js'
},
watch: true,
watchOptions: {
aggregateTimeout: 100
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: "babel-loader"
}]
}
}
and this my file from entry point
app.js
import React from 'react'
without anything, just simple line of code.
When i am trying to run webpack from command line and i got the next error
app.js Line 1: Unexpected token You may need an appropriate loader to
handle this file type. | import React from 'react';
package.json
{
"name": "a-b-c",
"version": "1.0.0",
"main": "server.js",
"dependencies": {
"babel-loader": "^6.0.0",
"react": "^0.14.1",
"webpack": "^1.12.2"
},
"devDependencies": {
"babel-core": "^6.0.14"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
Also, when i changed ES6 syntax in my app.js file to ES5 then it works well.
Any suggestions?
Thanks in advance.

I've found out. The problem was with babel-loader and to fix this issue you need to install
npm install babel-loader babel-core babel-preset-es2015
and add to your webpack.config.js file next lines
loader: 'babel?presets[]=es2015'
Source of information
Thanks