Next.js Discord

Discord Forum

Next.js throws error when I call this function

Unanswered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
In my /components/SkillSection.tsx

Im calling the function iconFactory("");
and this throws an error 
node:fs/promises
Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" 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

When i comment the function the error goes away and I can use node:/fs/promise
im not sure why I get this error

42 Replies

Netherland DwarfOP
my iconFactory.tsx takes in a string and returns an SVG component
josh
can you share the function please
Netherland DwarfOP
import { Icons } from '@/enums';
import { NumpySVG } from '../components/svg/icons/Numpy';
import { ReactSVG } from '../components/svg/icons/React';
import { DockerSVG } from '../components/svg/icons/Docker';
import { PythonSVG } from '../components/svg/icons/Python';
import { HtmlSVG } from '../components/svg/icons/Html';
import { CssSVG } from '../components/svg/icons/Css';
import { MatplotlibSVG } from '../components/svg/icons/Matplotlib';
import { TensorflowSVG } from '../components/svg/icons/Tensorflow';
import { ScikitLearnSVG } from '../components/svg/icons/Scikitlearn';
import { PandasSVG } from '../components/svg/icons/Pandas';
import { TypeScriptSVG } from '../components/svg/icons/TypeScript';
import { JavaScriptSVG } from '../components/svg/icons/JavaScript';
import { FigmaSVG } from '../components/svg/icons/Figma';
import { JavaSVG } from '../components/svg/icons/Java';
import { GithubSVG } from '../components/svg/social/Github';

const {
  NUMPY,
  PANDAS,
  DOCKER,
  JAVA,
  HTML,
  FIGMA,
  CSS,
  PYTHON,
  REACT,
  GITHUB,
  MATPLOTLIB,
  TENSORFLOW,
  SCIKITLEARN,
  TYPESCRIPT,
} = Icons;

export const iconFactory = (type: keyof typeof Icons) => {
  switch (type) {
    case NUMPY:
      return <NumpySVG />;
    case REACT:
      return <ReactSVG />;
    case DOCKER:
      return <DockerSVG />;
    case PYTHON:
      return <PythonSVG />;
    case HTML:
      return <HtmlSVG />;
    case CSS:
      return <CssSVG />;
    case GITHUB:
      return <GithubSVG />;
    case MATPLOTLIB:
      return <MatplotlibSVG />;
    case TENSORFLOW:
      return <TensorflowSVG />;
    case SCIKITLEARN:
      return <ScikitLearnSVG />;
    case PANDAS:
      return <PandasSVG />;
    case TYPESCRIPT:
      return <TypeScriptSVG />;
    case FIGMA:
      return <FigmaSVG />;
    case JAVA:
      return <JavaSVG />;
    default:
      return <JavaScriptSVG />;
  }
};
export default iconFactory;
josh
looks ok. and the contents of SkillSection.tsx?
Netherland DwarfOP
SkillSection file is too large to paste here on discord
but it returns only jsx and uses the 'use client'; component
when i call this functino iconFactory
in any other file
it causes next.js to crash
Netherland DwarfOP
@josh okay i think i found a clue
i tried to recreate the problem
export const test = () => {
  return <NumpySVG />;
};

and called this test function
it causes the same issue
josh
wait
export const iconFactory = (type: keyof typeof Icons) => {
export default iconFactory;

you're exporting it twice, one as a default. idk if that could cause this problem
Netherland DwarfOP
oh no
i tried using the test function
and called it inside skillseciton
causes same issue
josh
and when you tried that, you removed the import for iconFactory?
Netherland DwarfOP
yes
i removed the import (i commented it out)
and called test()
throws same error
josh
so, you're definitely not importing node:fs/promises anywhere else in your codebase?
what's your next.config?
Netherland DwarfOP
no except in the utils folder
i have a file there that calls the import
oh wait
what if that file in the util folder that is calling node:fs/promise is causing the error
if there are other files in the same folder
il try moving iconFactory to a different directory
okay
so iconFactory works if i call it in another folder
why is next.js doing this,
import { getPlaiceholder } from "plaiceholder";
import fs from "node:fs/promises";

export const getBase64 = async (src: string) => {
  const buffer = await fs.readFile(`${src}`);
  const { base64 } = await getPlaiceholder(buffer);
  return base64;
};
export default getBase64;
is in the same directory as test() and iconFactory()
and i export all 3 functions in index.js
maybe next.js confuses server side with other functions?
Netherland DwarfOP
I solved the problem by moving my files to a different folder
I feel like this issue is oke of those first time issues with no solutions from stack overflow or anywhere
American Chinchilla
@Netherland Dwarf wild guess here but try switching node:fs/promises -> fs/promises
I think I remember having some issues with the node: prefix before...
although i cant seem to replicate now