gulp --production = Browserify don't close tr/td/th tags from Vue template

Shortly, Browserify don't close thead, tr, th, td tags, when running "gulp --production".

Difference in resulting Javascript file:

1 ) gulp default

.template = "<div><table><thead><tr><th>Head</th></tr></thead>
<tbody><tr><td>Content</td></tr></tbody></table></div>" .

2 ) gulp --production

.template="<div><table><thead><tr><th>Head<tbody><tr><td>Content</table></div>" .

As you see in --production mode there are no ending tags and browser ends those tags wrong, creating:

"<div><table><thead><tr><th>Head<tbody><tr>
<td>Content</td></tr></th></tr></thead></table></div>"

So Content is inside thead.

Please help!

Using:

"gulp": "^3.9.1",  

"jquery": "^3.1.0",  

"laravel-elixir": "^6.0.0-9",  

"laravel-elixir-browserify-official": "^0.1.3",  

"laravel-elixir-vueify": "^2.0.0",

Simple .Vue file:

<template>
    <div>
        <table>
            <thead>
            <tr>
                <th>Head</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Content</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
    export default{
    }
</script>

laurih

9 years ago

Level 6

Problem solved by installing WebPack.

Snapey

9 years ago

Level 122

Its being optimised to remove unnecessary tags in production. Its not very pretty, but you don't need to close a table cell if the next thing is the start of a new row for instance.

laurih

9 years ago

Level 6

You are right -- when I just put this template without end tags to Fiddle HTML, it works, it is rendered right way.

But using Browserify to compile .Vue component file to .js file, browser renders it wrong way, so that Content is inside THEAD tags. I don't know how Browserify inserts this template into DOM, but result is wrong.

But good thing is that with WebPack it works :)

Please or to participate in this conversation.