Невозможно использовать «fs» в getInitialProps
Я пытаюсь получить содержимое анализируемого файла внутри getInitialProps, когда мой вид загружается, проблема в том, что он говорит мне, что Module not found: Can't resolve 'fs', и я не понимаю, почему - согласно документации, он включает рендеринг на стороне сервера .
Мой маршрут API:
import parseCommands, { ICommands } from "../../modules/parser/json";
export const getCommands = (): ICommands => {
const commands = parseCommands("data.json");
return commands;
};
Мой взгляд на реакцию:
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;
Что я делаю не так?
@Nisharg Shah, на самом деле, в Next.js вы можете выполнять рендеринг на стороне сервера.
Отвечает ли это на ваш вопрос? Как использовать модуль node.js с Next.js?
Ответы 2
Вам необходимо обновить версию next.js - Обновление для современного 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
}
}
getInitialProps работает как на стороне сервера, так и на стороне клиента, поэтому невозможно использовать fs без ветвления. Вместо этого используйте getServerSideProps.
Вы можете отказаться от модуля с ответом Ора, но он просто решает проблему.
Кроме того, вы можете перейти в getInitialProps, чтобы определить, находимся ли мы на сервере во время выполнения кода. Вы не должны использовать readFileSync в коде веб-сервера.
export const getInitialProps = async ({ req }) => {
if (res === undefined) {
return { commands: [] }
}
const fs = await import('fs')
const readFile = fs.promises.readFile;
return { commands: await readFile(...) }
}
подождите
fsво внешнем интерфейсе, это невозможно, SSR известен как рендеринг на стороне сервера, а не операция на стороне сервера, поэтому вы не можете выполнять какие-либо действия на стороне сервера в реакции или в следующем