Following the core-api/FILES I get this error: "globSource is not a function"

Help js-ipfs
1

In an Electron-Typescript app following this example: js-ipfs/FILES.md at master · ipfs/js-ipfs · GitHub I get this error: “globSource is not a function”

this is the code :

import Ipfs from 'ipfs';
const { globSource } = Ipfs;

const ops = async () => {
  const node = await Ipfs.create({ repo: String(Math.random() + Date.now()) });

  const addOptions = {
    pin: true,
    wrapWithDirectory: true,
    timeout: 10000
  };
  for await (const file of node.addAll(globSource('/home/marco/Downloads', globSourceOptions), addOptions)) {
    console.log(file);
  }
}
ops();
  • node version: v14.5.0
  • OS: Ubuntu 18.04.4 Desktop
  • electron: 11.2.1
2

My solution is putting IPFS operation to Main thread and using IPC to invoke IPFS operation.

3

Hi @FledgeXu ! Thanks for giving an help.

I tried to move all those ipfs-related lines to the main process in main.ts , but with just these two lines:

export const ops = async () => {
  const node = await Ipfs.create({ repo: String(Math.random() + Date.now()) });
}

I get this error :

A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Class extends value undefined is not a constructor or null
    at Object../node_modules/ipfs-utils/src/http/fetch.browser.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:78261:31)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-utils/src/http.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:77717:37)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-utils/src/files/url-source.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:77673:14)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-core/src/index.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:70261:19)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs/src/index.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:78402:23)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)

I tried to change within /tools/webpack/webpack.renderer.js :
the target from ‘web’, which was fine when the ipfs-related code was in the renderer process, to ‘electron-main’, but the problem persists.

/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');

module.exports = {
  // https://github.com/electron/electron/issues/9920
  //target: 'electron-renderer',
  //target: 'web',
  target: 'electron-main',
  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,
    },
  },
};
4

There is my code. Hope can help you.

import { app, BrowserWindow, ipcMain } from "electron";
import * as path from "path";
import * as url from "url";

const IpfsHttpClient = require("ipfs-http-client");
const { globSource } = IpfsHttpClient;

ipcMain.handle(
    "upload",
    async (_event, apiAddress: string, location: string) => {
        const ipfs = IpfsHttpClient(`http://${apiAddress}`);
        return await ipfs.add(globSource(location, { recursive: true }));
    }
);

ipcMain.handle(
    "publish",
    async (_event, apiAddress: string, key: string, cid: string) => {
        const ipfs = IpfsHttpClient(`http://${apiAddress}`);
        return await ipfs.name.publish(cid, { key });
    }
);

let mainWindow: Electron.BrowserWindow | null;

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
        },
    });

    if (process.env.NODE_ENV === "development") {
        mainWindow.loadURL(`http://localhost:4000`);
    } else {
        mainWindow.loadURL(
            url.format({
                pathname: path.join(__dirname, "./renderer/index.html"),
                protocol: "file:",
                slashes: true,
            })
        );
    }

    mainWindow.on("closed", () => {
        mainWindow = null;
    });
}

app.on("ready", createWindow);
app.allowRendererProcessReuse = true;


const path = require("path");

module.exports = {
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    devtool: "source-map",
    entry: "./src/main.ts",
    target: "electron-main",
    module: {
        rules: [
            {
                test: /\.(js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "[name].js",
    },
};
5

For now, js-IPFS still has not finish typescript supports yet.

6

Thank you very much.
There must be something I miss, because with target: 'electron-main' in webpack.renderer.js
with just these lines in main.ts :

ipcMain.handle(
  "upload",
  async (_event, apiAddress: string, location: string) => {
    const ipfs = IpfsHttpClient(`http://${apiAddress}`);
    return await ipfs.add(globSource(location, { recursive: true }));
  }
);

I get the same error:

A JavaScript error occurred in the main process  
Uncaught Exception:
TypeError: Class extends value undefined is not a constructor or null
    at Object../node_modules/ipfs-utils/src/http/fetch.browser.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:16153:31)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-utils/src/http.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:15609:37)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-utils/src/files/url-source.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:15565:14)
    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:12181:19)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Module../src/main.ts (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:27609:74)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
7

How do you import the module, Could you show your import code?
And There are packages I installed.

{
  "name": "DIIFDekstopng",
  "version": "1.0.0",
  "main": "./dist/main.js",
  "license": "AGPL-3.0-or-later",
  "scripts": {
    "dev": "npm-run-all -p dev:react electron:serve",
    "dev:electron": "cross-env NODE_ENV=development webpack --config webpack/electron.webpack.config.js --mode development && yarn start:electron",
    "dev:react": "cross-env NODE_ENV=development webpack serve --config webpack/react.webpack.config.js --mode development",
    "electron:serve": "wait-on http-get://localhost:4000/ && yarn dev:electron",
    "start:electron": "electron .",
    "build": "npm-run-all build:electron build:react",
    "build:run": "npm-run-all build start:electron",
    "build:electron": "cross-env NODE_ENV=production webpack --config webpack/electron.webpack.config.js",
    "build:react": "cross-env NODE_ENV=production webpack --config webpack/react.webpack.config.js",
    "package": "npm-run-all build package:dist",
    "package:dist": "electron-builder --dir"
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@babel/runtime": "^7.12.5",
    "@gregoranders/csv": "^0.0.8",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@reduxjs/toolkit": "^1.5.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.15",
    "@types/react-router-dom": "^5.1.7",
    "add": "^2.0.6",
    "babel-loader": "^8.2.2",
    "cross-env": "^7.0.3",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "html-webpack-plugin": "^4.5.1",
    "ipfs-http-client": "^48.2.0",
    "ipfs-utils": "^6.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "typescript": "^4.1.3",
    "wait-on": "^5.2.1",
    "webpack": "^5.13.0",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1",
    "yarn": "^1.22.10"
  },
  "devDependencies": {
    "electron": "^11.1.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@typescript-eslint/eslint-plugin": "^4.13.0",
    "@typescript-eslint/parser": "^4.13.0",
    "electron-builder": "^22.9.1",
    "eslint": "^7.17.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-react": "^7.22.0"
  },
  "build": {
    "appId": "",
    "mac": {
      "category": "public.app-category.video"
    },
    "directories": {
      "output": "packages"
    },
    "files": [
      "package.json",
      "dist/**"
    ]
  }
}

I installed ipfs-http-client and ipfs-utils

8

This is the package.json :

{
  "name": "IpfsPlaying",
  "version": "2.0.2",
  "description": "IpfsPlaying",
  "main": ".webpack/main",
  "scripts": {
    "start": "cross-env NODE_ENV=development electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts ."
 },
 "repository": {
    "type": "git",
    "url": "https://github.com/raphael10-collab/IpfsPlaying"
  },
 "license": "MIT",
  "config": {
    "forge": "./tools/forge/forge.config.js"
  },
  "devDependencies": {
    "@electron-forge/cli": "6.0.0-beta.53",
    "@electron-forge/maker-deb": "6.0.0-beta.53",
    "@electron-forge/maker-rpm": "6.0.0-beta.53",
    "@electron-forge/maker-squirrel": "6.0.0-beta.53",
    "@electron-forge/maker-zip": "6.0.0-beta.53",
    "@electron-forge/plugin-webpack": "6.0.0-beta.53",
    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
    "@types/deep-equal": "^1.0.1",
    "@types/react": "^16.9.49",
    "@types/react-dnd": "^3.0.2",
    "@types/react-dnd-html5-backend": "^3.0.2",
    "@types/react-dom": "^16.9.8",
    "@types/react-window": "^1.8.2",
    "@types/webpack-env": "^1.15.2",
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "copy-webpack-plugin": "6",
    "cross-env": "^7.0.2",
    "css-loader": "^4.3.0",
    "electron": "^11.2.1",
    "eslint": "^7.9.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-react": "^7.20.6",
    "file-loader": "^6.1.0",
    "fork-ts-checker-webpack-plugin": "^5.2.0",
    "less": "^3.12.2",
    "less-loader": "^7.0.1",
    "node-loader": "^1.0.1",
    "parallel-webpack": "^2.6.0",
    "react-hot-loader": "^4.12.21",
    "rimraf": "^3.0.2",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.0.3",
    "typescript": "^4.0.2",
    "webpack": "4"
  },
  "dependencies": {
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "@hot-loader/react-dom": "^16.13.0",
    "@material-ui/core": "^5.0.0-alpha.23",
    "@reduxjs/toolkit": "^1.5.0",
    "@types/react-table": "^7.0.26",
    "blob-to-buffer": "^1.2.9",
    "buffer": "^6.0.3",
    "chokidar": "^3.5.0",
    "deep-equal": "^2.0.5",
    "delay": "^4.4.0",
    "dot-prop": "^6.0.1",
    "electron-squirrel-startup": "^1.0.0",
    "electron-store": "^7.0.0",
    "file-url": "^3.0.0",
    "fs-extra": "^9.1.0",
    "i18next": "^19.8.4",
    "ipfs": "^0.54.1",
    "ipfs-css": "^1.3.0",
    "ipfs-http-client": "^49.0.1",
    "ipfs-utils": "^6.0.0",
    "it-all": "^1.0.4",
    "libp2p": "^0.30.6",
    "libp2p-bootstrap": "^0.12.1",
    "libp2p-kad-dht": "^0.20.6",
    "libp2p-mdns": "^0.15.0",
    "libp2p-mplex": "^0.10.2",
    "libp2p-noise": "^2.0.4",
    "libp2p-tcp": "^0.15.2",
    "libp2p-webrtc-star": "^0.21.0",
    "libp2p-websockets": "^0.15.0",
    "multiaddr": "^8.1.2",
    "multiaddr-to-uri": "^6.0.0",
    "open": "^7.3.1",
    "portfinder": "^1.0.28",
    "react": "^16.13.1",
    "react-async": "^10.0.1",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "^16.13.1",
    "react-fast-compare": "^3.2.0",
    "react-icons": "^4.1.0",
    "react-table": "^7.6.3",
    "react-viewer": "^3.2.2",
    "react-window": "^1.8.6",
    "recursive-readdir": "^2.2.2",
    "redux": "^4.0.5",
    "rxjs": "^6.6.3",
    "tachyons": "^4.12.0",
    "untildify": "^4.0.0",
    "winston": "^3.3.3"
  }

The github code is here: https://github.com/raphael10-collab/IpfsPlaying

9

Don’t use import, try use require
Also import Ipfs from 'ipfs';

10

I substituted import with require :

//import Ipfs from 'ipfs';
const Ipfs = require("ipfs");

//import IpfsHttpClient from 'ipfs-http-client';
const IpfsHttpClient = require("ipfs-http-client");
const { globSource } = IpfsHttpClient;

But still the same error:

A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: Class extends value undefined is not a constructor or null
    at Object../node_modules/ipfs-utils/src/http/fetch.browser.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:84284:31)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-utils/src/http.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:83740:37)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-utils/src/files/url-source.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:83696:14)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs-core/src/index.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:70420:19)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/ipfs/src/index.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:84425:23)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)

I guess there is something to fix within webpack configuration

11

Here is my config.
electron.webpack.config.js

const path = require("path");

module.exports = {
   resolve: {
       extensions: [".tsx", ".ts", ".js"],
   },
   devtool: "source-map",
   entry: "./src/main.ts",
   target: "electron-main",
   module: {
       rules: [
           {
               test: /\.(js|ts|tsx)$/,
               exclude: /node_modules/,
               use: {
                   loader: "babel-loader",
               },
           },
       ],
   },
   output: {
       path: path.resolve(__dirname, "../dist"),
       filename: "[name].js",
   },
};

react.webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        mainFields: ["main", "module", "browser"],
    },
    entry: "./src/index.tsx",
    target: "electron-renderer",
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.(js|ts|tsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
        ],
    },
    devServer: {
        contentBase: path.join(__dirname, "../dist/renderer"),
        historyApiFallback: true,
        compress: true,
        hot: true,
        port: 4000,
        publicPath: "/",
    },
    output: {
        path: path.resolve(__dirname, "../dist/renderer"),
        filename: "js/[name].js",
        publicPath: "./",
    },
    plugins: [new HtmlWebpackPlugin({ title: "DIIF Desktop" })],
};

bable.config.js

module.exports = {
    presets: [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript",
    ],
    plugins: [["@babel/transform-runtime", { regenerator: true }]],
};
12

I tried to change in webpack.main.js the target from electron-renderer to `electron-main’
but got new error:

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  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'),
  },
  // https://github.com/electron/electron/issues/9920
  //target: 'electron-renderer'
  target: 'electron-main'
};



A JavaScript error occurred in the main process
Uncaught Exception:
Error: Module build failed (from ./node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js):
SyntaxError: Unexpected token (85:14)
    at Object.module.exports.pp$4.raise (/home/marco/webMatters/electronMatters/IpfsPlaying
/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20834:13)
    at Object.module.exports.pp.unexpected (/home/marco/webMatters/electronMatters/IpfsPlaying
/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:18680:8)
    at Object.module.exports.pp$1.parseTryStatement (/home/marco/webMatters/electronMatters
/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js:19069:49)
    at Object.module.exports.pp$1.parseStatement (/home/marco/webMatters/electronMatter
s/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader   
/dist/index.js:18834:32)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:4539:118)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:42314:22)
    at Object.module.exports.pp$1.parseBlock (/home/marco/webMatters/electronMatters
/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js:19157:23)
    at Object.module.exports.pp$1.parseTryStatement (/home/marco/webMatters/electronMatters
/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader  
/dist/index.js:19073:24)
    at Object.module.exports.pp$1.parseStatement (/home/marco/webMatters/electronMatters
/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js:18834:32)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:4539:118)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:42314:22)
    at Object.module.exports.pp$1.parseBlock (/home/marco/webMatters/electronMatters
/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js:19157:23)
    at Object.module.exports.pp$3.parseFunctionBody (/home/marco/webMatters/electronMatters
/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js:20675:22)
    at Object.module.exports.pp$3.parseArrowExpression (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js:20638:8)
    at Object.module.exports.pp$3.parseExprAtom (/home/marco/webMatters/electronMatters
/IpfsPlaying/node_modules/@marshallofsound/webpack-asset-relocator-loader
/dist/index.js:20227:21)
    at Object.parseExprAtom (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:4551:117)
    at Object../node_modules/fs-extra/lib/mkdirs/make-dir.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:77510:7)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/fs-extra/lib/mkdirs/index.js (/home/marco/webMatters/electronMatters
/IpfsPlaying/.webpack/main/index.js:77487:44)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/fs-extra/lib/copy-sync/copy-sync.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:76425:20)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
    at Object../node_modules/fs-extra/lib/copy-sync/index.js (/home/marco/webMatters
/electronMatters/IpfsPlaying/.webpack/main/index.js:76602:13)
    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:77353:6)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:21:30)
webpack built faabfd532de4c5a09a71 in 5350ms
13

I remember electron-main for electron main process code and electron-render for render process code.
Sorry, I have no idea about this error now.

15

With this webpack configuration:

/tools/webpack/webpack.main.js :

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  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'),
  },
  // https://github.com/electron/electron/issues/9920
  //target: 'electron-renderer'
  target: 'electron-main'
};

/tools/webpack/webpack.renderer.js :

/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require(’./webpack.rules’);
const plugins = require(’./webpack.plugins’);
const aliases = require(’./webpack.aliases’);

module.exports = {
  // https://github.com/electron/electron/issues/9920
  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,
    },
  },
};

the import in main.ts works fine:

import Ipfs from 'ipfs';
import IpfsHttpClient from 'ipfs-http-client';

But when I add this line:

const { globSource } = IpfsHttpClient;

I get this error:

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Module build failed (from ./node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js):
SyntaxError: Unexpected token (85:14)
    at Object.module.exports.pp$4.raise (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20834:13)
    at Object.module.exports.pp.unexpected (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:18680:8)
    at Object.module.exports.pp$1.parseTryStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:19069:49)
    at Object.module.exports.pp$1.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:18834:32)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules/@marshallofsound
/webpack-asset-relocator-loader/dist/index.js:4539:118)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules/@marshallofsound
/webpack-asset-relocator-loader/dist/index.js:42314:22)
    at Object.module.exports.pp$1.parseBlock (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:19157:23)
    at Object.module.exports.pp$1.parseTryStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:19073:24)
    at Object.module.exports.pp$1.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:18834:32)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules/@marshallofsound
/webpack-asset-relocator-loader/dist/index.js:4539:118)
    at Object.parseStatement (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules/@marshallofsound
/webpack-asset-relocator-loader/dist/index.js:42314:22)
    at Object.module.exports.pp$1.parseBlock (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:19157:23)
    at Object.module.exports.pp$3.parseFunctionBody (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20675:22)
    at Object.module.exports.pp$3.parseArrowExpression (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20638:8)
    at Object.module.exports.pp$3.parseExprAtom (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules
/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20227:21)
    at Object.parseExprAtom (/home/marco/webMatters/electronMatters/IpfsPlaying/node_modules/@marshallofsound
/webpack-asset-relocator-loader/dist/index.js:4551:117)
    at Object../node_modules/fs-extra/lib/mkdirs/make-dir.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
 /main/index.js:13240:7)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
    at Object../node_modules/fs-extra/lib/mkdirs/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:13217:44)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
    at Object../node_modules/fs-extra/lib/copy-sync/copy-sync.js (/home/marco/webMatters/electronMatters/IpfsPlaying
/.webpack/main/index.js:12155:20)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)
    at Object../node_modules/fs-extra/lib/copy-sync/index.js (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack
/main/index.js:12332:13)
    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:13083:6)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/IpfsPlaying/.webpack/main/index.js:21:30)

Anyway… thank you very much for your kind help.
I’m going to try to solve the issue