v4.2.0 throws a missing module error for fs

[mfts]

Describe the bug

missing module fs

Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/proper-lockfile/lib/adapter.js
./node_modules/proper-lockfile/index.js
./node_modules/tus-js-client/lib.esm/node/urlStorage.js
./node_modules/tus-js-client/lib.esm/node/index.js
./lib/files/tus-upload.ts
./components/upload-zone.tsx
./components/documents/documents-list.tsx
./pages/documents/index.tsx
 ⨯ ./node_modules/graceful-fs/graceful-fs.js:1:1

To Reproduce
Steps to reproduce the behavior:

1. update package
2. npm run dev
3. throws error in browser

Expected behavior
Not throw an error

Setup details
Setup is [email protected]

• Runtime environment: browser
• Used tus-js-client version: 4.2.0
• Used tus server software: 1.8.0

[SanderMuller]

This is also a breaking change for us (using webpack 5.94.0 via Laravel Mix)

[Acconut]

Can you provide a minimal example to reproduce this? Did it work in 4.1.0? From the changes between the two releases, I don't see a direct reason why it would now pick up the Node.js code (lib.esm/node/urlStorage.js) versus the browser code (lib.esm/browser/urlStorage.js).

[SanderMuller]

@Acconut I reverted to 4.1.0 and then it works again.

This is the error that 4.2.0 gives:

ERROR in ./node_modules/graceful-fs/graceful-fs.js 1:9-22
Module not found: Error: Can't resolve 'fs' in 'node_modules/graceful-fs'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx",".vue"]'?

ERROR in ./node_modules/graceful-fs/polyfills.js 1:16-36
Module not found: Error: Can't resolve 'constants' in 'node_modules/graceful-fs'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx",".vue"]'?

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "constants": require.resolve("constants-browserify") }'
        - install 'constants-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "constants": false }

ERROR in ./node_modules/proper-lockfile/lib/lockfile.js 3:13-28
Module not found: Error: Can't resolve 'path' in 'node_modules/proper-lockfile/lib'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx",".vue"]'?

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

ERROR in node:crypto
Module build failed: UnhandledSchemeError: Reading from "node:crypto" 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.
    at node_modules/webpack/lib/NormalModule.js:973:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (node_modules/tapable/lib/Hook.js:18:14)
    at Object.processResource (node_modules/webpack/lib/NormalModule.js:969:8)
    at processResource (node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (node_modules/webpack/lib/NormalModule.js:959:3)
    at NormalModule.build (node_modules/webpack/lib/NormalModule.js:1144:15)
    at node_modules/webpack/lib/Compilation.js:1418:12
    at NormalModule.needBuild (node_modules/webpack/lib/NormalModule.js:1466:32)
    at Compilation._buildModule (node_modules/webpack/lib/Compilation.js:1399:10)
    at node_modules/webpack/lib/util/AsyncQueue.js:324:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (node_modules/webpack/lib/util/AsyncQueue.js:314:26)
    at AsyncQueue._ensureProcessing (node_modules/webpack/lib/util/AsyncQueue.js:301:12)
    at process.processImmediate (node:internal/timers:478:21)

ERROR in node:fs
Module build failed: UnhandledSchemeError: Reading from "node:fs" 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.
    at node_modules/webpack/lib/NormalModule.js:973:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Object.processResource (node_modules/webpack/lib/NormalModule.js:969:8)
    at processResource (node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (node_modules/webpack/lib/NormalModule.js:959:3)
    at NormalModule.build (node_modules/webpack/lib/NormalModule.js:1144:15)
    at node_modules/webpack/lib/Compilation.js:1418:12
    at NormalModule.needBuild (node_modules/webpack/lib/NormalModule.js:1466:32)
    at Compilation._buildModule (node_modules/webpack/lib/Compilation.js:1399:10)
    at node_modules/webpack/lib/util/AsyncQueue.js:324:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (node_modules/webpack/lib/util/AsyncQueue.js:314:26)
    at AsyncQueue._ensureProcessing (node_modules/webpack/lib/util/AsyncQueue.js:301:12)
    at process.processImmediate (node:internal/timers:478:21)

ERROR in node:https
Module build failed: UnhandledSchemeError: Reading from "node:https" 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.
    at node_modules/webpack/lib/NormalModule.js:973:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Object.processResource (node_modules/webpack/lib/NormalModule.js:969:8)
    at processResource (node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (node_modules/webpack/lib/NormalModule.js:959:3)
    at NormalModule.build (node_modules/webpack/lib/NormalModule.js:1144:15)
    at node_modules/webpack/lib/Compilation.js:1418:12
    at NormalModule.needBuild (node_modules/webpack/lib/NormalModule.js:1466:32)
    at Compilation._buildModule (node_modules/webpack/lib/Compilation.js:1399:10)
    at node_modules/webpack/lib/util/AsyncQueue.js:324:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (node_modules/webpack/lib/util/AsyncQueue.js:314:26)
    at AsyncQueue._ensureProcessing (node_modules/webpack/lib/util/AsyncQueue.js:301:12)
    at process.processImmediate (node:internal/timers:478:21)

ERROR in node:http
Module build failed: UnhandledSchemeError: Reading from "node:http" 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.
    at node_modules/webpack/lib/NormalModule.js:973:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Object.processResource (node_modules/webpack/lib/NormalModule.js:969:8)
    at processResource (node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (node_modules/webpack/lib/NormalModule.js:959:3)
    at NormalModule.build (node_modules/webpack/lib/NormalModule.js:1144:15)
    at node_modules/webpack/lib/Compilation.js:1418:12
    at NormalModule.needBuild (node_modules/webpack/lib/NormalModule.js:1466:32)
    at Compilation._buildModule (node_modules/webpack/lib/Compilation.js:1399:10)
    at node_modules/webpack/lib/util/AsyncQueue.js:324:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (node_modules/webpack/lib/util/AsyncQueue.js:314:26)
    at AsyncQueue._ensureProcessing (node_modules/webpack/lib/util/AsyncQueue.js:301:12)
    at process.processImmediate (node:internal/timers:478:21)

ERROR in node:path
Module build failed: UnhandledSchemeError: Reading from "node:path" 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.
    at node_modules/webpack/lib/NormalModule.js:973:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Object.processResource (node_modules/webpack/lib/NormalModule.js:969:8)
    at processResource (node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (node_modules/webpack/lib/NormalModule.js:959:3)
    at NormalModule.build (node_modules/webpack/lib/NormalModule.js:1144:15)
    at node_modules/webpack/lib/Compilation.js:1418:12
    at NormalModule.needBuild (node_modules/webpack/lib/NormalModule.js:1466:32)
    at Compilation._buildModule (node_modules/webpack/lib/Compilation.js:1399:10)
    at node_modules/webpack/lib/util/AsyncQueue.js:324:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (node_modules/webpack/lib/util/AsyncQueue.js:314:26)
    at AsyncQueue._ensureProcessing (node_modules/webpack/lib/util/AsyncQueue.js:301:12)
    at process.processImmediate (node:internal/timers:478:21)

ERROR in node:stream
Module build failed: UnhandledSchemeError: Reading from "node:stream" 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.
    at node_modules/webpack/lib/NormalModule.js:973:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Object.processResource (node_modules/webpack/lib/NormalModule.js:969:8)
    at processResource (node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (node_modules/webpack/lib/NormalModule.js:959:3)
    at NormalModule.build (node_modules/webpack/lib/NormalModule.js:1144:15)
    at node_modules/webpack/lib/Compilation.js:1418:12
    at NormalModule.needBuild (node_modules/webpack/lib/NormalModule.js:1466:32)
    at Compilation._buildModule (node_modules/webpack/lib/Compilation.js:1399:10)
    at node_modules/webpack/lib/util/AsyncQueue.js:324:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (node_modules/webpack/lib/util/AsyncQueue.js:314:26)
    at AsyncQueue._ensureProcessing (node_modules/webpack/lib/util/AsyncQueue.js:301:12)
    at process.processImmediate (node:internal/timers:478:21)

ERROR in node:url
Module build failed: UnhandledSchemeError: Reading from "node:url" 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.
    at node_modules/webpack/lib/NormalModule.js:973:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Object.processResource (node_modules/webpack/lib/NormalModule.js:969:8)
    at processResource (node_modules/loader-runner/lib/LoaderRunner.js:220:11)
    at iteratePitchingLoaders (node_modules/loader-runner/lib/LoaderRunner.js:171:10)
    at runLoaders (node_modules/loader-runner/lib/LoaderRunner.js:398:2)
    at NormalModule._doBuild (node_modules/webpack/lib/NormalModule.js:959:3)
    at NormalModule.build (node_modules/webpack/lib/NormalModule.js:1144:15)
    at node_modules/webpack/lib/Compilation.js:1418:12
    at NormalModule.needBuild (node_modules/webpack/lib/NormalModule.js:1466:32)
    at Compilation._buildModule (node_modules/webpack/lib/Compilation.js:1399:10)
    at node_modules/webpack/lib/util/AsyncQueue.js:324:10
    at Hook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncQueue._startProcessing (node_modules/webpack/lib/util/AsyncQueue.js:314:26)
    at AsyncQueue._ensureProcessing (node_modules/webpack/lib/util/AsyncQueue.js:301:12)
    at process.processImmediate (node:internal/timers:478:21)

[Acconut]

I cannot reproduce this with Next.js. Created a new app with npx create-next-app@latest and npm install [email protected] and added this to page.js:

import * as tus from "tus-js-client";

export default function Home() {
  return (
          <div>Is supported: {tus.isSupported.toString()}</div>
  )
}

That works as expected without an error:

Please provide more details to reproduce this. Or better, a complete, minimal example.

[Acconut]

@Murderlon is facing a similar problem in Uppy: https://github.com/transloadit/uppy/actions/runs/10810251568/job/29988888440

We'll undo the use of the node: prefix to see if that helps: #720

[Acconut]

v4.2.2 has been released and drops node:. Please try it out and let us know if this helps.

Even if it solves the problem, it raises the question why Webpack picks up Node.js-only files when building for a browser. Maybe it has always done this while polyfilling Node.js modules, but now it cannot polyfill with the node: protcol and thus fails now. However, it shouldn't inspect Node.js-only files in the first place.

[aaronforloop]

We are also hit with this and unfortunately v4.2.2 doesn't fix it.

repro - https://github.com/aaronforloop/tus-module-not-found

[Acconut]

@aaronforloop Thanks, I can reproduce it with your repository. I'll look into it.

[Acconut]

I might have found the problem and it's not visible by looking at the changes in this repository. Instead, the v4.2.0 release on NPM accidentally includes .d.ts and other files from #683 (see https://www.npmjs.com/package/tus-js-client/v/4.2.0?activeTab=code), that slipped in when I do releases on my computer:

This PR is an attempt to move tus-js-client to TypeScript, but hasn't been merged, so its files shouldn't be in the release. For some reason unknown to me these files cause Webpack to fail.

I just released v4.2.3 to NPM without these problematic, unintended files. Please test it and let me know if that fixes the problem.

To prevent this issue in the future, I will improve the build script to clean unwanted files and also work on automating releases on CI versus doing them manually. Apologies for that.

[aaronforloop]

Thank you for the prompt fix! We've tested v4.2.3, and it resolves the issue on our end. Appreciate your efforts.

[Acconut]

Thanks for the assistance, without which it would have been a lot hard to debug this! I will close this new. Feel free to leave a comment if you are still struggling with this specific Webpack error.