title: VueJS SFC(Single File Component) won't compile
body: <p>I'm getting this error whenever I add an extra line of html to the html in my SFC ~home.vue. See error below:</p>
  
  <pre><code>&gt; webpack --mode development
  
  Hash: 1e4bd20702518101b259
  Version: webpack 4.29.3
  Time: 2565ms
  Built at: 02/11/2019 10:53:45 PM
      Asset     Size  Chunks             Chunk Names
  bundle.js  433 KiB    main  [emitted]  main
  Entrypoint main = bundle.js
  [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 475 bytes {main} [built]
  [./wwwroot/app.js] 211 bytes {main} [built]
  [./wwwroot/routes.js] 194 bytes {main} [built]
      + 11 hidden modules
  
  ERROR in ./wwwroot/components/home.vue?vue&amp;type=template&amp;id=f890ddf8&amp; (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./wwwroot/components/home.vue?vue&amp;type=template&amp;id=f890ddf8&amp;)
  Module build failed (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
  RangeError: Invalid string length
      at repeat$1 (C:~Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4558:28)
      at Object.generateCodeFrame (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-template-compiler\build.js:4540:52)
      at loaderContext.emitError.compiled.errors.map (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-loader\lib\loaders\templateLoader.js:64:34)
      at Array.map (&lt;anonymous&gt;)
      at Object.module.exports (C:\~\Documents\Visual Studio 2017\Projects\xyz\node_modules\vue-loader\lib\loaders\templateLoader.js:63:25)
   @ ./wwwroot/components/home.vue?vue&amp;type=template&amp;id=f890ddf8&amp; 1:0-202 1:0-202
   @ ./wwwroot/components/home.vue
   @ ./wwwroot/app.js
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2
  npm ERR! musterv3@1.0.0 serve: `webpack --mode development`
  npm ERR! Exit status 2
  npm ERR!
  npm ERR! Failed at the musterv3@1.0.0 serve script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     C:\~\AppData\Roaming\npm-cache\_logs\2019-02-11T21_53_45_974Z-debug.log
  </code></pre>
  
  <p>This only happens if I add an extra line of html to the html in the template tag of the component. Here's the component code <code>home.vue</code></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="banner row align-items-center"&gt;
              &lt;div class="col-md-4 col-12"&gt;
                  &lt;h1 class="banner__header"&gt;Earn money on your spare rooms&lt;/h1&gt;
                  &lt;p class=""&gt;Find out how much you could earn.&lt;/p&gt;
  
                  &lt;div class="input-group mb-3 banner__calculator"&gt;
                      &lt;input type="text" class="form-control" placeholder="Location" list="locations" aria-label="Location"&gt;
  
                      &lt;button type="button" class="btn"&gt;GO&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-8 col-12 d-none d-sm-block text-center"&gt;
                  &lt;div class="banner__property"&gt;
                      &lt;div class="banner__property__info"&gt;
                          &lt;p&gt;NGN 250,000/Year&lt;/p&gt;
                          &lt;p&gt;Tayo's Apartment, Yaba, Lagos&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data : function() {
              return { message: 'Hello World' };
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>If I add an extra line to the template code, I get the error. </p>
  
  <p>Can anyone explain this? Keep in mind that I'm making use of webpack and vue-loader.</p>
  
  <p>Full log</p>
  
  <pre><code>0 info it worked if it ends with ok
  1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
  1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
  1 verbose cli   'run',
  1 verbose cli   'serve' ]
  2 info using npm@6.4.1
  3 info using node@v10.13.0
  4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
  5 info lifecycle musterv3@1.0.0~preserve: musterv3@1.0.0
  6 info lifecycle musterv3@1.0.0~serve: musterv3@1.0.0
  7 verbose lifecycle musterv3@1.0.0~serve: unsafe-perm in lifecycle true
  8 verbose lifecycle musterv3@1.0.0~serve: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster\node_modules\.bin;.\node_modules\.bin;C:\PROGRAM FILES (X86)\MICROSOFT VISUAL STUDIO\2017\COMMUNITY\COMMON7\IDE\EXTENSIONS\GITHUB\GITHUB\lib\win32\x86;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\dotnet\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\nodejs\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\110\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Program Files\Microsoft SQL Server\120\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio\;C:\Program Files\Git\cmd;C:\Program Files (x86)\Yarn\bin\;C:\WINDOWS\System32\OpenSSH\;C:\Users\Ugo Okoro\AppData\Local\Microsoft\WindowsApps;C:\Users\Ugo Okoro\AppData\Roaming\npm;C:\Users\Ugo Okoro\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Ugo Okoro\AppData\Local\Yarn\bin;C:\Users\Ugo Okoro\.dotnet\tools;C:\Users\Ugo Okoro\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External;C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\git
  9 verbose lifecycle musterv3@1.0.0~serve: CWD: C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
  10 silly lifecycle musterv3@1.0.0~serve: Args: [ '/d /s /c', 'webpack --mode development' ]
  11 silly lifecycle musterv3@1.0.0~serve: Returned: code: 2  signal: null
  12 info lifecycle musterv3@1.0.0~serve: Failed to exec serve script
  13 verbose stack Error: musterv3@1.0.0 serve: `webpack --mode development`
  13 verbose stack Exit status 2
  13 verbose stack     at EventEmitter.&lt;anonymous&gt; (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
  13 verbose stack     at EventEmitter.emit (events.js:182:13)
  13 verbose stack     at ChildProcess.&lt;anonymous&gt; (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
  13 verbose stack     at ChildProcess.emit (events.js:182:13)
  13 verbose stack     at maybeClose (internal/child_process.js:962:16)
  13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
  14 verbose pkgid musterv3@1.0.0
  15 verbose cwd C:\Users\Ugo Okoro\Documents\Visual Studio 2017\Projects\Muster\Muster
  16 verbose Windows_NT 10.0.17134
  17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "serve"
  18 verbose node v10.13.0
  19 verbose npm  v6.4.1
  20 error code ELIFECYCLE
  21 error errno 2
  22 error musterv3@1.0.0 serve: `webpack --mode development`
  22 error Exit status 2
  23 error Failed at the musterv3@1.0.0 serve script.
  23 error This is probably not a problem with npm. There is likely additional logging output above.
  24 verbose exit [ 2, true ]
  </code></pre>