Throw an error if the user tries to use (e.g.) lang="scss" in vue, but has not activated that loader

Author: weaverryan

lib/config-generator.js

@@ -22,6 +22,8 @@ const missingLoaderTransformer = require('./friendly-errors/transformers/missing
 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 pathUtil = require('./config/path-util');
 const cssLoaderUtil = require('./loaders/css');
 const sassLoaderUtil = require('./loaders/sass');
@@ -316,11 +318,13 @@ class ConfigGenerator {
             clearConsole: false,
             additionalTransformers: [
                 missingLoaderTransformer,
-                missingPostCssConfigTransformer
+                missingPostCssConfigTransformer,
+                vueUnactivatedLoaderTransformer
             ],
             additionalFormatters: [
                 missingLoaderFormatter,
-                missingPostCssConfigFormatter
+                missingPostCssConfigFormatter,
+                vueUnactivatedLoaderFormatter
             ],
             compilationSuccessInfo: {
                 messages: []

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

@@ -0,0 +1,42 @@
+/*
+ * This file is part of the Symfony 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 = [];
+    // there will be an error for *every* file, but showing
+    // the error over and over again is not helpful
+
+    messages.push(
+        chalk.red('Vue processing failed:')
+    );
+    messages.push('');
+    for (let error of errors) {
+        messages.push(` * ${error.message}`);
+    }
+
+    messages.push('');
+
+    return messages;
+}
+
+function format(errors) {
+    return formatErrors(errors.filter((e) => (
+        e.type === 'vue-unactivated-loader-error'
+    )));
+}
+
+module.exports = format;

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

@@ -0,0 +1,39 @@
+/*
+ * This file is part of the Symfony 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 = 'vue-unactivated-loader-error';
+
+function isVueUnactivatedLoaderError(e) {
+    if (e.name !== 'ModuleBuildError') {
+        return false;
+    }
+
+    if (e.message.indexOf('Cannot process lang=') === -1) {
+        return false;
+    }
+
+    return true;
+}
+
+function transform(error) {
+    if (!isVueUnactivatedLoaderError(error)) {
+        return error;
+    }
+
+    error = Object.assign({}, error);
+
+    error.type = TYPE;
+    error.severity = 900;
+
+    return error;
+}
+
+module.exports = transform;

lib/loaders/sass.js

@@ -37,7 +37,7 @@ module.exports = {
 
         sassLoaders.push({
             loader: 'sass-loader',
-            options: Object.assign(sassOptions, {
+            options: Object.assign({}, sassOptions, {
                 // needed by the resolve-url-loader
                 sourceMap: (true === webpackConfig.sassOptions.resolve_url_loader) || webpackConfig.useSourceMaps
             }),

lib/loaders/vue-unactivated-loader.js

@@ -0,0 +1,36 @@
+/*
+ * This file is part of the Symfony 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 loaderUtils = require('loader-utils');
+
+/**
+ * A "fake" loader that's set inside vue-loader for languages
+ * when they are not activated in Encore.
+ *
+ * For example, if the user has not called enableSassLoader(),
+ * then this loader is added, so that the user gets an error if
+ * they try to use lang="scss" inside Vue.
+ *
+ * This is necessary because vue-loader *always* automatically
+ * processes new lang values through a loader (e.g. lang="foo"
+ * will automatically try to use a foo-loader). If we did *not*
+ * register this as a loader for scss (for example), then the
+ * user *would* still be able to use lang="scss"... but it would
+ * not use our custom sass-loader configuration.
+ *
+ * @return {function}
+ */
+module.exports = function() {
+    const options = loaderUtils.getOptions(this) || {};
+
+    // the vue-unactivated-loader-error transformer expects some of this language
+    throw new Error(`Cannot process lang="${options.lang}" inside ${this.resourcePath}: the ${options.loaderName} is not activated. Call ${options.featureCommand} in webpack.config.js to enable it.`);
+};

lib/loaders/vue.js

@@ -53,28 +53,22 @@ module.exports = {
                 cssLoaderUtil.getLoaders(webpackConfig, true),
                 true
             ),
+        };
 
-            /*
-             * The optional loaders are always added here. Without these,
-             * if the user forgets to enable an optional loader but uses
-             * (for example) lang="scss" inside vue, it *will* work, becaus
-             * vue-loader will automatically register the sass-loader. But,
-             * it will completely skip our configuration (e.g. ExtractTextPlugin).
-             */
-
-            scss: extractText.extract(
+        if (webpackConfig.useSassLoader) {
+            loaders.scss = extractText.extract(
                 webpackConfig,
                 sassLoaderUtil.getLoaders(webpackConfig, {}, true),
                 true
-            ),
+            );
 
             /*
              * indentedSyntax is required here for SASS. It's not required
              * when using the loaders normally, because the .sass extension
              * is detected and this option is activated automatically inside
              * sass-loader.
              */
-            sass: extractText.extract(
+            loaders.sass = extractText.extract(
                 webpackConfig,
                 sassLoaderUtil.getLoaders(
                     webpackConfig,
@@ -84,14 +78,43 @@ module.exports = {
                     true
                 ),
                 true
-            ),
+            );
+        } else {
+            loaders.scss = {
+                loader: require.resolve('./vue-unactivated-loader'),
+                options: {
+                    lang: 'scss',
+                    loaderName: 'sass-loader',
+                    featureCommand: loaderFeatures.getLoaderFeatureMethod('sass')
+                }
+            };
 
-            less: extractText.extract(
+            loaders.sass = {
+                loader: require.resolve('./vue-unactivated-loader'),
+                options: {
+                    lang: 'sass',
+                    loaderName: 'sass-loader',
+                    featureCommand: loaderFeatures.getLoaderFeatureMethod('sass')
+                }
+            };
+        }
+
+        if (webpackConfig.useLessLoader) {
+            loaders.less = extractText.extract(
                 webpackConfig,
                 lessLoaderUtil.getLoaders(webpackConfig, true),
                 true
-            )
-        };
+            );
+        } else {
+            loaders.scss = {
+                loader: require.resolve('./vue-unactivated-loader'),
+                options: {
+                    lang: 'less',
+                    loaderName: 'less-loader',
+                    featureCommand: loaderFeatures.getLoaderFeatureMethod('less')
+                }
+            };
+        }
 
         return [
             {

lib/test/setup.js

@@ -59,7 +59,7 @@ function createWebpackConfig(testAppDir, outputDirName = '', command, argv = {})
     return config;
 }
 
-function runWebpack(webpackConfig, callback) {
+function runWebpack(webpackConfig, callback, allowCompilationError = false) {
     validator(webpackConfig);
     const compiler = webpack(configGenerator(webpackConfig));
     compiler.run((err, stats) => {
@@ -74,7 +74,7 @@ function runWebpack(webpackConfig, callback) {
 
         const info = stats.toJson();
 
-        if (stats.hasErrors()) {
+        if (stats.hasErrors() && !allowCompilationError) {
             console.error(info.errors);
 
             throw new Error('Compilation error running webpack!');
@@ -84,7 +84,7 @@ function runWebpack(webpackConfig, callback) {
             console.warn(info.warnings);
         }
 
-        callback(assertUtil(webpackConfig));
+        callback(assertUtil(webpackConfig), stats);
     });
 }
 

package.json

@@ -36,6 +36,7 @@
     "file-loader": "^0.10.1",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "fs-extra": "^2.0.0",
+    "loader-utils": "^1.1.0",
     "lodash": ">=3.5 <5",
     "pkg-up": "^1.0.0",
     "pretty-error": "^2.1.0",

test/functional.js

@@ -617,7 +617,7 @@ module.exports = {
              * That's because, in theory, you should be able to
              * run Encore from other directories, give you set
              * the context. However, in this case, the vue-loader
-             * users load-postcss-config to load the postcss config,
+             * uses load-postcss-config to load the postcss config,
              * but it uses process.cwd() to find it, instead of the
              * context. So, in this case, we *must* set the cwd()
              * to be the temp test directory.
@@ -637,6 +637,8 @@ module.exports = {
             config.setPublicPath('/build');
             config.addEntry('main', './vuejs/main');
             config.enableVueLoader();
+            config.enableSassLoader();
+            config.enableLessLoader();
             config.configureBabel(function(config) {
                 config.presets = [
                     ['env', {
@@ -682,5 +684,17 @@ module.exports = {
                 );
             });
         });
+
+        it('Vue.js error when using non-activated loaders', (done) => {
+            const config = createWebpackConfig('www/build', 'dev');
+            config.setPublicPath('/build');
+            config.addEntry('main', './vuejs/main');
+            config.enableVueLoader();
+
+            testSetup.runWebpack(config, (webpackAssert, stats) => {
+                expect(stats.toJson().errors[0]).to.contain('Cannot process lang="less" inside');
+                done();
+            }, true);
+        });
     });
 });