title: Cannot find module 'jsonfile/utils' in Electron-Typescript app
body: <p>I started from a brand new working very simple Electron-Typescript app.</p>
  <p>In this working really simple Electron-Typescript app, I added in main.ts:</p>
  <pre><code>import Ipfs from 'ipfs';
  import IpfsHttpClient from 'ipfs-http-client';
  </code></pre>
  <p>and this <code>import</code> of ipfs modules went fine.</p>
  <p>But when I add</p>
  <pre><code>const { globSource } = IpfsHttpClient;
  </code></pre>
  <p>or</p>
  <p>when I create an IPFS node:</p>
  <pre><code>const ops = async () =&gt; {
    const node = await Ipfs.create({ repo: String(Math.random() + Date.now()) });
  }
  </code></pre>
  <p>I get this error:</p>
  <pre><code>A JavaScript error occurred in the main process
  Uncaught Exception:
  Error: Cannot find module 'jsonfile/utils'
      at webpackMissingModule (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:13356:87)
      at Object../node_modules/fs-extra/lib/json/output-json.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
  /main/index.js:13356:176)
      at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
      at Object../node_modules/fs-extra/lib/json/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
  /main/index.js:13284:25)
      at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
      at Object../node_modules/fs-extra/lib/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
  /main/index.js:13250:6)
      at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
      at Object../node_modules/ipfs-utils/src/files/glob-source.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
  /main/index.js:25171:12)
      at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
      at Object../node_modules/ipfs-http-client/src/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
  /main/index.js:21670:20)
  </code></pre>
  <p>tools/webpack/webpack.main.js  :</p>
  <pre><code>module.exports = {
    entry: ['./src/main.ts'],
    // Put your normal webpack config below here
    module: {
      rules: require('./webpack.rules'),
    },
    resolve: {
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
      alias: require('./webpack.aliases'),
    },
    target: 'electron-main'
  };
  </code></pre>
  <p>tools/webpack/webpack.renderer.js :</p>
  <pre><code>/* eslint-disable @typescript-eslint/no-var-requires */
  const rules = require('./webpack.rules');
  const plugins = require('./webpack.plugins');
  const aliases = require('./webpack.aliases');
  
  module.exports = {
    target: 'electron-renderer',
    module: {
      rules,
    },
    plugins: plugins,
    resolve: {
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
      alias: {
        // React Hot Loader Patch
        'react-dom': '@hot-loader/react-dom',
        // Custom Aliases
        ...aliases,
      },
    },
  };
  </code></pre>
  <p>tools/webpack/webpack.rules.js  :</p>
  <pre><code>const inDev = process.env.NODE_ENV === 'development';
  
  module.exports = [
    {
      // Add support for native node modules
      test: /\.node$/,
      use: 'node-loader',
    },
    {
      // Typescript loader
      test: /\.tsx?$/,
      exclude: /(node_modules|\.webpack)/,
      use: {
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
        },
      },
    },
    {
      // CSS Loader
      test: /\.css$/,
      use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
    },
    {
      // Less loader
      test: /\.less$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'less-loader' },
      ],
    },
    {
      // Images Loader
      test: /\.(gif|jpe?g|tiff|png|webp|bmp)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            publicPath: 'images',
            outputPath: inDev ? 'images' : './main_window/images',
          },
        },
      ],
    },
  ];
  </code></pre>
  <p>If modify the <code>target</code> from <code>electron-renderer' to </code>web' in
  tools/webpack/webpack.renderer.js :</p>
  <pre><code>/* eslint-disable @typescript-eslint/no-var-requires */
  const rules = require('./webpack.rules');
  const plugins = require('./webpack.plugins');
  const aliases = require('./webpack.aliases');
  
  module.exports = {
    //target: 'electron-renderer',
    target: 'web',
    module: {
      rules,
    },
    plugins: plugins,
    resolve: {
      extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
      alias: {
        // React Hot Loader Patch
        'react-dom': '@hot-loader/react-dom',
        // Custom Aliases
        ...aliases,
      },
    },
  };
  </code></pre>
  <p>And in the renderer process /src/app/components/App.tsx I add :</p>
  <pre><code>import Ipfs from 'ipfs';
  const { globSource } = Ipfs;
  
  const ops = async () =&gt; {
      const node = await Ipfs.create({ repo: String(Math.random() + 
  Date.now()) });
      console.log('Ipfs node is ready');
      const files = [
        {
          path: '/home/marco/Downloads/Art21Costituzione.jpg',
          content: 'Art21Costituzione'
        },
        {
          path: '/home/marco/Downloads/VitaminaCAlimenti.pdf',
          content: 'VitaminaCAlimenti'
        }
      ];
  
      let results = await all(node.addAll(files));
      results.map(result =&gt; console.log(result));
  }
  </code></pre>
  <p>I get this correct output:</p>
  <p><a href="https://i.stack.imgur.com/WAL4r.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WAL4r.jpg" alt="enter image description here" /></a></p>
  <p>But globSource in the renderer process gives error:</p>
  <pre><code>for await (const file of node.addAll(globSource('/home/marco
  /Downloads', globSourceOptions), addOptions)) {
    console.log(file);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ixzx6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ixzx6.jpg" alt="enter image description here" /></a></p>
  <p>So.. I guess there is something to fix  in webpack configuration in order to make it work in the main process,
  instead of having it in the renderer process.</p>
  <p>How to solve the problem?</p>