how can I use fs in react with electron?

Question

I want use react+webpack+electron to build a desktop app.How can I inject fs module into react so that I can use it to read native files? I have a component such as:

class Some extends Component {
  render() {
    return <div>{this.props.content}</div>
  }
}
export default Some;

in entry.js:

import React from 'react';
import { render } from 'react-dom';
import Some from './src/some.jsx';

const data = "some content";
/*
 How can I read data by fs module?
 import fs from 'fs' doesn't work here
*/
render(
  <Some content={data} />,
  document.getElementById('app')
);

I use webpack to build js codes into a bundle.js,and in index.html

...
<div id="app"></div>
<script src="bundle.js"></script>
...

In webpack.config.js:

...
plugins: [new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$"))]
...

I find this config on the internet because if I don't add it the webpack will report error,but I don't know how this means.

And I have a very easy main.js which is the same as electron-quick-start's main.js

Do I lose some important things?

It can't be better if u can provide a existed example on github repo.

Answer 1

The easiest thing to do is probably to use webpack-target-electron-renderer, you can find examples of using it in electron-react-boilerplate.

Answer 2

use window.require() instead of require().

const fs = window.require('fs');