WIP - prettier errors for missing loader

Author: weaverryan

lib/config-generator.js

@@ -6,6 +6,8 @@ const packageHelper = require('./package-helper');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const WebpackChunkHash = require('webpack-chunk-hash');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const missingLoaderTransformer = require('./friendly-errors/transformers/missing-loader');
+const missingLoaderFormatter = require('./friendly-errors/formatters/missing-loader');
 
 class ConfigGenerator
 {
@@ -375,6 +377,12 @@ class ConfigGenerator
 
         plugins.push(new FriendlyErrorsWebpackPlugin({
             clearConsole: true,
+            additionalTransformers: [
+                missingLoaderTransformer
+            ],
+            additionalFormatters: [
+                missingLoaderFormatter
+            ]
         }));
 
         return plugins;

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

@@ -0,0 +1,49 @@
+const chalk = require('chalk');
+
+function formatErrors(errors) {
+    if (errors.length === 0) {
+        return [];
+    }
+
+    var messages = [];
+    for (let error of errors) {
+        let neededCode = `Encore.${error.featureMethod}`;
+        const fixes = [];
+        fixes.push(`Add ${chalk.green(neededCode)} to your webpack.config.js file.`);
+
+        // TODO - I need some key that describes the "feature"
+        // then, I need to be able to look up that dependency to
+        // see what packages (if any) are missing
+        // maybe even put the featureMethod into that file
+
+        messages = messages.concat([
+            chalk.red(`Error loading ${chalk.yellow(error.file)}`),
+            '',
+            `${chalk.bgGreen.black('', 'FIX', '')} To load ${error.loaderFileDescription}:`,
+        ]);
+
+        let index = 0;
+        for (let fix of fixes) {
+            messages.push(`        ${++index}. ${fix}`)
+        }
+
+        messages.push('');
+    }
+    return messages;
+
+    var msg = chalk.bgGreen.black('', 'WOH', '');
+
+    return [
+        msg,
+        'Hi',
+        'Hello'
+    ];
+}
+
+function format(errors) {
+    return formatErrors(errors.filter((e) => (
+        e.type === 'loader-not-enabled'
+    )));
+}
+
+module.exports = format;

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

@@ -0,0 +1,50 @@
+const TYPE = 'loader-not-enabled';
+
+function isMissingLoaderError(e) {
+    if (e.name !== 'ModuleParseError') {
+        return false;
+    }
+
+    if (e.message.indexOf('You may need an appropriate loader') === -1) {
+        return false;
+    }
+
+    return true;
+}
+
+function getFileExtension(filename) {
+    const str = filename.replace(/\?.*/, '');
+    const split = str.split('.');
+
+    return split.pop();
+}
+
+function transform(error) {
+    if (!isMissingLoaderError(error)) {
+        return error;
+    }
+
+    const extension = getFileExtension(error.file);
+    let message;
+    switch (extension) {
+        case 'sass':
+        case 'scss':
+            error.featureMethod = 'enableSassLoader()';
+            error.loaderFileDescription = 'SASS files';
+            break;
+        case 'less':
+            error.featureMethod = 'enableLessLoader()';
+            error.loaderFileDescription = 'LESS files';
+            break;
+        // todo - handle more
+        default:
+            return error;
+    }
+    return Object.assign({}, error, {
+        type: TYPE,
+        severity: 900,
+        name: 'Loader not enabled'
+    });
+}
+
+module.exports = transform;

lib/package-helper.js

@@ -12,6 +12,16 @@ function ensurePackagesExist(packageNames, error) {
     if (missingPackageName.length > 0) {
         throw new Error(error);
     }
+
+    let message = `You must install the ${missingPackageNames.join(' and ')} package${missingPackageNames.length > 1 ? 's' : ''} to use ${requestedFeature}`;
+    let yarnInstalls = missingPackageNames.map((packageName) => {
+        return `  yarn add ${packageName} --dev`;
+    });
+
+    throw new Error(`
+${message}
+${yarnInstalls.join("\n")}
+`);
 }
 
 module.exports = {

package.json

@@ -26,6 +26,7 @@
     "babel-core": "^6.24.0",
     "babel-loader": "^7.0.0-beta",
     "babel-preset-env": "^1.2.2",
+    "chalk": "^1.1.3",
     "clean-webpack-plugin": "^0.1.16",
     "css-loader": "^0.26.2",
     "extract-text-webpack-plugin": "^2.1.0",