Help needed reading file with: import fs from "node:fs/promises";
Unanswered
Cornish Rex posted this in #help-forum
Cornish RexOP
I am getting this error when trying to import the fs module so I can use the function fs.readFile() :
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.
I have searched for days but cant seem to figure out how to fix this. Any help is appreciated.
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.
I have searched for days but cant seem to figure out how to fix this. Any help is appreciated.
36 Replies
Cornish RexOP
Module not found: Can't resolve 'fs'
Module not found: Can't resolve 'fs/promises'
import fs from "fs"keep in mind its node only
cause u reference webpack u probably trying to import it on client
Cornish RexOP
i tried this: import fs from "fs", but it cant find the module
so youre saying it only works in a server component ?
Cornish RexOP
yes i am using a server component
and it still cant find the module
show me the error
and screenshot your code
Cornish RexOP
remove React import
u dont need that
Cornish RexOP
yes removed, was added by a snippet
also might aswell tell u now, using fs with nextjs is a bad idea, you should handle files externally
Cornish RexOP
what im trying to achieve is this:
import Image from 'next/image';
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";
export default async function BlurImage() {
const src = '/images/picture.jpg';
const buffer = await fs.readFile(
const { base64 } = await getPlaiceholder(buffer);
return (
<div>
<p>Static Plaiceholder blur</p>
<div >
<Image
src={src.replace('./public', '')}
fill
alt="image"
placeholder='blur'
blurDataURL={base64}
/>
</div>
</div>
)
}
import Image from 'next/image';
import fs from "node:fs/promises";
import { getPlaiceholder } from "plaiceholder";
export default async function BlurImage() {
const src = '/images/picture.jpg';
const buffer = await fs.readFile(
./public${src});const { base64 } = await getPlaiceholder(buffer);
return (
<div>
<p>Static Plaiceholder blur</p>
<div >
<Image
src={src.replace('./public', '')}
fill
alt="image"
placeholder='blur'
blurDataURL={base64}
/>
</div>
</div>
)
}
do you have an alternative then ? cause this is from the plaiceholder docs
and call it from there
cause this is a react server component
so u call
const src = await yourBase64Function()and this function is defined in a utils.ts or idk
Cornish RexOP
okay ill try that thanks
and also use fs from fs
Cornish RexOP
still cant find the module
Cornish RexOP
using fs from "fs" it cant find the module
and using: import fs from import fs from "node:fs/promises";
-> I get this error:
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.
and using: import fs from import fs from "node:fs/promises";
-> I get this error:
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.
strange thing is, in a different nextjs project of mine it works just fine
could it be a conflict with a different module i am importing ?