babel#7.9.5 not working well with some self-closing tags

Bug Report

Current Behavior Using babel with version 7.9.5, some self-closing tags like: <span><i class="fa fa-heart-o"/></span> do not get rendered well and then all the DOM will be broken. This behavior appears only with this version, with previous versions like 7.9.0 or above it works.

If you change the self-closing tag into a normal tag, the babel-preset-env work pretty well. <span><i class="fa fa-heart-o"></i></span>

Input Code

<div ng-if="ctrl.rooms && ctrl.rooms.length > 0" class="full-height dflex flex-direction-column">
            <div class="input-group col-lg-3 col-md-3 col-sm-5 col-xs-11 text-lg">
                <div class="input-group-addon" style="border:none; background-color:white; font-size: 18px;">
                    <span><i class="fa fa-heart-o"/></span>
                </div>
                <select class="form-control no-border-radius"
                        ng-options="item as item.label for item in ctrl.inChargeFilters track by item.id"
                        ng-model="ctrl.inChargeFilterSelected"
                        ng-change="ctrl.inChargeFilter()">
                </select>
            </div>
 ...

Expected behavior/code As shown in the screenshot, we have only a single heart icon, we see multiple heart icons rendered in the DOM with the version 7.9.5

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: webpack.config.js (babel snippet)

{
                    test: /.*(\/|\\)(?!app).*(\/|\\)(ctrls|dirs|module|svcs)(\/|\\).+\.js$/,
                    exclude: [/node_modules/],
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }, {
                        loader: 'webpack-conditional-loader',
                    }]
                }

• Filename: package.json (snippet)

"devDependencies": {
    "@babel/core": "^7.6.3",
    "@babel/preset-env": "^7.6.3",
    "babel-loader": "^8.0.6",
...

Environment

• Babel version(s): v7.9.5
• babel-preset-env version(s): v7.9.5
• babel-loader version(s): v8.0.6
• Node/npm version: Node 10.20.1 / npm 6.14.4
• OS: Ubuntu 18.04
• How you are using Babel: loader

Possible Solution To temporarily avoid this problem without rewriting the code, we suggest to downgrade babel-preset-env to 7.9.0

Additional context/Screenshots

Right render:

Broken render:

Right DOM:

Broken DOM:

[ueler]

We also have babel in our project and also suspected babel first for troubles with self closing tags.

However, in our case upgrading the dependency jquery to 3.5.0 (see their release notes) was responsible for messing up our whole AngularJS project. Back to 3.4.1 everything works fine again and self closing tags are fixed by jquery.

Maybe this is not directly related to this question, just in case someone has upgraded babel together with jquery.

[panthony]

Hello everyone 👋

I have the same issue as @AngeloAvv.

I have a dependency to spectrum which generate HTML with self-closing tags (see here using JavaScript.

Reverting back to a previous version of babel fixed the issue.

In my case I’m using babel through ember-cli-babel (https://github.com/babel/ember-cli-babel/releases/tag/v7.19.0).