feat: handle SFC parse error

Author: yyx990803

src/formatError.ts

@@ -0,0 +1,17 @@
+import { generateCodeFrame, CompilerError } from '@vue/compiler-sfc'
+import chalk from 'chalk'
+
+export function formatError(err: CompilerError, source: string, file: string) {
+  if (err.loc) {
+    const loc = `:${err.loc.start.line}:${err.loc.start.column}`
+    const filePath = chalk.gray(`at ${file}${loc}`)
+    const codeframe = generateCodeFrame(
+      source,
+      err.loc.start.offset,
+      err.loc.end.offset
+    )
+    err.message = `\n${chalk.red(
+      `VueCompilerError: ${err.message}`
+    )}\n${filePath}\n${chalk.yellow(codeframe)}\n`
+  }
+}

src/index.ts

@@ -23,6 +23,7 @@ import {
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
 import { genCSSModulesCode } from './cssModules'
+import { formatError } from './formatError'
 
 const VueLoaderPlugin = require('./plugin')
 
@@ -37,7 +38,7 @@ export interface VueLoaderOptions {
 
 let errorEmitted = false
 
-const loader: webpack.loader.Loader = function(source) {
+const loader: webpack.loader.Loader = function(source: string) {
   const loaderContext = this
 
   // check if plugin is installed
@@ -75,10 +76,17 @@ const loader: webpack.loader.Loader = function(source) {
   const isServer = target === 'node'
   const isProduction = mode === 'production'
 
-  const descriptor = parse(String(source), {
-    filename: resourcePath,
-    sourceMap
-  })
+  let descriptor
+  try {
+    descriptor = parse(source, {
+      filename: resourcePath,
+      sourceMap
+    })
+  } catch (e) {
+    formatError(e, source, resourcePath)
+    loaderContext.emitError(e)
+    return ``
+  }
 
   // if the query has a type field, this is a language block request
   // e.g. foo.vue?type=template&id=xxxxx

src/templateLoader.ts

@@ -1,9 +1,9 @@
 import * as webpack from 'webpack'
 import qs from 'querystring'
-import chalk from 'chalk'
 import loaderUtils from 'loader-utils'
 import { VueLoaderOptions } from './'
-import { compileTemplate, generateCodeFrame } from '@vue/compiler-sfc'
+import { formatError } from './formatError'
+import { compileTemplate } from '@vue/compiler-sfc'
 
 // Loader that compiles raw template into JavaScript functions.
 // This is injected by the global pitcher (../pitch) for template
@@ -48,21 +48,11 @@ const TemplateLoader: webpack.loader.Loader = function(source, inMap) {
       if (typeof err === 'string') {
         loaderContext.emitError(err)
       } else {
-        if (err.loc) {
-          const loc = `:${err.loc.start.line}:${err.loc.start.column}`
-          const filePath = chalk.gray(`at ${loaderContext.resourcePath}${loc}`)
-          const originalSource = inMap
-            ? inMap.sourcesContent![0]
-            : (source as string)
-          const codeframe = generateCodeFrame(
-            originalSource,
-            err.loc.start.offset,
-            err.loc.end.offset
-          )
-          err.message = `\n${chalk.red(
-            `Syntax Error: ${err.message}`
-          )}\n${filePath}\n${chalk.yellow(codeframe)}\n`
-        }
+        formatError(
+          err,
+          inMap ? inMap.sourcesContent![0] : (source as string),
+          loaderContext.resourcePath
+        )
         loaderContext.emitError(err)
       }
     })