Can't use native node modules like fs

[CyanGlory]

It's like a problem not a bug.

when I want to use 'fs' module in my project created by create-react-app, I got this question:

TypeError: WEBPACK_IMPORTED_MODULE_0_fs.readFile is not a function

searched for sometimes, I get a config with:

  // Some libraries import Node modules but don't use them in the browser.
  // Tell Webpack to provide empty mocks for them so importing them works.
  node: {
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty',
  },

try to changed it for other condition is also failed.
can I use modules listed in the config by anyways ?

[Timer]

What package are you trying to use?

[CyanGlory]

import * as fs from 'fs';

Just the local nodejs module I want to use.
this way I find from stackoverflow not effective too.
should I do something for SSR(server side render)?

[Timer]

Hmm, you definitely can't use fs like that so I suppose I'd expect this to break, was it running for code that was strictly ran server side?

Is it feasible for you to take it out of your main app? I guess I'd need more context about what you're doing.

[CyanGlory]

sure, By default is client render, SSR is a consider, the thing I do is for markdown render like this:

/**
 * @desc render Markdown Language for React 
 */

import * as fs from 'fs';
import React from 'react';
import ReactMarkdown from 'react-markdown';

class Markdown extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      doc: 'null',
    };
  }

  componentDidMount() {
    fs.readFile('./../md-documents/eslint.md', 'utf8', (err, eslint) => {
      if (err) {
        return console.error(err);
      }
      console.log(`async read file: ${eslint.toString()}`);
      return this.setState({
        doc: eslint,
      });
    });
  }

  render() {
    return <ReactMarkdown className="markdown" source={this.state.doc} />;
  }
}

export default Markdown;

[Timer]

Hmm, I see ... I'm going to ask @gaearon to share his input.

This seems like an odd use case to me (I suppose it makes sense in a SSR environment), but we don't support SSR.

If you've ejected (which it seems like you have), you can remove fs: 'empty', and this should start working again (if it was before); by the way, was this working before? 😆

Does switching import * as fs from 'fs'; out for const fs = require('fs') make this start working?

[CyanGlory]

I create this project today, and once I meet this question I tried to delete this config in webpack.x.x both dev and prod in the react-scripts(thoughs It's not a good idea for changing node_modules). It doen't useful,
Of course, const fs = require('fs); is tried too.
I see the history issue near 1 hour but got noting helpful. So I create this issue.
some keywords like [fs, node modules, can't find module, { errorMessage }];

[Timer]

Ah, yes, I just checked and we've stubbed it as empty for over a year now.

Hmm, I'd suggest working around this so that you don't require fs directly; maybe you can pass it in as a property and only provide that property when rendering server side.

[CyanGlory]

Thanks!🤣 Now I import /.md$/ file with /.md.js$/ the pseudo method for string to use, and I'l try your sugest that only use it when rendering server side as a property.

[Timer]

Closing as we settled on the solution being re architecting where fs is used.
We don't support SSR, so I suggest working around this by rendering your main component server-side with the props sent with your file content.