CODEWITHSUNDEEP
javascriptnext.js
Domini
Domini

Reputation: 105

Module not found: Can't resolve 'fs' - yet another NextJS problem

I am attempting to read a json file that is in one directory above my NextJS application directory. In a normal JavaScript setting,

var fs = require('fs');
var data = JSON.parse(fs.readFileSync(directory_path))

Boom boom pow, I have the JSON data available to do what I want with. With NextJS, you're not allowed to use the var fs = require('fs') line. You'll get errors like:

Module not found: Can't resolve 'fs'

Import trace for requested module:
./pages/file_where_broken_function_is_called.js

Basically saying it can't read the file and doesn't know where to find the JSON file since it's outside the application directory I believe (according to the import trace error). So you need to configure your next.config.js file. Mine currently looks like this:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

I followed this video to set up my file to be like so:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };
    return config;
  }
}

module.exports = nextConfig

Only to be met with

404 This page could not be found

When I restart the server.

I fully admit to copy/pasting and not understanding what I'm typing in the next.config.js file or how it works to begin with. But reading a file should not be this hard.

Edit

I narrowed down my error: In this component file, resplendent_contract_export.js

import Web3 from "web3"
// export local copies of contracts

const provider = new Web3.providers.HttpProvider(
    process.env.NEXT_PUBLIC_RINKEBY_RPC_URL
)

const web3 = new Web3(provider)
const fs = require('fs')

var data = JSON.parse(fs.readFileSync("../../build/contracts/Betting.json"))

I'm attempting to read in a JSON file. When I uncomment the line var data = JSON.parse..., it crashes. Therefore I suppose I'm using fs incorrectly? At the very least, I am making progress.

Edit 2

import fs from 'fs'
export async function getStaticProps() {
    const { readFileSync } = require("fs");
    console.log(fs)
    const post = JSON.parse(readFileSync("File.json"))
   console.log(post.abi)
    data = post.abi
    return {
      props: {
        data,
      },
    }
  }
}

This is what I was attempting to post in the comments below, I can't figure out how to post a code block in the comments (3 backticks didn't work for me and Ctrl-K just cleared a line, is this unavailable on OSX?) so I have to edit this in. But as I noted in the comment down below, I ended up getting this error here:

ReferenceError: readFileSync is not a function

Any suggestions to solve this error?

Upvotes: 0

Views: 1139

Answers (1)

omid
omid

Reputation: 1194

It looks like you're importing fs into a file in your pages directory. This is ok in theory but you have to use that function in getServerSideProps() otherwise you'll get the Module not found error that you reported.

If you just put a call to fs in your file, it will error because the browser has no concept of that module.

export const getServerSideProps = () => {
  console.log(fs); <-- ok because this function runs on the server
  const data = JSON.parse(fs.readFileSync(... your file);
  return { props: data };
};

EDIT:

You can replace getServerSideProps with getStaticProps if your page is statically generated and fs will still work.

Upvotes: 1

Related Questions