为什么 fs 在路由到新页面时会抛出错误，但刷新页面有效？答案

【问题标题】：why Does fs throw error on routing to new page, but refreshing page works?为什么 fs 在路由到新页面时会抛出错误，但刷新页面有效？
【发布时间】：2021-05-09 21:47:47
【问题描述】：

问题：

我正在构建一个具有 4 个输入字段的 NextJs 应用程序。所有这些字段都有一个设置选项列表。现在我正在将这些选项作为项目中包含的 json 阅读。用户可以选择这两个字段，然后单击按钮转到搜索页面。然后，用户可以选择搜索页面上的按钮以导航回主页。该项目在运行时似乎加载良好，但如果我导航到搜索结果页面并返回主页（两个导航都是使用来自下一个/链接的链接完成的）我得到TypeError: fs__WEBPACK_IMPORTED_MODULE_17___default.a.readFileSync is not a function，如下所示

正如您在主页的getInitialProps() 调用中看到的那样。此调用在站点启动时似乎按预期工作，并且仅在从另一个页面导航到该页面时出现问题，但是此错误消失并且刷新页面时恢复所有功能。出于某种原因，它似乎无法识别重新路由时的fs 导入，但在刷新时可以正常工作。除了重新加载窗口之外，有谁知道如何解决此错误

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>
      )
    }
}

版本：

下一个：10.1.3

反应：17.0.2

如果这很重要，我会在 WSL2 上运行。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

刷新页面会导致它使用服务器端渲染生成。

普通导航触发客户端渲染。

fs 模块依赖于 Node.js 而不是 Web 浏览器提供的 API（即访问服务器硬盘的能力）。

通过 API 页面提供 JSON 并按照 React AJAX and APIs FAQ 使用 fetch 访问它。

【讨论】：