feature #371 Add formatter and transformer for module not found error (BackEndTea)

This PR was squashed before being merged into the master branch (closes #371).

Discussion
----------

Add formatter and transformer for module not found error

Fixes #351

I don't work with js much, so any feedback is appreciated.

Commits
-------

f496cbf Fix copy paste errors and use template literals
eb4dee5 Add formatter and transformer for module not found error

Author: weaverryan

lib/friendly-errors/formatters/missing-css-file.js

@@ -0,0 +1,39 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const chalk = require('chalk');
+
+function formatErrors(errors) {
+    if (errors.length === 0) {
+        return [];
+    }
+
+    let messages = [];
+
+    messages.push(
+        chalk.red('Module build failed: Module not found:')
+    );
+    for (let error of errors) {
+        messages.push(`${error.file} contains a reference to the file ${error.ref}.`);
+        messages.push('This file can not be found, please check it for typos or update it if the file got moved.');
+        messages.push('');
+    }
+
+    return messages;
+}
+
+function format(errors) {
+    return formatErrors(errors.filter((e) => (
+        e.type === 'missing-css-file'
+    )));
+}
+
+module.exports = format;

lib/friendly-errors/transformers/missing-css-file.js

@@ -0,0 +1,47 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const TYPE = 'missing-css-file';
+
+function isMissingConfigError(e) {
+    if (e.name !== 'ModuleNotFoundError') {
+        return false;
+    }
+
+    if (e.message.indexOf('Module not found: Error: Can\'t resolve') === -1) {
+        return false;
+    }
+
+    return true;
+}
+
+function getReference(error) {
+    const index = error.message.indexOf('Can\'t resolve \'') + 15;
+    const endIndex = error.message.indexOf('\' in \'');
+
+    return error.message.substring(index, endIndex);
+}
+
+function transform(error) {
+    if (!isMissingConfigError(error)) {
+        return error;
+    }
+
+    error = Object.assign({}, error);
+
+    error.type = TYPE;
+    error.ref = getReference(error);
+    error.severity = 900;
+
+    return error;
+}
+
+module.exports = transform;

lib/plugins/friendly-errors.js

@@ -10,6 +10,8 @@
 'use strict';
 
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const missingCssFileTransformer = require('../friendly-errors/transformers/missing-css-file');
+const missingCssFileFormatter = require('../friendly-errors/formatters/missing-css-file');
 const missingLoaderTransformer = require('../friendly-errors/transformers/missing-loader');
 const missingLoaderFormatter = require('../friendly-errors/formatters/missing-loader');
 const missingPostCssConfigTransformer = require('../friendly-errors/transformers/missing-postcss-config');
@@ -24,10 +26,12 @@ module.exports = function(webpackConfig) {
     const friendlyErrorsPluginOptions = {
         clearConsole: false,
         additionalTransformers: [
+            missingCssFileTransformer,
             missingLoaderTransformer,
             missingPostCssConfigTransformer
         ],
         additionalFormatters: [
+            missingCssFileFormatter,
             missingLoaderFormatter,
             missingPostCssConfigFormatter
         ],

test/friendly-errors/formatters/missing-css-file.js

@@ -0,0 +1,48 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const expect = require('chai').expect;
+const formatter = require('../../../lib/friendly-errors/formatters/missing-css-file');
+
+describe('formatters/missing-css-file', () => {
+
+    describe('test format()', () => {
+        it('works with no errors', () => {
+            const actualErrors = formatter([]);
+            expect(actualErrors).to.be.empty;
+        });
+
+        it(' filters errors that dont have the correct type', () => {
+            const errors = [
+                { type: 'missing-css-file', file: 'some-file.sass', ref: '../images/foo.png' },
+                { type: 'other-type', file: 'other-type.sass' }
+            ];
+
+            const actualErrors = formatter(errors);
+            expect(JSON.stringify(actualErrors)).to.contain('some-file.sass');
+            expect(JSON.stringify(actualErrors)).to.not.contain('other-type.sass');
+        });
+
+        it('formats the error correctly', () => {
+            const error = {
+                type: 'missing-css-file',
+                file: '/some/file.css',
+                ref: '../images/foo.png'
+            };
+
+            const actualErrors = formatter([error]);
+            expect(JSON.stringify(actualErrors)).to.contain('/some/file.css contains a reference to the file ../images/foo.png');
+            expect(JSON.stringify(actualErrors)).to.contain('This file can not be found, please check it for typos or update it if the file got moved.');
+            // all needed packages will be present when running tests
+            expect(JSON.stringify(actualErrors)).to.not.contain('yarn add');
+        });
+    });
+});

test/friendly-errors/transformers/missing-css-file.js

@@ -0,0 +1,53 @@
+/*
+ * This file is part of the Symfony Webpack Encore package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict';
+
+const expect = require('chai').expect;
+const transform = require('../../../lib/friendly-errors/transformers/missing-css-file');
+
+describe('transform/missing-css-file', () => {
+
+    describe('test transform', () => {
+        it('Error not with "ModuleNotFoundError" name is ignored', () => {
+            const startError = {
+                name: 'OtherParseError',
+                message: 'You may need an appropriate loader',
+                file: '/path/to/file.sass'
+            };
+            const actualError = transform(Object.assign({}, startError));
+
+            expect(actualError).to.deep.equal(startError);
+        });
+
+        it('Error not containing "Module not found: Error: Can\'t resolve" is ignored', () => {
+            const startError = {
+                name: 'ModuleNotFoundError',
+                message: 'Some other message',
+                file: '/path/to/file.sass'
+            };
+            const actualError = transform(Object.assign({}, startError));
+
+            expect(actualError).to.deep.equal(startError);
+        });
+
+        it('Matching error is properly transformed', () => {
+            const startError = {
+                name: 'ModuleNotFoundError',
+                message: 'Module build failed: ModuleNotFoundError: Module not found: Error: Can\'t resolve \'./../images/symfony_logo.png2\' in \'/Users/weaverryan/Sites/os/webpack-encore/tmp_project_playing/css\'',
+                file: '/Users/weaverryan/Sites/os/webpack-encore/tmp_project_playing/css'
+            };
+            const actualError = transform(Object.assign({}, startError));
+
+            expect(actualError.ref).to.deep.equal('./../images/symfony_logo.png2');
+            expect(actualError.type).to.deep.equal('missing-css-file');
+            expect(actualError.file).to.deep.equal('/Users/weaverryan/Sites/os/webpack-encore/tmp_project_playing/css');
+        });
+    });
+});

test/plugins/friendly-errors.js

@@ -30,8 +30,8 @@ describe('plugins/friendly-errors', () => {
         const plugin = friendlyErrorsPluginUtil(config);
         expect(plugin).to.be.instanceof(FriendlyErrorsWebpackPlugin);
         expect(plugin.shouldClearConsole).to.equal(false);
-        expect(plugin.formatters.length).to.equal(5);
-        expect(plugin.transformers.length).to.equal(5);
+        expect(plugin.formatters.length).to.equal(6);
+        expect(plugin.transformers.length).to.equal(6);
     });
 
     it('with options callback', () => {
@@ -46,7 +46,7 @@ describe('plugins/friendly-errors', () => {
         expect(plugin).to.be.instanceof(FriendlyErrorsWebpackPlugin);
         expect(plugin.shouldClearConsole).to.equal(true);
         expect(plugin.formatters.length).to.equal(3);
-        expect(plugin.transformers.length).to.equal(5);
+        expect(plugin.transformers.length).to.equal(6);
     });
 
     it('with options callback that returns an object', () => {