Storybook: cannot find serverMiddleware module error while building

Created on 5 Apr 2021  路  18Comments  路  Source: nuxt-community/storybook

Version

@nuxtjs/storybook: v4.0.1
nuxt: v2.15.4

Reproduction Link

nothing available for now

Steps to reproduce

I have a following server middleware written in TypeScript.

// ~/server/index.ts
import express from 'express'

const app = express()

// some express middleware settings

export default app

and configure it in nuxt.config.ts like below

export default {
  serverMiddleware: [{ path: '/', handler: '~/server/index.ts' }]
}

What is Expected?

storybook should build without error

What is actually happening?

When I execute yarn run nuxt storybook, it throws error

ERR! Error: Cannot find module '~/server/index.ts'
ERR! Require stack:
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/utils/middleware.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/dev-server.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/build-dev.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core/server.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/dist/index.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/dist/cli.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at n (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/jiti/dist/v8cache.js:2:2349)
ERR!     at addServerMiddleware (/Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js:9:18)
ERR!     at /Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js:18:5
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js:16:15)
ERR!     at storybookDevServer (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/dev-server.js:65:52)
ERR!     at buildDevStandalone (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at Object.buildDev (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR!  Error: Cannot find module '~/server/index.ts'
ERR! Require stack:
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/utils/middleware.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/dev-server.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/build-dev.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core/server.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/dist/index.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/dist/cli.js
ERR! - /Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at n (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/jiti/dist/v8cache.js:2:2349)
ERR!     at addServerMiddleware (/Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js:9:18)
ERR!     at /Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js:18:5
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js:16:15)
ERR!     at storybookDevServer (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/dev-server.js:65:52)
ERR!     at buildDevStandalone (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at Object.buildDev (/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/.nuxt-storybook/storybook/middleware.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/utils/middleware.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/dev-server.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/build-dev.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@storybook/core/server.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/dist/index.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/dist/cli.js',
ERR!     '/Users/yshrsmz/repos/github.com/nuxt-site/node_modules/@nuxtjs/storybook/bin/nuxt-storybook.js'
ERR!   ]
ERR! }
bug
Source
picture yshrsmz
👍1

Most helpful comment

Thanks for description. This should fix in https://github.com/nuxt-community/storybook/commit/23e13580742c56377556baaec9be7fea2eac9cc3 and will release in v4.0.3

picture farnabaz on 16 Apr 2021
👍3

All 18 comments

same here, when I upgrade the version I have a similar error:
(this is my command "storybook:dev": "nuxt storybook -p 6006 -s ./static")

info => Loading presets
info => Serving static files from /private/var/www/html/static at /
ERR! TypeError: Router.use() requires a middleware function but got a undefined
ERR!     at Function.use (/private/var/www/html/node_modules/express/lib/router/index.js:458:13)
ERR!     at addServerMiddleware (/private/var/www/html/.nuxt-storybook/storybook/middleware.js:12:9)
ERR!     at /private/var/www/html/.nuxt-storybook/storybook/middleware.js:15:28
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/private/var/www/html/.nuxt-storybook/storybook/middleware.js:15:15)
ERR!     at storybookDevServer (/private/var/www/html/node_modules/@storybook/core-server/dist/cjs/dev-server.js:65:52)
ERR!     at async buildDevStandalone (/private/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async Object.buildDev (/private/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR!  TypeError: Router.use() requires a middleware function but got a undefined
ERR!     at Function.use (/private/var/www/html/node_modules/express/lib/router/index.js:458:13)
ERR!     at addServerMiddleware (/private/var/www/html/.nuxt-storybook/storybook/middleware.js:12:9)
ERR!     at /private/var/www/html/.nuxt-storybook/storybook/middleware.js:15:28
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/private/var/www/html/.nuxt-storybook/storybook/middleware.js:15:15)
ERR!     at storybookDevServer (/private/var/www/html/node_modules/@storybook/core-server/dist/cjs/dev-server.js:65:52)
ERR!     at async buildDevStandalone (/private/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async Object.buildDev (/private/var/www/html/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
sebalaini-itm picture sebalaini-itm on 6 Apr 2021

I ran into the same problem. As a workaround, I got it running by pointing to an absolute path like so:

serverMiddleware: [
  {path: '/', handler: path.join(__dirname, 'src/server/index.js')},
],
kswedberg picture kswedberg on 7 Apr 2021

I'm not using typescript but I'm having the same problem.

travis5491811 picture travis5491811 on 9 Apr 2021

Same error
Version 3.3.2 works well

info @nuxtjs/storybook v4.0.1
info 
info => Loading presets
info => Serving static files from /Users/zoxon/work/app/static at /
ERR! TypeError: Router.use() requires a middleware function but got a undefined
ERR!     at Function.use (/Users/zoxon/work/app/node_modules/express/lib/router/index.js:458:13)
ERR!     at addServerMiddleware (/Users/zoxon/work/app/.nuxt-storybook/storybook/middleware.js:12:9)
ERR!     at /Users/zoxon/work/app/.nuxt-storybook/storybook/middleware.js:15:28
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/Users/zoxon/work/app/.nuxt-storybook/storybook/middleware.js:15:15)
ERR!     at storybookDevServer (/Users/zoxon/work/app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:65:52)
ERR!     at buildDevStandalone (/Users/zoxon/work/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at Object.buildDev (/Users/zoxon/work/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
ERR!  TypeError: Router.use() requires a middleware function but got a undefined
ERR!     at Function.use (/Users/zoxon/work/app/node_modules/express/lib/router/index.js:458:13)
ERR!     at addServerMiddleware (/Users/zoxon/work/app/.nuxt-storybook/storybook/middleware.js:12:9)
ERR!     at /Users/zoxon/work/app/.nuxt-storybook/storybook/middleware.js:15:28
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/Users/zoxon/work/app/.nuxt-storybook/storybook/middleware.js:15:15)
ERR!     at storybookDevServer (/Users/zoxon/work/app/node_modules/@storybook/core-server/dist/cjs/dev-server.js:65:52)
ERR!     at buildDevStandalone (/Users/zoxon/work/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at Object.buildDev (/Users/zoxon/work/app/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
zoxon picture zoxon on 13 Apr 2021

Same issue here, but not using serverMiddleware directly but using @nuxtjs/proxy -module.

TypeError: Router.use() requires a middleware function but got a undefined

eljass picture eljass on 14 Apr 2021
👍1

Thank you the issue and reproduction example, the issue is related to nuxt path aliases (~) in middleware path. and will be fixed in next release v4.0.2

Note that v3.x does not support server middlewares and if have issue with v3.x try removing .nuxt-storybook and .storybook directory.

farnabaz picture farnabaz on 14 Apr 2021

@farnabaz

This update did not fix this issue for us. nuxt storybook

ERR! TypeError: Router.use() requires a middleware function but got a undefined
ERR!     at Function.use (/Users/xxx/Documents/Kehitys/xxx/xxx-website/node_modules/express/lib/router/index.js:458:13)
ERR!     at addServerMiddleware (/Users/xxx/Documents/Kehitys/xxx/xxx-website/.nuxt-storybook/storybook/middleware.js:12:9)
ERR!     at /Users/xxx/Documents/Kehitys/xxx/xxx-website/.nuxt-storybook/storybook/middleware.js:15:28
ERR!     at Array.forEach (<anonymous>)
ERR!     at module.exports (/Users/xxx/Documents/Kehitys/xxx/xxx-website/.nuxt-storybook/storybook/middleware.js:15:15)
ERR!     at storybookDevServer (/Users/xxx/Documents/Kehitys/xxx/xxx-website/node_modules/@storybook/core-server/dist/cjs/dev-server.js:65:52)
ERR!     at async buildDevStandalone (/Users/xxx/Documents/Kehitys/xxx/xxx-website/node_modules/@storybook/core-server/dist/cjs/build-dev.js:107:31)
ERR!     at async Object.buildDev (/Users/xxx/Documents/Kehitys/xxx/xxx-website/node_modules/@storybook/core-server/dist/cjs/build-dev.js:147:5)
eljass picture eljass on 14 Apr 2021

Do you mind creating a reproduction sample? @eljass

farnabaz picture farnabaz on 14 Apr 2021

@farnabaz

I got the same error as @eljass when my serverMiddleware exports object like below

// ~/server/index.ts
import express from 'express'

const app = express()

// some express middleware settings

export default {
  path: '/',
  handler: app,
}

and configuration is this

export default {
  serverMiddleware: ['~/server/index.ts']
}

but when I export the handler like in the OP, it works fine with v4.0.2.

yshrsmz picture yshrsmz on 15 Apr 2021
👍2

Thanks for description. This should fix in https://github.com/nuxt-community/storybook/commit/23e13580742c56377556baaec9be7fea2eac9cc3 and will release in v4.0.3

farnabaz picture farnabaz on 16 Apr 2021
👍3

Hi @farnabaz when will release v4.0.3 be released?

Kind regards

tobi-adekanye-itm picture tobi-adekanye-itm on 20 Apr 2021

Same issue here, there is a problem with @nuxtjs/redirect-module

Pinegin picture Pinegin on 22 Apr 2021

Same issue here, there is a problem with @nuxtjs/redirect-module

This is/was issue with me also. Also I struggle with @nuxtjs/firebase but it is not related to this issue.

eljass picture eljass on 23 Apr 2021

Confirm that changing my nuxt.config.js file to this fixed this in 4.0.2:

    serverMiddleware: [
        { handler: "~/middleware/redirect-trailing-slash.server.js" },
    ],

UPDATE: This doesn't work. Results in Storybook being empty and never loading the stories.

drewbaker picture drewbaker on 27 Apr 2021

I also have the same issue with serverMiddleware on v4.0.2.馃槗
typeError: Router.use() requires a middleware function but got a undefined

VisionYi picture VisionYi on 29 Apr 2021

@farnabaz Should this be reopened again since this seems not to be fully working yet?

eljass picture eljass on 3 May 2021

@farnabaz

I got the same error as @eljass when my serverMiddleware exports object like below

// ~/server/index.ts
import express from 'express'

const app = express()

// some express middleware settings

export default {
  path: '/',
  handler: app,
}

and configuration is this

export default {
  serverMiddleware: ['~/server/index.ts']
}

but when I export the handler like in the OP, it works fine with v4.0.2.

Same here.

ChangJoo-Park picture ChangJoo-Park on 17 May 2021

Same issue here, but not using serverMiddleware directly but using @nuxtjs/proxy -module.

TypeError: Router.use() requires a middleware function but got a undefined

I had this issue with @nuxtjs/proxy@^1.3.3 solved by upgrading to @nuxtjs/proxy@^2.1.0

nomadoda picture nomadoda on 1 Jun 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Elaniobro picture Elaniobro  路  3Comments
altryne picture altryne  路  3Comments
Atinux picture Atinux  路  3Comments
dankellett picture dankellett  路  3Comments
altryne picture altryne  路  4Comments