Support string only serverMiddleware notation

[dargmuesli]

Version

@nuxtjs/storybook: v4.1.1
nuxt: v2.15.7

Steps to reproduce

Use a string only serverMiddleware notation like

  serverMiddleware: [
    '~/middleware/server/headers.ts',
  ],

What is Expected?

Storybook starts fine, loading the server middleware.

What is actually happening?

Storybook crashes.

ERR!  TypeError: Router.use() requires a middleware function but got a undefined
ERR!     at Function.use (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/express/lib/router/index.js:458:13)
ERR!     at addServerMiddleware (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/.nuxt-storybook/storybook/middleware.js:24:9)
ERR!     at /mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/.nuxt-storybook/storybook/middleware.js:27:28
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/.nuxt-storybook/storybook/middleware.js:27:15)
ERR!     at storybookDevServer (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/@storybook/core-server/dist/cjs/dev-server.js:82:52)
ERR!     at buildDevStandalone (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR!     at Object.buildDev (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)
ERR!  TypeError: Router.use() requires a middleware function but got a undefined
ERR!     at Function.use (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/express/lib/router/index.js:458:13)
ERR!     at addServerMiddleware (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/.nuxt-storybook/storybook/middleware.js:24:9)
ERR!     at /mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/.nuxt-storybook/storybook/middleware.js:27:28
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/.nuxt-storybook/storybook/middleware.js:27:15)
ERR!     at storybookDevServer (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/@storybook/core-server/dist/cjs/dev-server.js:82:52)
ERR!     at buildDevStandalone (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/@storybook/core-server/dist/cjs/build-dev.js:112:31)
ERR!     at Object.buildDev (/mnt/data/WorkingDirectory/Git/maevsi/maevsi/nuxt/node_modules/@storybook/core-server/dist/cjs/build-dev.js:154:5)

Workaround

Use the object notation:

  serverMiddleware: [
    { handler: '~/middleware/server/headers.ts' },
  ],

Requested fix

Support the string only notation.
Nuxt's server works like this: https://github.com/nuxt/nuxt.js/blob/356de80e7de928958865584c083cd4551c30e875/packages/server/src/server.js#L199
In case of a function it is required, which itself calls normalize again.

[dargmuesli]

Just react to the original report with a 👍 emoji. Keeps down noise and enables others to filter issues by the amount of reactions.

[drewbaker]

I noticed another issue related to this today. The serverMiddleware I have is setup to redirect any URI's that don't have a trailing slash on them to the same URI but with a trailing slash. This is useful in Nuxt, but breaks storybook.

So, either I need a way to disable this serverMiddlewere when it's used in Storybook, or a better way to do a redirect of all routes.

Is it weird if Storybook word like this:

  serverMiddleware: [
    { 
         handler: '~/middleware/server/headers.ts',
         storybook: false
    },
  ],

[saschaeggi]

@drewbaker I have a very similar use-case. We run a site with multiple languages and we redirect you to the right language. This is very handy for browser language detection – but it actually breaks storybook.

Btw I use this workaround to solve the issue in the meantime:

serverMiddleware: process.env.STORYBOOK ? null : [
    { path: '/', handler: '~/serverMiddleware/languageNegotiator.js' }
  ],

And Storybook gets started with the ENV: STORYBOOK=1 npx nuxt storybook

[ahmadalfy]

@drewbaker Thank you, I had an seoMiddleware that handled a few things and it was definitely not necessary for Storybook. Followed your syntax and it worked.