reactjs - 不能在 getInitialProps 中使用 'fs'

Question

当我的 View 加载时，我试图在 getInitialProps 中获取已解析文件的内容，问题是它告诉我 Module not found: Can't resolve 'fs ' 我不明白为什么 - 根据文档，it enables server-side rendering .

我的 API 路由:

import parseCommands, { ICommands } from "../../modules/parser/json";

export const getCommands = (): ICommands => {
    const commands = parseCommands("data.json");

    return commands;
};

我的 react 观点:

import { NextPage } from "next";
import { getCommands } from "../../pages/api/commands";
import { ICommands } from "../../modules/parser/json";
import styles from "./commands.module.scss";

type Props = {
    commands: ICommands;
};

const Commands:NextPage<Props> = ({ commands }) => {
    return (
        <div className={styles.wrapper}>
            {commands}
        </div>
    );
};

Commands.getInitialProps = async () => {
    const commands:ICommands = await getCommands();

    return {
        commands
    };
};

export default Commands;

我的文件试图导入模块“fs”:

import fs from "fs";

[...]

const parseCommands = (path: string): ICommands => {
    const file:string = fs.readFileSync(path, "utf8");
    const json:any = JSON.parse(file);

    const commands:ICommands = parseData(json);

    return commands;
};

export default parseCommands;

我做错了什么？

Answer 1

您需要更新您的 next.js 版本 - Update for modern Next.js (9.4+)

您可能还需要创建一个包含以下内容的 next.config.js 文件来构建客户端包:

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}