fix: skip thread-loader when cloning js rules to template compilation pipeline

Fixes vuejs/vue#12828

Author: haoqunjiang

lib/plugin-webpack4.js

@@ -182,6 +182,7 @@ function cloneRuleForRenderFn(rule) {
   const resource = rule.resource
   const resourceQuery = rule.resourceQuery
   let currentResource
+
   const res = {
     ...rule,
     resource: (resource) => {
@@ -204,6 +205,18 @@ function cloneRuleForRenderFn(rule) {
     }
   }
 
+  // Filter out `thread-loader` from the `use` array.
+  // Mitigate https://github.com./vuejs/vue/issues/12828
+  // Note this won't work if the `use` filed is a function
+  if (Array.isArray(res.use)) {
+    const isThreadLoader = (loader) => loader === 'thread-loader' || /\/node_modules\/thread-loader\//.test(loader)
+
+    res.use = res.use.filter(useEntry => {
+      const loader = typeof useEntry === 'string' ? useEntry : useEntry.loader
+      return !isThreadLoader(loader)
+    })
+  }
+
   if (rule.rules) {
     res.rules = rule.rules.map(cloneRuleForRenderFn)
   }

lib/plugin-webpack5.js

@@ -144,13 +144,14 @@ class VueLoaderPlugin {
     const { is27 } = resolveCompiler(compiler.options.context)
     let jsRulesForRenderFn = []
     if (is27) {
+      const skipThreadLoader = true
       jsRulesForRenderFn = rules
         .filter(
           (r) =>
             r !== rawVueRule &&
             (match(r, 'test.js').length > 0 || match(r, 'test.ts').length > 0)
         )
-        .map((rawRule) => cloneRule(rawRule, refs, jsRuleCheck, jsRuleResource))
+        .map((rawRule) => cloneRule(rawRule, refs, jsRuleCheck, jsRuleResource, skipThreadLoader))
     }
 
     // global pitcher (responsible for injecting template compiler loader & CSS
@@ -216,7 +217,7 @@ const jsRuleResource = (query, resource) =>
 
 let uid = 0
 
-function cloneRule(rawRule, refs, ruleCheck, ruleResource) {
+function cloneRule(rawRule, refs, ruleCheck, ruleResource, skipThreadLoader) {
   const compiledRule = ruleSetCompiler.compileRule(
     `clonedRuleSet-${++uid}`,
     rawRule,
@@ -231,7 +232,19 @@ function cloneRule(rawRule, refs, ruleCheck, ruleResource) {
     // fix conflict with config.loader and config.options when using config.use
     delete rawRule.loader
     delete rawRule.options
-    rawRule.use = ruleUse
+
+    // Filter out `thread-loader` from the `use` array.
+    // Mitigate https://github.com./vuejs/vue/issues/12828
+    // Note this won't work if the `use` filed is a function
+    if (skipThreadLoader && Array.isArray(ruleUse)) {
+      const isThreadLoader = (loader) => loader === 'thread-loader' || /\/node_modules\/thread-loader\//.test(loader)
+      rawRule.use = ruleUse.filter(useEntry => {
+        const loader = typeof useEntry === 'string' ? useEntry : useEntry.loader
+        return !isThreadLoader(loader)
+      })
+    } else {
+      rawRule.use = ruleUse
+    }
   }
 
   let currentResource