App directory cannot have node internals import in "use client" code

[samijaber]

Link to the code that reproduces this issue

https://github.com/samijaber/nextjs-monorepo/commit/bacddaca5429320444ccdc9724ee958b267ad550

To Reproduce

• add the following file to your nextjs app:

"use client";
import { createRequire } from "node:module";

let safeDynamicRequire: any = () => {};
try {
  safeDynamicRequire = createRequire(__dirname);
} catch (e) {
  safeDynamicRequire = eval("require");
}

const add = safeDynamicRequire("lodash/add");

export const add3 = () => {
  return add(1, 2);
};

(ignore the weirdness around eval and createRequire. The main idea is that the import can't even be processed by webpack)

• try to import add3 and use it in an app directory

Current vs. Expected behavior

expected: it works

current:

node:module
Module build failed: UnhandledSchemeError: Reading from "node:module" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

NOTE: removing "use client" from the top of the file fixes this.

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.5-canary.49
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

No response

[coltonehrman]

This is expected right? Sounds like the "use client"; directive is blocking you from trying to import any Node.js module, which are not intended to run on the browser (aka client).

[samijaber]

No, I believe this is a bug and not expected behaviour.

"use client" components are still SSR'd. I should be able to import a Node.js module for the server-rendered version of that component.

use-case: I have an SDK with a component whose logic changes depending on the environment (browser, serverless, nodejs). The nodejs version imports a node module, but the browser version does not. There's no reason this component shouldn't work. It works for the Pages directory.

[pumkindev]

Could this be related to:

#51324

[leerob]

Thank you! We were able to reproduce this and it appears to be an issue with webpack. We are tracking this.

[nextjs-bot]

This issue has been automatically marked as stale due to inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!