fix: transpile server not work (#4338)

packages/config/src/options.js

@@ -2,7 +2,6 @@ import path from 'path'
 import fs from 'fs'
 import defaultsDeep from 'lodash/defaultsDeep'
 import defaults from 'lodash/defaults'
-import escapeRegExp from 'lodash/escapeRegExp'
 import pick from 'lodash/pick'
 import isObject from 'lodash/isObject'
 import consola from 'consola'
@@ -319,18 +318,7 @@ export function getNuxtConfig(_options) {
     }
   }
 
-  // include SFCs in node_modules
   options.build.transpile = [].concat(options.build.transpile || [])
-    .map(module => (module instanceof RegExp)
-      ? module
-      : new RegExp(
-        escapeRegExp(
-          path.normalize(
-            module.replace(/\\/g, '/')
-          )
-        )
-      )
-    )
 
   if (options.build.quiet === true) {
     consola.level = 0

packages/webpack/src/config/base.js

@@ -3,6 +3,7 @@ import consola from 'consola'
 import TimeFixPlugin from 'time-fix-plugin'
 import clone from 'lodash/clone'
 import cloneDeep from 'lodash/cloneDeep'
+import escapeRegExp from 'lodash/escapeRegExp'
 import VueLoader from 'vue-loader'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import WebpackBar from 'webpackbar'
@@ -26,6 +27,7 @@ export default class WebpackBaseConfig {
     this.spinner = builder.spinner
     this.loaders = this.options.build.loaders
     this.buildMode = this.options.dev ? 'development' : 'production'
+    this.modulesToTranspile = this.normalizeTranspile()
   }
 
   get colors() {
@@ -45,6 +47,20 @@ export default class WebpackBaseConfig {
     }
   }
 
+  normalizeTranspile() {
+    // include SFCs in node_modules
+    const items = [/\.vue\.js/]
+    for (const pattern of this.options.build.transpile) {
+      if (pattern instanceof RegExp) {
+        items.push(pattern)
+      } else {
+        const posixModule = pattern.replace(/\\/g, '/')
+        items.push(new RegExp(escapeRegExp(path.normalize(posixModule))))
+      }
+    }
+    return items
+  }
+
   getBabelOptions() {
     const options = clone(this.options.build.babel)
 
@@ -171,9 +187,7 @@ export default class WebpackBaseConfig {
           }
 
           // item in transpile can be string or regex object
-          const modulesToTranspile = [/\.vue\.js/].concat(this.options.build.transpile)
+          return !this.modulesToTranspile.some(module => module.test(file))
-
-          return !modulesToTranspile.some(module => module.test(file))
         },
         use: perfLoader.js().concat({
           loader: require.resolve('babel-loader'),

packages/webpack/src/config/server.js

@@ -1,6 +1,7 @@
 import path from 'path'
 import fs from 'fs'
 import webpack from 'webpack'
+import escapeRegExp from 'lodash/escapeRegExp'
 import nodeExternals from 'webpack-node-externals'
 
 import WebpackBaseConfig from './base'
@@ -9,6 +10,23 @@ import VueSSRServerPlugin from './plugins/vue/server'
 export default class WebpackServerConfig extends WebpackBaseConfig {
   constructor(builder) {
     super(builder, { name: 'server', isServer: true })
+    this.whitelist = this.normalizeWhitelist()
+  }
+
+  normalizeWhitelist() {
+    const whitelist = [
+      /\.css$/,
+      /\?vue&type=style/
+    ]
+    for (const pattern of this.options.build.transpile) {
+      if (pattern instanceof RegExp) {
+        whitelist.push(pattern)
+      } else {
+        const posixModule = pattern.replace(/\\/g, '/')
+        whitelist.push(new RegExp(escapeRegExp(posixModule)))
+      }
+    }
+    return whitelist
   }
 
   devtool() {
@@ -69,11 +87,7 @@ export default class WebpackServerConfig extends WebpackBaseConfig {
       if (fs.existsSync(dir)) {
         config.externals.push(
           nodeExternals({
-            whitelist: [
+            whitelist: this.whitelist,
-              /\.css$/,
-              /\?vue&type=style/,
-              ...this.options.build.transpile
-            ],
             modulesDir: dir
           })
         )