Beginner - Next JS. 'fs' module not found issue. #12124
-
|
I am going through the blog tutorial on Next JS site, and encountered this error when trying to implement static rendering. |
Beta Was this translation helpful? Give feedback.
Replies: 13 comments 25 replies
-
|
Welcome! import fs from 'fs';
export default function Home(props) {
return (
<div className="container">
...
</div>
);
}
// getStaticProps only runs in the Node side, so it is safe
// to use libraries from Node here
export async function getStaticProps() {
const fileNames = fs.readdirSync(postsDirectory);
...
}In the tutorial these libraries are imported in another file, but a bit later they are utilized inside export async function getStaticProps() {
const allPostsData = getSortedPostsData()
return {
props: {
allPostsData
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
This is confusing. I'm facing the same issue. I am importing fs at the top of my posts.js which defines getSortedPropData(). fs is called in that function, and you're telling me I don't need to include it in the file? index.js import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
export async function getStaticprops() {
const allPostsData = getSortedPostsData()
return {
props: {
allPostsData
}
}
}
export default function Home({ allPostsData }) {
return (
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<section className={utilStyles.headingMd}>
<p>Im just a dude who likes to do things</p>
<p>I like to play chess</p>
</section>
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
<h2 className={utilStyles.headingLg}>Blog</h2>
<ul className={utilStyles.list}>
{allPostsData.map(({ id, date, title }) => (
<li className={utilStyles.listItem} key={id}>
{title}
<br />
{id}
<br />
{date}
</li>
))}
</ul>
</section>
</Layout>
)
}posts.js import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
const postsDirectory = path.join(process.cwd(), 'posts')
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map(fileName => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '')
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
// Combine the data with the id
return {
id,
...matterResult.data
}
})
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
} else {
return -1
}
})
} |
Beta Was this translation helpful? Give feedback.
-
|
Does that mean that the line in the "Implement getStaticProps" instructions that reads "You should now see the blog data if you access http://localhost:3000." is bs? I literally copied and pasted the code from the tutorial into VSCode and am getting this error. |
Beta Was this translation helpful? Give feedback.
-
|
Programs are complex. Writing tutorials is hard and there's a lot of room for error. I recommend shifting your mindset from "that is bs" to "what does this error mean." This error is one of the harder ones to reason about since it points to an error somewhere else in your code. I wrote a bit about it elsewhere on this thread: |
Beta Was this translation helpful? Give feedback.
-
|
what about the new app directory? How do I use the |
Beta Was this translation helpful? Give feedback.
-
|
I found what the issue was. I simply had a client component trying to render a server component. But if I'm not mistaken, the docs say that your client components should be like the leaves of your server components. In other words, you can nest client components inside server components, but not vice versa. |
Beta Was this translation helpful? Give feedback.
-
|
I'm not sure what I'm doing incorrectly. The sample does work, but when I try to write my own component, I get the error: import { promises } from 'fs'
import React from 'react'
import { join } from 'path'
import firebase from '../utils/firebase'
// Configure FirebaseUI.
const uiConfig = {
// Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
signInSuccessUrl: '/signedIn',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID,
]
}
export default function LoginOptions ({ css }) {
React.useEffect(() => {
// must be required here since this is client-side rendered
const firebaseui = require('firebaseui')
// Initialize the FirebaseUI Widget using Firebase.
const ui = new firebaseui.auth.AuthUI(firebase.auth())
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
}, [])
return (
<>
<div id="firebaseui-auth-container"></div>
<style jsx global>{css}</style>
</>
)
}
export async function getStaticProps () {
const css = await promises.readFile(join(process.cwd(), 'public', 'firebaseui.css'))
return {
props: {
css
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
You can only use |
Beta Was this translation helpful? Give feedback.
-
|
@rafaelalmeidatk oh. thanks On the second point, I don't want to include that css globally. It's specific to that page only. I'll move the logic to the page level. |
Beta Was this translation helpful? Give feedback.
-
|
This answer was what resolved my issue! the component needs to be inside the |
Beta Was this translation helpful? Give feedback.
-
|
i'm getting this error by just adding an |
Beta Was this translation helpful? Give feedback.
-
|
This is the expected behavior, |
Beta Was this translation helpful? Give feedback.
-
|
thanks! this is more or less what was happening in my use case // lib/loadPosts.js
import fs from "fs";
export function getAllPosts() {
return fs.readdirSync("/path/to/posts");
}
export function getPostBySlug(slug) {
return fs.readFileSync("/path/to/posts" + slug, "utf8");
}
export function someUnusedFunction() {
return fs.readdirSync("/tmp");
}
// pages/blog/[slug].js
import { getAllPosts, getPostBySlug, someUnusedFunction } from "lib/loadPosts";
export async function getStaticPaths() {
const posts = getAllPosts();
return {
paths: posts.map(posts => {
return {
params: {
slug: posts.slug
}
};
}),
fallback: false
};
}
export async function getStaticProps({ params }) {
const post = getPostBySlug(params.slug);
return {
props: { post }
};
}
const BlogPost = ({ post }) => {
return <pre>{JSON.stringify(post, null, 2)}</pre>;
};I was using a logic similar to the A more explicit error message in this case would be great for DX, but maybe it's hard to detect. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same code, but it also does not work |
Beta Was this translation helpful? Give feedback.
-
|
Now, I create a TS file just for typing. It's actually this, and it throws error. It does not ignore import fs from 'fs'
import yaml from 'js-yaml'
import path from 'path'
import * as z from 'zod'
export const zRemark42 = () => z.object({
host: z.string(),
siteId: z.string(),
locale: z.string().optional()
})
export type IRemark42 = z.infer<ReturnType<typeof zRemark42>>
export const zAuthor = () => z.object({
name: z.string(),
email: z.string().optional(),
url: z.string().optional()
})
export type IAuthor = z.infer<ReturnType<typeof zAuthor>>
export const zTabs = () => z.array(z.object({
name: z.string(),
to: z.string().optional(),
href: z.string().optional()
}))
export type ITabs = z.infer<ReturnType<typeof zTabs>>
export const zSidebar = () => z.object({
twitter: z.string().optional(),
tagCloud: z.object({
excluded: z.array(z.string()).optional()
}).optional()
})
export type ISidebar = z.infer<ReturnType<typeof zSidebar>>
export const zSocial = () => z.object({
twitter: z.string().optional(),
reddit: z.string().optional(),
quora: z.string().optional(),
github: z.string().optional()
})
export type ISocial = z.infer<ReturnType<typeof zSocial>>
export const zTheme = () => z.object({
title: z.string(),
banner: z.string().optional(),
baseUrl: z.string().optional(),
description: z.string().optional(),
keywords: z.array(z.string()).optional(),
tabs: zTabs().optional(),
author: zAuthor(),
social: zSocial().optional(),
sidebar: zSidebar().optional(),
analytics: z.object({
plausible: z.string().optional()
}).optional(),
comments: z.object({
remark42: zRemark42().optional()
}).optional()
})
export const getTheme = () => zTheme().parse(yaml.safeLoad(fs.readFileSync(path.join(__dirname, '../theme.yml'), 'utf8')))
export type ITheme = z.infer<ReturnType<typeof zTheme>> |
Beta Was this translation helpful? Give feedback.
-
|
it seems that I cannot use fs event in getStaticProps, the compiler renders an error just when importing fs, even if it's not used at all.. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks a lot! I was facing the same issue, actually it was a totally unrelated error to that being shown in the console. |
Beta Was this translation helpful? Give feedback.
-
|
For me, I accidentally typed |
Beta Was this translation helpful? Give feedback.
-
|
This information fixed it all for me. I was using type script and hadn't typed my stuff yet. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you ! At last the information that has resolved my issue :) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @jde, that was helpful |
Beta Was this translation helpful? Give feedback.
-
|
I made this way: import path from 'path';
function HomePage(props) {
const { products, filePath } = props;
return (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
);
}
export async function getStaticProps(context) {
const fs = require('fs/promises'); // LOOK HERE
const filePath = path.join(process.cwd(), 'data', 'dummy-data.json');
const fileData = await fs.readFile(filePath);
const data = JSON.parse(fileData);
return {
props: {
products: data.products,
},
};
}
export default HomePage; |
Beta Was this translation helpful? Give feedback.
-
|
you made my day buddy, thanks |
Beta Was this translation helpful? Give feedback.
-
|
What about typeScript version? |
Beta Was this translation helpful? Give feedback.
-
|
I had the same issue, apparently the issue is that I learned this from this article, where someone had the same issue |
Beta Was this translation helpful? Give feedback.
-
This is not working for me anyhow the 'fs' module can't be resolved error is gone and now getting another error tried quite a solutions ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
npm ERR! A complete log of this run can be found in: |
Beta Was this translation helpful? Give feedback.
-
|
same, any solutions? |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
To those who might not find a solution in the answers above Verify your It needs to be as written below import "../styles/global.css";
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}NOT like this import "../styles/global.css";
export default function App({ Component }, { pageProps }) {
return <Component {...pageProps} />;
}which was my problem, in this example |
Beta Was this translation helpful? Give feedback.
-
|
i had the same issue and i fixed it by |
Beta Was this translation helpful? Give feedback.
-
|
After figuring out for 2 hours finally It resolved. I faced the issue because of wrong function name. Instead of Check properly the name of functions. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Team, How can I writeJsonFile in next.js / react ? |
Beta Was this translation helpful? Give feedback.
-
|
@front-end-apps Refer to solution #12124 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Don't use You could put the util file which uses Then // /pages/myPage/index.tsx
import View from './view';
export default View;
export async function getStaticProps() {
const util = require('core/some-util-uses-fs').default; // getStaticProps runs in nodes
const data = await util.getDataFromDisk();
return {
props: {
data,
},
};
} |
Beta Was this translation helpful? Give feedback.
-
|
I'm using winston for logging at server side, and toast utility at client side, tried a dynamic import of winston, and file where logger is implemented, but its still giving fs error, tried |
Beta Was this translation helpful? Give feedback.
and others
Welcome!
fsis a library exclusive to Node, so you can't use it directly in the browser. But if you import it at the top of the file and use it in a function that only runs in the server, then Next will remove this import from the client bundle, so this code is valid:In the tutorial these libraries are imported in another file, but a bit later they are utilized ins…