Cannot use 'serverMiddleware' in my nuxt.config when using bridge

[gokatz]

Environment

• Operating System: Darwin
• Node Version: v14.18.2
• Nuxt Version: 2.16.0-27720022.54e852f
• Nitro Version: 0.5.4
• Package Manager: [email protected]
• Builder: webpack
• User Config: mode, target, head, css, plugins, components, buildModules, modules, pwa, build, sentry, serverMiddleware, publicRuntimeConfig, runtimeConfig, serverHandlers, devServerHandlers, bridge
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected]
• Build Modules: (), @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected]

Reproduction

Im migrating a medium sized nuxt 2 application to nuxt 3 using bridge. Here is my package.json file and nuxt config for further debugging.

package.json

{
  "name": "arli",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev:n": "nuxi dev",
    "build:n": "nuxi build",
    "start:n": "nuxi preview",
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style",
    "lint:fix": "yarn lint:js --fix",
    "test": "jest",
    "//vercel-build": "https://github.com/nuxt/vercel-builder/issues/371#issuecomment-934581931",
    "vercel-build": "yarn global add node-gyp node-gyp-build"
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "@nuxtjs/sentry": "^5.1.6",
    "@sendgrid/mail": "^7.6.0",
    "@supabase/supabase-js": "^1.28.5",
    "@vue/runtime-dom": "^3.2.41",
    "billboard.js": "^3.5.0",
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "dayjs": "^1.10.7",
    "express": "^4.17.1",
    "form-data": "^3.0.0",
    "greeting-time": "^1.0.0",
    "node-fetch": "^2.6.0",
    "nuxt-edge": "latest",
    "pg": "^8.7.3",
    "querystring": "^0.2.0",
    "vue-js-modal": "^2.0.1",
    "vue-notification": "^1.3.20"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.17.12",
    "@nuxt/bridge": "npm:@nuxt/bridge-edge",
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/tailwindcss": "^2.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.0.1",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "husky": "^4.2.5",
    "jest": "^26.0.1",
    "lint-staged": "^10.2.11",
    "prettier": "^2.0.5",
    "stylelint": "^13.6.1",
    "stylelint-config-prettier": "^8.0.1",
    "stylelint-config-standard": "^20.0.0",
    "vue-jest": "^3.0.4"
  },
  "engines": {
    "node": "14.x"
  }
}

nuxt.config

import { defineNuxtConfig } from '@nuxt/bridge';

const isDev = process.env.NODE_ENV === 'development';

const config = {
  // bridge: false,
  /*
   ** Nuxt rendering mode
   ** See https://nuxtjs.org/api/configuration-mode
   */
  mode: 'universal',
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: 'server',
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    title: 'Arli App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'The personal expense manager using Zoho expense'
      }
    ],
    link: [
      { rel: 'icon', type: 'image/png', href: '/icon.png' },
      {
        rel: 'preconnect',
        href: 'https://qjmmbfqnnivuugjsjmhk.supabase.co/',
        crossorigin: true
      }
    ]
  },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: [
    '~/plugins/formatCurrency.js',
    '~/plugins/fetch.js',
    '~/plugins/tp.js',
    '~/plugins/day.js',
    '~/plugins/appConstants.js',
    '~plugins/vue-js-modal.js'
  ],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  components: true,
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    // Doc: https://github.com/nuxt-community/stylelint-module
    '@nuxtjs/stylelint-module',
    // Doc: https://github.com/nuxt-community/nuxt-tailwindcss
    '@nuxtjs/tailwindcss'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/pwa', '@nuxtjs/sentry'],

  pwa: {
    manifest: {
      name: 'Arli',
      short_name: 'Arli'
    },
    workbox: {
      runtimeCaching: [
        {
          urlPattern: '/api/categories.*',
          handler: 'StaleWhileRevalidate'
        },
        {
          urlPattern: '/api/merchants.*',
          handler: 'StaleWhileRevalidate'
        },
        {
          urlPattern: '/api/orgs.*',
          handler: 'StaleWhileRevalidate'
        },
        {
          urlPattern: '/api/cf.*',
          handler: 'StaleWhileRevalidate'
        }
        // {
        //   urlPattern: '/api/bankaccounts.*',
        //   handler: 'StaleWhileRevalidate'
        // }
      ]
    }
  },

  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    transpile: ['vue-notifications']
    // babel: {
    //   plugins: ['@babel/plugin-proposal-optional-chaining']
    // }
  },

  sentry: {
    // Additional Module Options go here
    // https://sentry.nuxtjs.org/sentry/options
    dsn: 'https://[email protected]/6103789',
    disabled: isDev,
    config: {
      // Add native Sentry config here
      // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/
      maxBreadcrumbs: 50,
      debug: isDev
    }
  },

  serverMiddleware: [{ path: '/api', handler: '~/api/index.js' }],

  publicRuntimeConfig: {
    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY,
    CLIENT_ID: process.env.CLIENT_ID
  },

  runtimeConfig: {
    public: {
      SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY,
      CLIENT_ID: process.env.CLIENT_ID
    }
  }
};

export default defineNuxtConfig(config);

Describe the bug

Im trying to follow this one to migrate my nuxt 2 app to nuxt 3: https://v3.nuxtjs.org/bridge/overview My prod build is working fine (havent tested deploying it). But my dev build is not working with a unhelpful error in terminal:

Error

Nuxi 3.0.0-rc.11
Nuxt 2.16.0-27720022.54e852f with Nitro 0.5.4

 WARN  mode option is deprecated. You can safely remove it from nuxt.config


  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.1.3:3000/

ℹ Sentry reporting is disabled ("disabled" option has been set)
ℹ Preparing project for development
ℹ Initial build may take a while
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 18.70s

✔ Server
  Compiled successfully in 15.33s


 WARN  Compiled with 5 warnings

Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/gokatz/projects/yaea-rot/yaeax-3/components/BankTransactions.vue
  213:9  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)


Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/gokatz/projects/yaea-rot/yaeax-3/components/Data/utils.js
  17:3  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)


Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/gokatz/projects/yaea-rot/yaeax-3/components/report/FinTypeReportItem.vue
  36:3  warning  The "props" property should be above the "computed" property on line 26  vue/order-in-components

✖ 1 problem (0 errors, 1 warning)


Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/gokatz/projects/yaea-rot/yaeax-3/layouts/default.vue
  149:7  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)


Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/gokatz/projects/yaea-rot/yaeax-3/pages/zoho-oauth.vue
  68:9  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

 ERROR 

undefined

✔ Nitro built in 508 ms
ℹ Waiting for file changes

When I remove the serverMiddleware from config. The build is working fine, but obviously I cannot use my server.

Thanks for any help! This is blocking my nuxt update for while.

Additional context

No response

Logs

No response

[danielroe]

It's likely the change in behaviour between connect and h3-shaped server handlers. If you provide a reproduction it may be possible to help further.

[gokatz]

hey @danielroe I'm trying to create a repro. Just a clarification. I can see that nuxt bridge guide instruct to migrate to ESM. Is this mandatory? Will that cause above issue when using bridge? My server code uses commonjs modules extensively and migrating might take time.

https://nuxt.com/docs/bridge/overview#migrate-from-commonjs-to-esm

[danielroe]

You should be able to use commonjs dependencies (ie. in node_modules) with no issue.

[gokatz]

Thanks. my server code in /api folder uses commonjs now. should I migrate that?

[yanniznik]

@gokatz how did you port serverMiddleware to nuxt-bridge? I'm also using it in Nuxt2 and trying to bridge it.

[jianxing-xu]

@yanniznik I am using@vue-storefront/nuxt, and unfortunately it does not provide a migration document. Among them, the section of the servermiddleware, is it successful in the migration?