Browser-sync: Problems with <pre> tag and injected script

[JuanDMeGon]

Issue details

In my HTML I have <pre><code>some code</code></pre>. Additionally I am using Vue.js which does not allow <script> tags inside document body .

For some reason I do not understand and found response yet, browser sync seems to inject a script tag into the first pre tag is found.

The script tag looks like this:

<script id="__bs_script__">//<![CDATA[
--
  | document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.13'><\/script>".replace("HOST", location.hostname));
  | //]]></script>

Now, I cannot be sure if it is a bug or a feature, but this is causing me issues specifically with Vue.js (and probably with some other JS frameworks).

Steps to reproduce/test case

Create an HTML document which includes <pre> tags un the body (at least one). Load that HTML document using BrowserSync, this will result in a script inserted just before the <pre> close tag.

Please specify which version of Browsersync, node and, npm you're running

• Browsersync [2.18.13 ]
• Node [8.9.1]
• Npm [5.5.1]

Affected platforms

Windows 10 64 bit

[altugyavuz]

+1

[rdelafuente]

Use this:

snippetOptions: {
    rule: {
      match: /<\/body>/i
    }
}

[fitztrev]

@JuanDMeGon Are you using Browsersync via laravel-mix?

[JuanDMeGon]

Yes, I do. Do you think this is related to Laravel-Mix?
I just "resolved" removing the <pre> tags. Do not know if it was resolved already (was long time ago :P)

[fitztrev]

@JuanDMeGon yes. Laravel-Mix has a custom regex rule for browsersync to </pre> tags.

https://github.com/JeffreyWay/laravel-mix/blob/d432101c23198252e3952d8d89ee246d209265a8/src/components/Browsersync.js#L53

I have a PR to fix because I've run into the same issue: https://github.com/JeffreyWay/laravel-mix/pull/2227