Module not found: Can't resolve 'child_process'

Question

while using reactjs I am getting this.webpack error incounter while npm start.

    `./~/csvtojson/libs/core/workerMgr.js
    Module not found: Can't resolve 'child_process' in '/var/www/html/ReactLogin/node_modules/csvtojson/libs/core'`
    File : CsvRead.jsx

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

    var objects;

    var CsvRead = React.createClass({
        readFile:function(){
            var file = this.refs.file.files[0];
            var reader = new FileReader();
            reader.onload = function(evt){
                 var resultText = evt.target.result;
                 objects = this.csvToJson(resultText);
                 console.log(objects);
            }.bind(this);
            var newFile = file.slice(0,5000);
            reader.readAsText(newFile); 
        },
        csvToJson:function(csvString){
            var Converter = require("csvtojson").Converter;
            var converter = new Converter({});
            converter.fromString(csvString, function(err,result){
               //When i console log the result it is working but when i return The result:
               // i am getting a undefined error
               //console.log(result);
               return result;
            });
        },
        render:function(){
        console.log('i am here');
          return (
             <input type="file" ref="file" onChange={this.readFile} /> 
          );
        }
    });

File : GoogleChart.jsx : This file contains the import statement for including CsvRead.jsx but not working while including this file.

    import React, { Component } from 'react'
    import ReactDOM from 'react-dom';
    import { connect } from 'react-redux'
    import { createHashHistory } from 'history';
    import { Chart } from 'react-google-charts';
    import { CsvRead } from '../dynamic/CsvRead.jsx'

    const customHistory = createHashHistory();

    class GoogleChart extends Component {
        constructor(props) {
      super(props);
        this.state = {
          options: {
            title: 'Users Hours comparison',
            hAxis: { title: 'User'},
            vAxis: { title: 'Hours'},
            legend: 'none',
            axisTitlesPosition: 'out',
            'isStacked': true,
            colors: ['#0598d8', '#f97263'],
          },

          data :[
            ['User', 'workingHours', 'ExceptedWorkingHours'],
            ['user1', 500, 400],
            ['user2', 300, 200],
            ['user3', 1500, 650],
            ['user4', 1200, 470],
            ['user5', 1000, 700],
            ['user6', 500, 400],
            ['user7', 1300, 500],
            ['user8', 176, 55],
            ['user9', 310, 240],
            ['user10', 500, 400]
        ]
        };
      }

      render() {
        return (
          <CsvRead />
          <Chart
            chartType="ColumnChart"
            data = {this.state.data}
            options={this.state.options}
            graph_id="ColumnChart"
            width="100%"
            height="400px"
            legend_toggle
          />
        );
      }
    }


    function select(state) {
        return {
            users: state.users
        }
    }

    export default connect(select)(GoogleChart);

Anyone can help me on this.might not getting correct issue to resolve this problem. How to solve this issue?

Answer 1

csvtojson package is trying to spawn a child_process, which cannot be done in a browser. According to the doc, if you pass a { fork: false } in the options, it won't use child_process. Please paste your code.