with-msw example is not compatible with experimental appDir setting in next.config.js

[laurencefass]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

The with-msw example is not compatible with the appDir expeimental features enabled.

My base nextjs.config.js file looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
  swcMinify: true,
  experimental: {
    // Required:
    appDir: false,
  },
};

module.exports = nextConfig;

Starting wih appDir: false works correctly

> dev
> next -p 3202

ready - started server on 0.0.0.0:3202, url: http://localhost:3202
info  - Loaded env from /app/app-msw/.env.development
event - compiled client and server successfully in 2.3s (361 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 120 ms (362 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
wait  - compiling / (client and server)...
event - compiled client and server successfully in 147 ms (365 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

starting with appDir = true fails with errors

> dev
> next -p 3202

ready - started server on 0.0.0.0:3202, url: http://localhost:3202
info  - Loaded env from /app/app-msw/.env.development
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

event - compiled client and server successfully in 2.4s (377 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 244 ms (378 modules)
warn  - Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
wait  - compiling / (client and server)...
event - compiled client and server successfully in 181 ms (381 modules)
error - TypeError: fetch failed
    at Object.fetch (/app/app-msw/node_modules/next/dist/compiled/undici/index.js:1:26684)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getServerSideProps (webpack-internal:///./pages/index.tsx:88:17)
    at async Object.renderToHTML (/app/app-msw/node_modules/next/dist/server/render.js:506:20)
    at async doRender (/app/app-msw/node_modules/next/dist/server/base-server.js:708:34)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/app/app-msw/node_modules/next/dist/server/base-server.js:813:28)
    at async /app/app-msw/node_modules/next/dist/server/response-cache/index.js:80:36 {
  cause: Error: getaddrinfo ENOTFOUND my.backend
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26) {
    errno: -3008,
    code: 'ENOTFOUND',
    syscall: 'getaddrinfo',
    hostname: 'my.backend'
  },
  page: '/'
}

To clarify the only difference here is setting appDir to true.

Which example does this report relate to?

with-msw

What browser are you using? (if relevant)

chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

Fully described in relevant information.

Expected Behavior

experimental appDir beta features should be fully compatible with the with-msw Next example.

To Reproduce

Fully described in relevant information.

[balazsorban44]

Same problem as #43284, closing in favor.

[laurencefass]

This is not a duplicate as raised against Next 13 beta features. MSW fetching works ok if appDir feature is disabled. The other issue is raised against Next 12 which has no appDir. This is not only a different test, it's a major upgrade. Even if the cause is the same these are two different environments and fixing the other issue will not guarantee a fix of this issue.

[balazsorban44]

The root cause is that MSW requires a way to initialize some async logic before the server starts, which the other issue is about.

As for app directory support, it's currently in beta and we do not expect to convert current examples just yet. We will revisit support in examples when things have stabilized a bit more. Until then, I recommend asking for support/workarounds from the library author if you wish to experiment. (who is present in the linked issue). Note that app directory is not ready yet for production as documented https://beta.nextjs.org/docs

[kettanaito]

The root cause is that MSW requires a way to initialize some async logic before the server starts

That's not entirely true. To draw a full picture, people want to capture outgoing requests that happen on application's mount. To do that, MSW should be imported (not even started) before mount, which is logical. Because once you import it, it will capture any outgoing requests and defer them until the worker is ready (speaking of the in-browser usage as an example). You don't have to await anything.

The issue itself is that using a dynamic import to require MSW creates a Promise that nothing awaits currently. This won't happen with synchronous require but then we lose the code splitting capabilities and MSW ends up in production builds, which is extra KBs nobody wants to ship.

@balazsorban44 has also proposed a workaround (#43284 (comment)) that can use both dynamic import and await its resolution before rendering the app. I believe it should work.

[laurencefass]

Thanks for the link. The example provided relates to the pages folder, and the app folder works differently using a modified fetch function. Could this workaround be adapted for the Next 13 folder structure and applied to the Layout.tsx and Page.tsx files?

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.