Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UnhandledSchemeError: Reading from "node:url" is not handled by plugins in Next.js 14.2.23 #550

Open
Rupam-Shil opened this issue Jan 9, 2025 · 2 comments
Open

UnhandledSchemeError: Reading from "node:url" is not handled by plugins in Next.js 14.2.23 #550

Rupam-Shil opened this issue Jan 9, 2025 · 2 comments
Labels
bug

Comments

@Rupam-Shil
Copy link

I'm encountering an issue when wrapping my provider component in layout.tsx using Next.js 14.2.23 and Node.js v20.18.0. The following error occurs during the build process:

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.
image

Reproduction Steps:

  1. I'm using the following StarknetProvider.tsx component:

    'use client';
import React from 'react';

import { sepolia, mainnet } from '@starknet-react/chains';
import {
  StarknetConfig,
  publicProvider,
  argent,
  braavos,
  useInjectedConnectors,
  voyager,
} from '@starknet-react/core';

export function StarknetProvider({ children }: { children: React.ReactNode }) {
  const { connectors } = useInjectedConnectors({
    recommended: [argent(), braavos()],
    includeRecommended: 'onlyIfNoConnectors',
    order: 'random',
  });

  return (
    <StarknetConfig
      chains={[mainnet, sepolia]}
      provider={publicProvider()}
      connectors={connectors}
      explorer={voyager}
    >
      {children}
    </StarknetConfig>
  );
}

  2. I am using this provider in layout.tsx:

    export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`antialiased`}>
        <StarknetProvider>{children}</StarknetProvider>
      </body>
    </html>
  );
}

Expected Behavior:

The app should build successfully without errors related to Webpack schemes.

Actual Behavior:

The build fails with the following error message:

UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).

Environment:

  • Next.js Version: 14.2.23
  • Node.js Version: v20.18.0
    image

Request:

Could you provide guidance on how to handle this error? Is this a Webpack configuration issue or an import issue with the Next.js version I'm using?
@fracek
Copy link
Contributor

fracek commented Jan 9, 2025

Looks like one of the dependencies is using node:url as package. Can you provide the full stack trace please? You can also try to grep for that string in your node_modules to see which dependency it is.

From the documentation it looks like it shouldn't be a problem because they polyfill that dependency.

@fracek fracek added the bug label Jan 9, 2025
@Rupam-Shil
Copy link
Author

Rupam-Shil commented Jan 9, 2025 •
edited
Loading

Update: Import Trace and Additional Information

After investigating further, I found that the issue seems to stem from one of the dependencies using node:url. Here is the import trace for the requested module:

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.
Import trace for requested module:
node:url
./node_modules/tough-cookie/dist/cookie/canonicalDomain.js
./node_modules/tough-cookie/dist/cookie/index.js
./node_modules/fetch-cookie/esm/index.js
./node_modules/starknet/dist/index.mjs
./node_modules/@starknet-react/core/dist/index.js
./src/components/Providers.tsx

Based on this trace, it seems the tough-cookie package is using the node:url module, which causes the Webpack error.

  1. From the documentation, it seems node:url should be polyfilled, but I am still encountering the error.

Could you please suggest if there's a workaround to either handle this polyfill issue or if any additional Webpack configuration is needed? Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fracek @Rupam-Shil