I am using a library called react-markdown. If you know React, it's implementation is very simple.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';

var content = '# This is a header\n\nAnd this is a paragraph';

ReactDOM.render(
  <ReactMarkdown source={content} />,
  document.getElementById('root')
);

The demo for the library only discusses creating the Markdown string as a variable, not an locally located file. The obvious thing to me to do was to use fs in Node. So I wrote the following:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';
import * as fs from 'fs';
import content from './content/generic.md';

fs.readFile(content, (err, data) => {
  if (err) throw err;
  console.log(data);
});

Before I can provide the ReactMarkdown element with content, Webpack plains that readFile is not a function!

Specifically, it highlights the fs.readFile line and says:

TypeError: __WEBPACK_IMPORTED_MODULE_5_fs___default.a.readFile is not a function

This same error occurs if I use import {readFile } from 'fs' and it also occurs when I use fs.stat or fs.open. Isn't fs a default library for node? Should it be included in package.json for the webpack? Even if I run npm install --save fs I still can't access these functions. (P.S. I am using create-react-app)

Moreover, if I can't do this with fs, is there another method?

I am using a library called react-markdown. If you know React, it's implementation is very simple.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';

var content = '# This is a header\n\nAnd this is a paragraph';

ReactDOM.render(
  <ReactMarkdown source={content} />,
  document.getElementById('root')
);

The demo for the library only discusses creating the Markdown string as a variable, not an locally located file. The obvious thing to me to do was to use fs in Node. So I wrote the following:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactMarkdown from 'react-markdown';
import * as fs from 'fs';
import content from './content/generic.md';

fs.readFile(content, (err, data) => {
  if (err) throw err;
  console.log(data);
});

Before I can provide the ReactMarkdown element with content, Webpack plains that readFile is not a function!

Specifically, it highlights the fs.readFile line and says:

TypeError: __WEBPACK_IMPORTED_MODULE_5_fs___default.a.readFile is not a function

This same error occurs if I use import {readFile } from 'fs' and it also occurs when I use fs.stat or fs.open. Isn't fs a default library for node? Should it be included in package.json for the webpack? Even if I run npm install --save fs I still can't access these functions. (P.S. I am using create-react-app)

Moreover, if I can't do this with fs, is there another method?

• javascript
• node.js
• ecmascript-6
• fs

Share Improve this question Follow edited May 22, 2017 at 0:14 russellmania asked May 21, 2017 at 20:42 russellmaniarussellmania 74922 gold badges1010 silver badges2121 bronze badges 2

• Thanks, Andrew—both for the correct answer and the edits. I guess I still need to build a promise so that the React element doesn't try to render until fs.readFile is done, because right now, even though your answer works, I still get a message from React that content is undefined – russellmania Commented May 21, 2017 at 22:00
• You could use readFile and set a callback (as the third argument) to set state once the file is read. That way it will rerender the ponent once the file is done being read. – Andrew Li Commented May 21, 2017 at 22:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

The fs module does not have a default export, and so importing it with default import syntax won't work. The fs module only exports named exports, so import all of them under the name fs like so:

import * as fs from 'fs'

This will import all the named exports as properties of one object named fs. That will allow you to do fs.readFile. Better yet, you could use named export importing to import just the function you need:

import { readFile } from 'fs'

Secondly, pass readFile a path to the Markdown file, don't import it directly with import syntax:

fs.readFile('./content/generic.md', 'utf8', (err, data) => {
    ...
});

Unless you have the correct loader to import the file, do not import it with require or import. Node will treat it as a JavaScript file and try to interpret the Markdown as JavaScript. Pass the path of the Markdown file directly to readFile. Also make sure to specify the encoding as utf8 to get the string content of the file.