Concern:
I have developed a NextJs application with 4 input fields, each connected to a predefined options list read in as a json file within the project. The user can select two fields and then proceed to a search page by clicking a button. From the search page, the user has the option to navigate back home by clicking another button. Initially, the project runs smoothly. However, upon navigating back and forth between the search results page and the home page using Next/Link, an error
TypeError: fs__WEBPACK_IMPORTED_MODULE_17___default.a.readFileSync is not a functionhttps://i.stack.imgur.com/vk1an.png
The issue occurs specifically during the getInitialProps() call on the home page. Strangely, this call functions properly when the site is first loaded but encounters problems only when redirecting from one page to another. Interestingly, refreshing the page resolves the error and restores full functionality. It seems that the import of fs is unrecognized upon rerouting, yet functions correctly after being refreshed. Is there a solution to this error besides manually reloading the window?
pages/index.js:
import { Component } from 'react';
import Head from 'next/head';
import FilterBox from '../components/filter-box';
import GreetingBlock from '../components/greeting-block';
import Layout, { siteTitle } from '../components/layout';
import styles from '../styles/Home.module.css';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
import orange from '@material-ui/core/colors/orange';
import fs from 'fs';
const theme = createMuiTheme({
palette: {
primary: {
main: blue[500],
},
secondary: {
main: orange[500],
},
},
});
class Home extends Component {
static async getInitialProps() {
const inputsraw = await fs.readFileSync('./data/inputs.json');
const inputs = await JSON.parse(inputsraw);
// console.log('====================')
return inputs
}
constructor(props) {
super(props);
this.state = {
area: '',
day: '',
startTime: '',
endTime: '',
features: '',
}
}
render() {
// console.log(this.props);
return (
<ThemeProvider theme={theme}>
<Layout home>
<Head>
<title>{siteTitle}</title>
</Head>
<GreetingBlock></GreetingBlock>
<FilterBox inputs={this.props}></FilterBox>
</Layout>
</ThemeProvider>
)
}
}
export default Home;
pages/search.js:
import Head from 'next/head';
import { Component } from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { getSearchData } from '../lib/search';
import blue from '@material-ui/core/colors/blue';
import orange from '@material-ui/core/colors/orange';
import Layout, { siteTitle } from '../components/layout';
import fs from 'fs'
const theme = createMuiTheme({
palette: {
primary: {
main: blue[500],
},
secondary: {
main: orange[500],
},
},
});
export default class Search extends Component {
static async getInitialProps() {
try {
const inputsraw = await fs.readFileSync('./data/inputs.json');
const inputs = await JSON.parse(inputsraw);
console.log('====================');
return inputs
}
catch {
return {}
}
}
constructor(props) {
super(props);
console.log(this.props);
}
render() {
console.log(this.props.areas);
return (
<ThemeProvider theme={theme}>
<Layout>
<Head>
<title>{siteTitle}</title>
</Head>
<h1>HIII</h1>
<div>{JSON.stringify(this.props.areas)}</div>
</Layout>
</ThemeProvider>
)
}
}
Versions:
next: 10.1.3
react: 17.0.2
The application is running on WSL2.