I used your electron-react-webpack-typescript "template" but I'm having some problems.
/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-main',
node: {
global: true,
__dirname: true,
__filename: true
},
externals: {
"pouchdb": "require('pouchdb')"
}
};
/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,
},
},
};
/tools/webpack/webpack.plugins.js :
// eslint-disable-next-line @typescript-eslint/no-var-requires
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
// https://stackoverflow.com/questions/44008674/how-to-import-the-electron-ipcrenderer-in-
a-react-webpack-2-setup
const webpack = require('webpack');
module.exports = [
new ForkTsCheckerWebpackPlugin(),
new webpack.ExternalsPlugin('commonjs', [
'electron'
]),
new webpack.ExternalsPlugin("commonjs", [
'leveldown'
])
];
/tools/webpack/webpack.rules :
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',
},
},
],
},
];
/tools/webpack/webpack.helpers.js :
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
const path = require('path');
const cwd = process.cwd();
// Creates Webpack Aliases using CWD path
const createWebpackAliases = (als) => {
const result = {};
for (const name in als) {
result[name] = path.join(cwd, als[name]);
}
return result;
};
// Export webpack helpers
module.exports = {
createWebpackAliases,
};
/tools/webpack/webpack.aliases.js :
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { createWebpackAliases } = require('./webpack.helpers');
// Webpack aliases to resolve
const aliases = createWebpackAliases({
'@src': 'src',
'@app': 'src/app',
'@static': 'src/static',
'jsonfile': './node_modules/fs-extra/node_modules/jsonfile',
'nanoid/random': './node_modules/nanoid',
'nanoid/format': './node_modules/nanoid'
//'main' : './.webpack/main'
});
// Export aliases
module.exports = aliases;
This is the /tools/forge/forge.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
// Forge Configuration
const path = require('path');
const rootDir = process.cwd();
module.exports = {
// Packager Config
packagerConfig: {
// Create asar archive for main, renderer process files
asar: true,
},
// Forge Makers
makers: [
{
// Squirrel.Windows is a no-prompt, no-hassle, no-admin method of installing
// Windows applications and is therefore the most user friendly you can get.
name: '@electron-forge/maker-squirrel',
config: {
name: 'electron_react_typescript_webpack_2020',
},
},
{
// The Zip target builds basic .zip files containing your packaged application.
// There are no platform specific dependencies for using this maker and it will run on
any platform.
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
// The deb target builds .deb packages, which are the standard package format for
Debian-based
// Linux distributions such as Ubuntu.
name: '@electron-forge/maker-deb',
config: {},
},
{
// The RPM target builds .rpm files, which is the standard package format for
// RedHat-based Linux distributions such as Fedora.
name: '@electron-forge/maker-rpm',
config: {},
},
],
// Forge Plugins
plugins: [
[
// The Webpack plugin allows you to use standard Webpack tooling to compile both your
main process code
// and your renderer process code, with built in support for Hot Module Reloading in
the renderer
// process and support for multiple renderers.
'@electron-forge/plugin-webpack',
{
// Main process webpack configuration
mainConfig: path.join(rootDir, 'tools/webpack/webpack.main.js'),
// Renderer process webpack configuration
renderer: {
// Configuration file path
config: path.join(rootDir, 'tools/webpack/webpack.renderer.js'),
// Entrypoints of the application
entryPoints: [
{
// React Hot Module Replacement (HMR)
rhmr: 'react-hot-loader/patch',
// HTML index file template
html: path.join(rootDir, 'src/html/index.html'),
// Renderer
js: path.join(rootDir, 'src/renderers/renderer.ts'),
// Main Window
name: 'main_window',
// Preload
preload: {
js: path.join(rootDir, 'src/preload.ts'),
},
},
{
// React Hot Module Replacement (HMR)
rhmr: 'react-hot-loader/patch',
// HTML index file template
html: path.join(rootDir, 'src/html/index_A.html'),
// Renderer
js: path.join(rootDir, 'src/renderers/renderer_A.ts'),
// Main Window
name: 'main_window2',
// Preload
preload: {
js: path.join(rootDir, 'src/preload.ts'),
},
},
{
// React Hot Module Replacement (HMR)
rhmr: 'react-hot-loader/patch',
// HTML index file template
html: path.join(rootDir, 'src/html/index_B.html'),
// Renderer
js: path.join(rootDir, 'src/renderers/renderer_B.ts'),
// Main Window
name: 'main_window3',
// Preload
preload: {
js: path.join(rootDir, 'src/preload.ts'),
},
},
],
},
},
],
],
When running the app I'm getting this error:
TypeError: get is not a function
at getPubsubRouter (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:103294:20)
at getLibp2pOptions (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:103311:15)
at module.exports../node_modules/ipfs-core/src/components/libp2p.js.module.exports
(/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack/main/index.js:103262:25)
at configureRepo (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:107188:18)
at async loadRepo (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:107037:17)
at async Function.start (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:107018:41)
at async Object.create (/home/marco/webMatters/electronMatters/IPFS-Forge/.webpack
/main/index.js:102486:21)
this is the tsconfig.json :
{
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"target": "ES6",
"module": "ESNext",
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": false,
"sourceMap": true,
"baseUrl": ".",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true,
// https://www.typescriptlang.org/tsconfig#suppressExcessPropertyErrors
"suppressExcessPropertyErrors": true,
"paths": {
"*": ["node_modules/*"],
"@app/*": ["./src/app/*"],
"@static/*": ["./src/static/*"],
"@src/*": ["./src/*"]
}
},
"include": ["src/**/*"]
}
This is package.json:
{
"name": "IPFS-Forge",
"description": "IPF-Forge",
"version": "1.0.0",
"main": "./.webpack/main",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --ext .ts ."
},
"config": {
"forge": "./tools/forge/forge.config.js"
},
"devDependencies": {
"@electron-forge/cli": "^6.0.0-beta.54",
"@electron-forge/maker-deb": "^6.0.0-beta.54",
"@electron-forge/maker-rpm": "^6.0.0-beta.54",
"@electron-forge/maker-squirrel": "^6.0.0-beta.54",
"@electron-forge/maker-zip": "^6.0.0-beta.54",
"@electron-forge/plugin-webpack": "^6.0.0-beta.54",
"@types/react": "^17.0.1",
"@types/react-dnd": "^3.0.2",
"@types/react-dnd-html5-backend": "^3.0.2",
"@types/react-dom": "^17.0.0",
"@types/webpack-env": "^1.16.0",
"@typescript-eslint/eslint-plugin": "^4.14.2",
"@typescript-eslint/parser": "^4.14.2",
"copy-webpack-plugin": "^7.0.0",
"cross-env": "^7.0.3",
"electron": "^11.2.2",
"electron-rebuild": "^2.3.4",
"eslint": "^7.19.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react": "^7.22.0",
"fork-ts-checker-webpack-plugin": "^6.1.0",
"ipfs": "^0.54.1",
"less": "^4.1.1",
"node-loader": "^1.0.2",
"react-hot-loader": "^4.13.0",
"test-ipfs-example": "^2.0.3",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"webpack": "4"
},
"greenkeeper": {
"ignore": [
"electron"
]
},
"dependencies": {
"@hot-loader/react-dom": "^17.0.1",
"electron-squirrel-startup": "^1.0.0",
"ipfs-http-client": "^49.0.1",
"ipfs-utils": "^6.0.0",
"react": "^17.0.1",
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3"
}
}
According to ipfs people the problems I'm having are due to the webpack configuration: ipfs/js-ipfs#3531 (comment)
But I do not understand where the problem is.
- node: v14.5.0
- O.S.: Ubuntu 18.04.4 Desktop
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent