Completing error handling - showing what method to call & missing packages

Author: weaverryan

lib/config-generator.js

@@ -2,7 +2,7 @@ const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('./webpack-manifest-plugin');
 const DeleteUnusedEntriesJSPlugin = require('./DeleteUnusedEntriesJSPlugin');
-const packageHelper = require('./package-helper');
+const loaderFeatures = require('./loader-features');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const WebpackChunkHash = require('webpack-chunk-hash');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
@@ -83,10 +83,7 @@ class ConfigGenerator
             },
         ];
         if (this.webpackConfig.usePostCssLoader) {
-            packageHelper.ensurePackagesExist(
-                ['postcss-loader'],
-                'You must install the "postcss-loader" package to use enablePostCssLoader().'
-            );
+            loaderFeatures.ensureLoaderPackagesExist('postcss');
 
             cssLoaders.push({
                 loader: 'postcss-loader'+this.getSourceMapOption(),
@@ -114,10 +111,7 @@ class ConfigGenerator
             });
 
             if (this.webpackConfig.useReact) {
-                packageHelper.ensurePackagesExist(
-                    ['babel-preset-react'],
-                    'You must install the "babel-preset-react" package to use enableReact().'
-                );
+                loaderFeatures.ensureLoaderPackagesExist('react');
 
                 babelConfig.presets.push('react');
             }
@@ -168,10 +162,7 @@ class ConfigGenerator
         ]);
 
         if (this.webpackConfig.useSassLoader) {
-            packageHelper.ensurePackagesExist(
-                ['sass-loader', 'node-sass'],
-                'You must install the "sass-loader" and "node-sass" packages to use enableLessLoader().'
-            );
+            loaderFeatures.ensureLoaderPackagesExist('sass');
 
             rules.push({
                 test: /\.s[ac]ss$/,
@@ -198,10 +189,7 @@ class ConfigGenerator
         }
 
         if (this.webpackConfig.useLessLoader) {
-            packageHelper.ensurePackagesExist(
-                ['less-loader'],
-                'You must install the "less-loader" package to use enableLessLoader().'
-            );
+            loaderFeatures.ensureLoaderPackagesExist('less');
 
             rules.push({
                 test: /\.less/,

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

@@ -1,4 +1,6 @@
 const chalk = require('chalk');
+const loaderFeatures = require('../../loader-features');
+const packageHelper = require('../../package-helper');
 
 function formatErrors(errors) {
     if (errors.length === 0) {
@@ -7,21 +9,41 @@ function formatErrors(errors) {
 
     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
+        if (error.loaderName) {
+            let neededCode = `Encore.${loaderFeatures.getLoaderFeatureMethod(error.loaderName)}`;
+            fixes.push(`Add ${chalk.green(neededCode)} to your webpack.config.js file.`);
+
+            const loaderFeatureConfig = loaderFeatures.getLoaderFeatureConfig(error.loaderName);
+            const packageRecommendations = packageHelper.getPackageRecommendations(
+                loaderFeatureConfig.packages
+            );
+
+            if (packageRecommendations) {
+                fixes.push(`${packageRecommendations.message}\n              ${packageRecommendations.yarnInstall}`);
+
+            }
+
+            // 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
+        } else {
+            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)}`),
-            '',
-            `${chalk.bgGreen.black('', 'FIX', '')} To load ${error.loaderFileDescription}:`,
+            ''
         ]);
 
+        if (error.loaderName) {
+            messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To ${loaderFeatures.getLoaderFeatureDescription(error.loaderName)}:`);
+        } else {
+            messages.push(`${chalk.bgGreen.black('', 'FIX', '')} To load ${error.file}:`);
+        }
+
         let index = 0;
         for (let fix of fixes) {
             messages.push(`        ${++index}. ${fix}`)

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

@@ -25,18 +25,17 @@ function transform(error) {
     }
 
     const extension = getFileExtension(error.file);
-    let message;
     switch (extension) {
         case 'sass':
         case 'scss':
-            error.featureMethod = 'enableSassLoader()';
-            error.loaderFileDescription = 'SASS files';
+            error.loaderName = 'sass';
             break;
         case 'less':
-            error.featureMethod = 'enableLessLoader()';
-            error.loaderFileDescription = 'LESS files';
+            error.loaderName = 'less';
             break;
-        // todo - handle more
+        case 'jsx':
+            error.loaderName = 'react';
+        // add more as needed
         default:
             return error;
     }

lib/loader-features.js

@@ -0,0 +1,58 @@
+const packageHelper = require('./package-helper');
+
+/**
+ * An object that holds internal configuration about different
+ * "loaders" that can be enabled.
+ */
+const loaderFeatures = {
+    sass: {
+        method: 'enableSassLoader()',
+        packages: ['sass-loader', 'node-sass'],
+        description: 'load SASS files'
+    },
+    less: {
+        method: 'enableLessLoader()',
+        packages: ['less-loader'],
+        description: 'load LESS files'
+    },
+    postcss: {
+        method: 'enablePostCssLoader()',
+        packages: ['postcss-loader'],
+        description: 'process through PostCSS'
+    },
+    react: {
+        method: 'enableReact()',
+        packages: ['babel-preset-react'],
+        description: 'process React JS files'
+    }
+};
+
+function getLoaderFeatureConfig(loaderName) {
+    if (!loaderFeatures[loaderName]) {
+        throw new Error(`Unknown loader feature ${loaderName}`);
+    }
+
+    return loaderFeatures[loaderName];
+}
+
+module.exports = {
+    getLoaderFeatureConfig,
+
+    // todo - probably remove this
+    ensureLoaderPackagesExist: function(loaderName) {
+        const config = getLoaderFeatureConfig(loaderName);
+
+        packageHelper.ensurePackagesExist(
+            config.packages,
+            config.method
+        );
+    },
+
+    getLoaderFeatureMethod: function(loaderName) {
+        return getLoaderFeatureConfig(loaderName).method;
+    },
+
+    getLoaderFeatureDescription: function(loaderName) {
+        return getLoaderFeatureConfig(loaderName).description;
+    }
+};

lib/package-helper.js

@@ -1,5 +1,20 @@
-function ensurePackagesExist(packageNames, error) {
-    let missingPackageName = [];
+const chalk = require('chalk');
+
+function ensurePackagesExist(packageNames, requestedFeature) {
+    const recommendation = getPackageRecommendations(packageNames, requestedFeature);
+
+    if (!recommendation) {
+        return;
+    }
+
+    throw new Error(`
+${recommendation.message}
+  ${recommendation.yarnInstall}
+`);
+}
+
+function getPackageRecommendations(packageNames, requestedFeature = null) {
+    let missingPackageNames = [];
 
     for (let packageName of packageNames) {
         try {
@@ -13,17 +28,24 @@ function ensurePackagesExist(packageNames, error) {
         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`;
+    const missingPackageNamesChalked = missingPackageNames.map(function(packageName) {
+        return chalk.green(packageName);
     });
 
-    throw new Error(`
-${message}
-${yarnInstalls.join("\n")}
-`);
+    let message = `Install ${missingPackageNamesChalked.join(' & ')}`;
+    if (requestedFeature) {
+        message += ` to use ${chalk.green(requestedFeature)}`;
+    }
+
+    let yarnInstall = chalk.yellow(`yarn add ${missingPackageNames.join(' ')} --dev`);
+
+    return {
+        message,
+        yarnInstall
+    }
 }
 
 module.exports = {
-    ensurePackagesExist
+    ensurePackagesExist,
+    getPackageRecommendations
 };