next.js: Cannot read properties of undefined (reading 'listen') when importing faker

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn’t contain the answer to my issue

Environment check

• I’m using the latest msw version
• I’m using Node.js version 14 or higher

Node.js version

v17.8.0

Reproduction repository

https://github.com/djaustin/msw-faker-reproduction/tree/with-faker

Reproduction steps

yarn && yarn dev

Visit http://localhost:3000

To revert to a working configuration, checkout branch ‘working-factory’ (https://github.com/djaustin/msw-faker-reproduction/tree/working-factory)

The import of faker seems to cause the error to occur.

Current behavior

An error is displayed in the console and the browser.

TypeError: Cannot read properties of undefined (reading 'listen')
    at eval (webpack-internal:///./mocks/index.js:3:12)
    at Object../mocks/index.js (/Users/daustin/development/msw/.next/server/pages/_app.js:32:1)
    at __webpack_require__ (/Users/daustin/development/msw/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/_app.js:9:5)
    at Object../pages/_app.js (/Users/daustin/development/msw/.next/server/pages/_app.js:65:1)
    at __webpack_require__ (/Users/daustin/development/msw/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/daustin/development/msw/.next/server/pages/_app.js:130:39)
    at /Users/daustin/development/msw/.next/server/pages/_app.js:131:28
    at Object.<anonymous> (/Users/daustin/development/msw/.next/server/pages/_app.js:134:3)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)
TypeError: Cannot read properties of undefined (reading 'listen')
    at eval (webpack-internal:///./mocks/index.js:3:12)
    at Object../mocks/index.js (/Users/daustin/development/msw/.next/server/pages/_app.js:32:1)
    at __webpack_require__ (/Users/daustin/development/msw/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/_app.js:9:5)
    at Object../pages/_app.js (/Users/daustin/development/msw/.next/server/pages/_app.js:65:1)
    at __webpack_require__ (/Users/daustin/development/msw/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/daustin/development/msw/.next/server/pages/_app.js:130:39)
    at /Users/daustin/development/msw/.next/server/pages/_app.js:131:28
    at Object.<anonymous> (/Users/daustin/development/msw/.next/server/pages/_app.js:134:3)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)
error - mocks/index.js (3:9) @ eval
TypeError: Cannot read properties of undefined (reading 'listen')
  1 | if (typeof window === 'undefined') {
  2 |   const { server } = require('./server')
> 3 |   server.listen()
    |         ^
  4 | } else {
  5 |   const { worker } = require('./browser')
  6 |   worker.start()

Expected behavior

msw successfully creates a new object from the factory model and returns it for display in the application

[kettanaito]

If you inspect the return of the require('./server') you will notice that it returns a Promise:

// mocks/index.js
const allExports = require('./server')
console.log(allExports) // Proimse<...>

Something in the import chain forces the ./server module to be imported asynchronously. I believe that’s not the native require behavior (I’m also running Node.js v14.18.1).

If you rewrite require to import and await it, the issue gets resolved:

// mocks/index.js
async function initMocks() {
  if (typeof window === 'undefined') {
    const { server } = await import('./server')
    server.listen()
  } else {
    const { worker } = await import('./browser')
    worker.start()
  }
}

initMocks()

If this issue occurs only when you introduce a certain dependency, like faker, I suspect that dependency somehow affects the import type your module uses. Sorry, I don’t have the capacity to look deeper into this but the import proposal above is functional and should unblock you.

Anybody having more experience with module resolution is welcome to write a more constructive explanation below. Thank you!

[j0k3r]

Shouldn’t the doc be updated here https://mswjs.io/docs/getting-started/integrate/node? Maybe at least to mention that in the context of Next.js it’s better to use async/await to avoid that undefined error.