Fixing missing-loader for vue-loader 16

Author: weaverryan

lib/friendly-errors/transformers/missing-loader.js

@@ -26,14 +26,23 @@ function isMissingLoaderError(e) {
 }
 
 function isErrorFromVueLoader(filename) {
-    return filename.includes('??vue-loader-options');
+    // vue2
+    if (filename.includes('??vue-loader-options')) {
+        return true;
+    }
+
+    // vue3
+    if (filename.includes('vue-loader/dist??')) {
+        return true;
+    }
 }
 
 function getFileExtension(filename) {
     // ??vue-loader-options
     if (isErrorFromVueLoader(filename)) {
         // vue is strange, the "filename" is reported as something like
-        // /path/to/project/node_modules/vue-loader/lib??vue-loader-options!./vuejs/App.vue?vue&type=style&index=1&lang=scss
+        // vue2: /path/to/project/node_modules/vue-loader/lib??vue-loader-options!./vuejs/App.vue?vue&type=style&index=1&lang=scss
+        // vue3: /path/to/project/node_modules/vue-loader/dist??ref--4-0!./vuejs/App.vue?vue&type=style&index=1&lang=scss
         const langPos = filename.indexOf('lang=') + 5;
         let endLangPos = filename.indexOf('&', langPos);
         if (endLangPos === -1) {

test/friendly-errors/transformers/missing-loader.js

@@ -82,7 +82,7 @@ describe('transform/missing-loader', () => {
             expect(actualError.loaderName).to.deep.equal('typescript');
         });
 
-        it('vue-loader is handled correctly', () => {
+        it('vue-loader15 is handled correctly', () => {
             const startError = {
                 name: 'ModuleParseError',
                 message: 'Module parse failed: Unexpected character \'#\' (35:0)\nYou may need an appropriate loader to handle this file type.\n| \n| \n| #app {\n|   display: flex;\n|   color: #2c3e90;',
@@ -96,6 +96,20 @@ describe('transform/missing-loader', () => {
             expect(actualError.isVueLoader).to.be.true;
         });
 
+        it('vue-loader16 is handled correctly', () => {
+            const startError = {
+                name: 'ModuleParseError',
+                message: 'Module parse failed: Unexpected character \'#\' (35:0)\nYou may need an appropriate loader to handle this file type.\n| \n| \n| #app {\n|   display: flex;\n|   color: #2c3e90;',
+                file: '/path/to/project/node_modules/vue-loader/dist??ref--4-0!./vuejs/App.vue?vue&type=style&index=1&lang=scss'
+            };
+            const actualError = transform(Object.assign({}, startError));
+
+            expect(actualError.name).to.deep.equal('Loader not enabled');
+            expect(actualError.type).to.deep.equal('loader-not-enabled');
+            expect(actualError.loaderName).to.deep.equal('sass');
+            expect(actualError.isVueLoader).to.be.true;
+        });
+
         it('vue-loader is handled correctly, more options after lang=', () => {
             const startError = {
                 name: 'ModuleParseError',