fix(builder, vue-app): order of plugin execution based on order in array (#5163)

Author: aldarund

packages/builder/src/builder.js

@@ -257,6 +257,8 @@ export default class Builder {
   }
 
   normalizePlugins() {
+    const modes = ['client', 'server']
+    const modePattern = new RegExp(`\\.(${modes.join('|')})(\\.\\w+)?$`)
     return uniqBy(
       this.options.plugins.map((p) => {
         if (typeof p === 'string') {
@@ -271,6 +273,11 @@ export default class Builder {
           p.mode = 'client'
         } else if (p.mode === undefined) {
           p.mode = 'all'
+          p.src.replace(modePattern, (_, mode) => {
+            if (modes.includes(mode)) {
+              p.mode = mode
+            }
+          })
         } else if (!['client', 'server', 'all'].includes(p.mode)) {
           consola.warn(`Invalid plugin mode (server/client/all): '${p.mode}'. Falling back to 'all'`)
           p.mode = 'all'
@@ -559,15 +566,6 @@ export default class Builder {
         })
       }
 
-      const modes = ['client', 'server']
-      const modePattern = new RegExp(`\\.(${modes.join('|')})\\.\\w+$`)
-      pluginFiles[0].replace(modePattern, (_, mode) => {
-        // mode in nuxt.config has higher priority
-        if (p.mode === 'all' && modes.includes(mode)) {
-          p.mode = mode
-        }
-      })
-
       p.src = this.relativeToBuild(p.src)
     }))
   }

packages/builder/test/builder.generate.test.js

@@ -46,7 +46,7 @@ describe('builder: builder generate', () => {
       watch: []
     }
     const builder = new Builder(nuxt, {})
-    builder.normalizePlugins = jest.fn(() => [{ name: 'test_plugin' }])
+    builder.normalizePlugins = jest.fn(() => [{ name: 'test_plugin', src: '/var/somesrc' }])
     builder.resolveLayouts = jest.fn(() => 'resolveLayouts')
     builder.resolveRoutes = jest.fn(() => 'resolveRoutes')
     builder.resolveStore = jest.fn(() => 'resolveStore')

packages/builder/test/builder.plugin.test.js

@@ -121,25 +121,27 @@ describe('builder: builder plugins', () => {
     ])
   })
 
-  test('should detect plugin mode for client/server plugins', async () => {
+  test('should detect plugin mode for client/server plugins', () => {
     const nuxt = createNuxt()
     const builder = new Builder(nuxt, {})
-    builder.plugins = [
+    builder.options.plugins = [
       { src: '/var/nuxt/plugins/test.js', mode: 'all' },
-      { src: '/var/nuxt/plugins/test.client', mode: 'all' },
-      { src: '/var/nuxt/plugins/test.server', mode: 'all' }
+      { src: '/var/nuxt/plugins/test.client' },
+      { src: '/var/nuxt/plugins/test.server' }
     ]
-    builder.relativeToBuild = jest.fn(src => `relative(${src})`)
-    for (let step = 0; step < builder.plugins.length; step++) {
-      Glob.mockImplementationOnce(src => [`${src.replace(/\{.*\}/, '')}.js`])
-    }
 
-    await builder.resolvePlugins()
+    const plugins = builder.normalizePlugins()
 
-    expect(builder.plugins).toEqual([
-      { mode: 'all', src: 'relative(/var/nuxt/plugins/test.js)' },
-      { mode: 'client', src: 'relative(/var/nuxt/plugins/test.client)' },
-      { mode: 'server', src: 'relative(/var/nuxt/plugins/test.server)' }
+    expect(plugins).toEqual([
+      { mode: 'all',
+        src: 'resolveAlias(/var/nuxt/plugins/test.js)',
+        'name': 'nuxt_plugin_test_hash(/var/nuxt/plugins/test.js)' },
+      { mode: 'client',
+        src: 'resolveAlias(/var/nuxt/plugins/test.client)',
+        'name': 'nuxt_plugin_test_hash(/var/nuxt/plugins/test.client)' },
+      { mode: 'server',
+        src: 'resolveAlias(/var/nuxt/plugins/test.server)',
+        'name': 'nuxt_plugin_test_hash(/var/nuxt/plugins/test.server)' }
     ])
   })
 })

packages/vue-app/template/index.js

@@ -166,20 +166,21 @@ async function createApp(ssrContext) {
 
   // Plugin execution
   <%= isTest ? '/* eslint-disable camelcase */' : '' %>
-  <% plugins.filter(p => p.mode === 'all').forEach((plugin) => { %>
-  if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(app.context, inject)<% }) %>
-
-  <% if (plugins.filter(p => p.mode === 'client').length) { %>
-  if (process.client) {
-    <% plugins.filter(p => p.mode === 'client').forEach((plugin) => { %>
-    if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(app.context, inject)<% }) %>
-  }<% } %>
-
-  <% if (plugins.filter(p => p.mode === 'server').length) { %>
-  if (process.server) {
-    <% plugins.filter(p => p.mode === 'server').forEach((plugin) => { %>
-    if (typeof <%= plugin.name %> === 'function') await <%= plugin.name %>(app.context, inject)<% }) %>
-  }<% } %>
+  <% plugins.forEach((plugin) => { %>
+  <% if (plugin.mode == 'client') { %>
+  if (process.client && typeof <%= plugin.name %> === 'function') {
+    await <%= plugin.name %>(app.context, inject)
+  }
+  <% } else if (plugin.mode == 'server') { %>
+  if (process.server && typeof <%= plugin.name %> === 'function') {
+    await <%= plugin.name %>(app.context, inject)
+  }
+  <% } else { %>
+  if (typeof <%= plugin.name %> === 'function') {
+    await <%= plugin.name %>(app.context, inject)
+  }
+  <% } %>
+  <% }) %>
   <%= isTest ? '/* eslint-enable camelcase */' : '' %>
 
   // If server-side, wait for async component to be resolved first