Can't use Webpack's layers when VueLoader is used

[nskazki]

Version

Tested with 16.8.0, 16.1.2, and 15.9.8

Reproduction link

https://github.com/nskazki/vue-loader-and-webpack-layers

Steps to reproduce

1. cd into the cloned repo, run npm run build, get an error
2. checkout to 040fe39 where Vue Plugin isn't being used, run npm run build, get a compiled bundle

What is expected?

Vue Loader isn't preventing one from using experimental features in general and layers in particular.

What is actually happening?

Can't use layers in the project utilizing Vue Loader due to

[webpack-cli] Error: Compiling RuleSet failed: Properties issuerLayer are unknown (at ruleSet[0]: [object Object])
    at RuleSetCompiler.error (/Volumes/Repos/vue-loader-and-webpack-layers/node_modules/webpack/lib/rules/RuleSetCompiler.js:373:10)
    at RuleSetCompiler.compileRule (/Volumes/Repos/vue-loader-and-webpack-layers/node_modules/webpack/lib/rules/RuleSetCompiler.js:196:15)
    at /Volumes/Repos/vue-loader-and-webpack-layers/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
    at Array.map (<anonymous>)
    at RuleSetCompiler.compileRules (/Volumes/Repos/vue-loader-and-webpack-layers/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
    at RuleSetCompiler.compile (/Volumes/Repos/vue-loader-and-webpack-layers/node_modules/webpack/lib/rules/RuleSetCompiler.js:68:22)
    at match (/Volumes/Repos/vue-loader-and-webpack-layers/node_modules/vue-loader/dist/pluginWebpack5.js:156:35)
    at VueLoaderPlugin.apply (/Volumes/Repos/vue-loader-and-webpack-layers/node_modules/vue-loader/dist/pluginWebpack5.js:61:24)
    at createCompiler (/Volumes/Repos/vue-loader-and-webpack-layers/node_modules/webpack/lib/webpack.js:73:12)
    at /Volumes/Repos/vue-loader-and-webpack-layers/node_modules/webpack/lib/webpack.js:44:48

---

About Layers

1. It's an experimental feature: https://webpack.js.org/configuration/experiments/#experiments
2. There isn't much documentation to it: add experiments.layers webpack/webpack#12327, https://webpack.js.org/configuration/module/#rulelayer, https://webpack.js.org/configuration/module/#ruleissuerlayer and https://webpack.js.org/configuration/entry-context/#entry-descriptor
3. However, the feature lets you process the same CSS differently when it's imported by a certain entry point or file, which cannot be accomplished in any other way.

Special Request

I would really appreciate it if you backport the fix to vue-loader@15 because I can't upgrade to Vue@3 just yet but I'll understand if you don't.

[nskazki]

This patch does it for me:

patches/vue-loader+15.9.6.patch

diff --git a/node_modules/vue-loader/lib/plugin-webpack5.js b/node_modules/vue-loader/lib/plugin-webpack5.js
index 9b156ff..3f1cdbc 100644
--- a/node_modules/vue-loader/lib/plugin-webpack5.js
+++ b/node_modules/vue-loader/lib/plugin-webpack5.js
@@ -20,12 +20,14 @@ const ruleSetCompiler = new RuleSetCompiler([
   new BasicMatcherRulePlugin('realResource'),
   new BasicMatcherRulePlugin('issuer'),
   new BasicMatcherRulePlugin('compiler'),
+  new BasicMatcherRulePlugin("issuerLayer"),
   new DescriptionDataMatcherRulePlugin(),
   new BasicEffectRulePlugin('type'),
   new BasicEffectRulePlugin('sideEffects'),
   new BasicEffectRulePlugin('parser'),
   new BasicEffectRulePlugin('resolve'),
   new BasicEffectRulePlugin('generator'),
+  new BasicEffectRulePlugin("layer"),
   new UseEffectRulePlugin()
 ])

generated with https://www.npmjs.com/package/patch-package

[nskazki]

Actually, component.vue?type=style doesn't inherit the layer, so that patch doesn't fix the problem.

[nolimitdev]

[webpack-cli] Error: Compiling RuleSet failed: Properties issuerLayer are unknown (at clonedRuleSet-2.oneOf[0]: [object Object])
    at RuleSetCompiler.error (node_modules\webpack\lib\rules\RuleSetCompiler.js:373:10)
    at RuleSetCompiler.compileRule (node_modules\webpack\lib\rules\RuleSetCompiler.js:196:15)
    at node_modules\webpack\lib\rules\RuleSetCompiler.js:154:9
    at Array.map (<anonymous>)
    at RuleSetCompiler.compileRules (node_modules\webpack\lib\rules\RuleSetCompiler.js:153:16)
    at RuleSetCompiler.compileRule (node_modules\webpack\lib\rules\RuleSetCompiler.js:192:30)
    at cloneRule (node_modules\vue-loader\dist\pluginWebpack5.js:173:42)
    at node_modules\vue-loader\dist\pluginWebpack5.js:101:31
    at Array.map (<anonymous>)
    at VueLoaderPlugin.apply (node_modules\vue-loader\dist\pluginWebpack5.js:101:14)

vue-loader v17.0.0 was released but this still not fixed, is there something new please @yyx990803 ? Webpack layer is great feature which improves build time for more flavor/variants.

UPDATE: created reproducible repo https://github.com/nolimitdev/vue-loader-webpack-layer-error

[nskazki]

Tested against 16.8.0, the problem is still present.

[sirajtechy]

Did we get any solution for this issue ?

 INFO  Starting development server...
 ERROR  Error: Compiling RuleSet failed: Unexpected property test in condition (at ruleSet[0].rules[0].resource.test: resource => {
        currentResource = resource
        return true
      })
Error: Compiling RuleSet failed: Unexpected property test in condition (at ruleSet[0].rules[0].resource.test: resource => {
        currentResource = resource
        return true
      })
    at RuleSetCompiler.error (/Users/sirajuddeeng/Siraj-DevSpace/GHL-CRM/spm-ts/node_modules/webpack/lib/rules/RuleSetCompiler.js:373:10)
    at RuleSetCompiler.compileCondition (/Users/sirajuddeeng/Siraj-DevSpace/GHL-CRM/spm-ts/node_modules/webpack/lib/rules/RuleSetCompiler.js:309:17)
    at /Users/sirajuddeeng/Siraj-DevSpace/GHL-CRM/spm-ts/node_modules/webpack/lib/rules/BasicMatcherRulePlugin.js:29:40
    at Hook.eval [as call] (eval at create (/Users/sirajuddeeng/Siraj-DevSpace/GHL-CRM/spm-ts/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:19:1)
    

[nolimitdev]

I have created PR #2000

[nolimitdev]

@nskazki patch works for me and successfully fixes following demo for webpack layers error in vue-loader https://github.com/nolimitdev/vue-loader-webpack-layer-error