reactjs - Kan ikke bruke 'fs' i getInitialProps

Jeg prøver å få innholdet i en analysert fil inne i getInitialProps når visningen min lastes, problemet er at det sier til meg at Module not found: Can't resolve 'fs' og jeg forstår ikke hvorfor - ifølge dokumentasjonen gjør det det mulig med server-side rendering.

Min API-rute:

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

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

    return commands;
};

Min React-visning:

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;

Min fil prøver å importere modulen '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;

Hva gjør jeg galt?

Svar #1

Du må oppdatere Next.js-versjonen din - Oppdater for moderne Next.js (9.4+)

Du kan også trenge å lage en next.config.js-fil med følgende innhold for å få klientpakken til å bygge:

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

    return config
  }
}

Svar #2

getInitialProps kjører både på server- og klientsiden, så det er ikke mulig å bruke fs uten å lage forgreningslogikk. Bruk getServerSideProps i stedet.

Du kan fikse modulen midlertidig med Ors svar, men det er bare en måte å omgå problemet på.

Alternativt kan du lage en gren i getInitialProps for å avgjøre om vi er på serveren når koden kjøres. Du bør ikke bruke readFileSync i nettserverkode.

export const getInitialProps = async ({ req }) => {
  if (res === undefined) {
    return { commands: [] }
  }

  const fs = await import('fs')
  const readFile = fs.promises.readFile;
  return { commands: await readFile(...) }
}

Relaterte artikler