Updating our custom formatting of vue loader problems

Author: weaverryan

index.js

@@ -210,7 +210,7 @@ class Encore {
      *      // final output file will be main.js in the output directory
      *      Encore.addEntry('main', './path/to/some_file.js');
      *
-     * If the JavaScript file imports/requires CSS/SASS/LESS files,
+     * If the JavaScript file imports/requires CSS/Sass/LESS files,
      * then a CSS file (e.g. main.css) will also be output.
      *
      * @param {string} name       The name (without extension) that will be used

lib/features.js

@@ -19,7 +19,7 @@ const features = {
     sass: {
         method: 'enableSassLoader()',
         packages: ['sass-loader', 'node-sass'],
-        description: 'load SASS files'
+        description: 'load Sass files'
     },
     less: {
         method: 'enableLessLoader()',

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

@@ -19,6 +19,7 @@ function formatErrors(errors) {
     }
 
     let messages = [];
+
     for (let error of errors) {
         const fixes = [];
 
@@ -38,10 +39,17 @@ function formatErrors(errors) {
             fixes.push('You may need to install and configure a special loader for this file type.');
         }
 
-        messages = messages.concat([
-            chalk.red(`Error loading ${chalk.yellow(error.file)}`),
-            ''
-        ]);
+        // vue hides their filenames (via a stacktrace) inside error.origin
+        if (error.isVueLoader) {
+            messages.push(error.message);
+            messages.push(error.origin);
+            messages.push('');
+        } else {
+            messages = messages.concat([
+                chalk.red(`Error loading ${chalk.yellow(error.file)}`),
+                ''
+            ]);
+        }
 
         if (error.loaderName) {
             messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To ${loaderFeatures.getFeatureDescription(error.loaderName)}:`);

lib/friendly-errors/formatters/vue-unactivated-loader-error.js

@@ -23,7 +23,24 @@ function isMissingLoaderError(e) {
     return true;
 }
 
+function isErrorFromVueLoader(filename) {
+    return filename.includes('??vue-loader-options');
+}
+
 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
+        const langPos = filename.indexOf('lang=') + 5;
+        let endLangPos = filename.indexOf('&', langPos);
+        if (endLangPos === -1) {
+            endLangPos = filename.length;
+        }
+
+        return filename.substring(langPos, endLangPos);
+    }
+
     const str = filename.replace(/\?.*/, '');
     const split = str.split('.');
 
@@ -36,6 +53,7 @@ function transform(error) {
     }
 
     error = Object.assign({}, error);
+    error.isVueLoader = isErrorFromVueLoader(error.file);
 
     const extension = getFileExtension(error.file);
     switch (extension) {
@@ -49,6 +67,9 @@ function transform(error) {
         case 'jsx':
             error.loaderName = 'react';
             break;
+        case 'vue':
+            error.loaderName = 'vue';
+            break;
         case 'tsx':
         case 'ts':
             error.loaderName = 'typescript';

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

@@ -24,7 +24,7 @@ module.exports = {
 
         const sassLoaders = [...cssLoader.getLoaders(webpackConfig)];
         if (true === webpackConfig.sassOptions.resolveUrlLoader) {
-            // responsible for resolving SASS url() paths
+            // responsible for resolving Sass url() paths
             // without this, all url() paths must be relative to the
             // entry file, not the file that contains the url()
             sassLoaders.push({

lib/friendly-errors/transformers/vue-unactivated-loader-error.js

@@ -14,8 +14,6 @@ const missingLoaderTransformer = require('../friendly-errors/transformers/missin
 const missingLoaderFormatter = require('../friendly-errors/formatters/missing-loader');
 const missingPostCssConfigTransformer = require('../friendly-errors/transformers/missing-postcss-config');
 const missingPostCssConfigFormatter = require('../friendly-errors/formatters/missing-postcss-config');
-const vueUnactivatedLoaderTransformer = require('../friendly-errors/transformers/vue-unactivated-loader-error');
-const vueUnactivatedLoaderFormatter = require('../friendly-errors/formatters/vue-unactivated-loader-error');
 const applyOptionsCallback = require('../utils/apply-options-callback');
 
 /**
@@ -27,13 +25,11 @@ module.exports = function(webpackConfig) {
         clearConsole: false,
         additionalTransformers: [
             missingLoaderTransformer,
-            missingPostCssConfigTransformer,
-            vueUnactivatedLoaderTransformer
+            missingPostCssConfigTransformer
         ],
         additionalFormatters: [
             missingLoaderFormatter,
-            missingPostCssConfigFormatter,
-            vueUnactivatedLoaderFormatter
+            missingPostCssConfigFormatter
         ],
         compilationSuccessInfo: {
             messages: []

lib/loaders/sass.js

@@ -23,7 +23,7 @@ module.exports = function(plugins, webpackConfig) {
      * This section is a bit mysterious. The "minimize"
      * true is read and used to minify the CSS.
      * But as soon as this plugin is included
-     * at all, SASS begins to have errors, until the context
+     * at all, Sass begins to have errors, until the context
      * and output options are specified. At this time, I'm
      * not totally sure what's going on here
      * https://github.com/jtangelder/sass-loader/issues/285

lib/loaders/vue-unactivated-loader.js

@@ -39,7 +39,7 @@ describe('formatters/missing-loader', () => {
             };
 
             const actualErrors = formatter([error]);
-            expect(JSON.stringify(actualErrors)).to.contain('To load SASS files');
+            expect(JSON.stringify(actualErrors)).to.contain('To load Sass files');
             expect(JSON.stringify(actualErrors)).to.contain('Encore.enableSassLoader()');
             // all needed packages will be present when running tests
             expect(JSON.stringify(actualErrors)).to.not.contain('yarn add');
@@ -55,5 +55,21 @@ describe('formatters/missing-loader', () => {
             expect(JSON.stringify(actualErrors)).to.contain('To load /some/file.jpg');
             expect(JSON.stringify(actualErrors)).to.contain('You may need to install and configure a special loader');
         });
+
+        it('vue loader error includes original message & origin', () => {
+            const error = {
+                message: 'I am a message from vue-loader',
+                isVueLoader: true,
+                loaderName: 'sass',
+                origin: 'Some stacktrace info from origin',
+                type: 'loader-not-enabled',
+                file: '/path/to/project/node_modules/vue-loader/lib??vue-loader-options!./vuejs/App.vue?vue&type=style&index=1&lang=scss'
+            };
+
+            const actualErrors = formatter([error]);
+            expect(JSON.stringify(actualErrors)).to.contain('I am a message from vue-loader');
+            expect(JSON.stringify(actualErrors)).to.contain('Some stacktrace info from origin');
+            expect(JSON.stringify(actualErrors)).to.not.contain('/path/to/project/node_modules/vue-loader');
+        });
     });
 });

lib/plugins/friendly-errors.js

@@ -41,7 +41,8 @@ describe('transform/missing-loader', () => {
             const startError = {
                 name: 'ModuleParseError',
                 message: 'You may need an appropriate loader',
-                file: '/path/to/file.jpg'
+                file: '/path/to/file.jpg',
+                isVueLoader: false
             };
             const actualError = transform(Object.assign({}, startError));
 
@@ -73,5 +74,32 @@ describe('transform/missing-loader', () => {
             expect(actualError.type).to.deep.equal('loader-not-enabled');
             expect(actualError.loaderName).to.deep.equal('typescript');
         });
+
+        it('vue-loader 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/lib??vue-loader-options!./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',
+                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/lib??vue-loader-options!./vuejs/App.vue?vue&type=style&index=1&lang=scss&foo=bar'
+            };
+            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');
+        });
     });
 });

lib/plugins/loader-options.js

@@ -961,10 +961,10 @@ module.exports = {
             config.addEntry('main', './vuejs/main');
             config.enableVueLoader();
 
-            testSetup.runWebpack(config, (webpackAssert, stats) => {
-                expect(stats.toJson().errors[0]).to.contain('Cannot process lang="less" inside');
-                expect(stats.toJson().errors[1]).to.contain('Cannot process lang="sass" inside');
-                expect(stats.toJson().errors[2]).to.contain('Cannot process lang="scss" inside');
+            testSetup.runWebpack(config, (webpackAssert, stats, output) => {
+                expect(output).to.contain('To load LESS files');
+                expect(output).to.contain('To load Sass files');
+
                 done();
             }, true);
         });

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

@@ -61,10 +61,13 @@ function createWebpackConfig(testAppDir, outputDirName = '', command, argv = {})
 
 function runWebpack(webpackConfig, callback, allowCompilationError = false) {
     const stdoutWrite = process.stdout.write;
+    const stdOutContents = [];
 
     try {
         // Mute stdout
-        process.stdout.write = () => {};
+        process.stdout.write = (message) => {
+            stdOutContents.push(message);
+        };
 
         validator(webpackConfig);
 
@@ -94,7 +97,7 @@ function runWebpack(webpackConfig, callback, allowCompilationError = false) {
 
             // Restore stdout and then call the callback
             process.stdout.write = stdoutWrite;
-            callback(assertUtil(webpackConfig), stats);
+            callback(assertUtil(webpackConfig), stats, stdOutContents.join("\n"));
         });
     } catch (e) {
         // Restore stdout and then re-throw the exception