3

In a Electron-Typescript-React-Webpack app I'm having this strange issue, and I guess it's something related to webpack configuration, since it appeared after working on it to solve another problem.

(base) marco@pc01:~/webMatters/electronMatters/Raphy-Template$ yarn start
yarn run v1.22.5
$ electron ./dist/main.bundle.js
Error: No native build was found for platform=linux arch=x64 runtime=electron abi=85 uv=1 
libc=glibc
    at Function.load.path (/home/marco/webMatters/electronMatters/Raphy-Template
/dist/main.bundle.js:131277:9)
    at load (/home/marco/webMatters/electronMatters/Raphy-Template
/dist/main.bundle.js:131241:30)
    at Object../node_modules/leveldown/binding.js (/home/marco/webMatters/electronMatters
/Raphy-Template/dist/main.bundle.js:130950:124)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/Raphy-Template
/dist/main.bundle.js:245825:42)
    at Object../node_modules/leveldown/leveldown.js (/home/marco/webMatters/electronMatters
/Raphy-Template/dist/main.bundle.js:131061:17)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/Raphy-Template
/dist/main.bundle.js:245825:42)
    at Object../node_modules/level/level.js (/home/marco/webMatters/electronMatters/Raphy-
Template/dist/main.bundle.js:130939:111)
    at __webpack_require__ (/home/marco/webMatters/electronMatters/Raphy-Template
/dist/main.bundle.js:245825:42)
    at new LevelDatastore (/home/marco/webMatters/electronMatters/Raphy-Template
/dist/main.bundle.js:62289:23)
    at Object.createBackend [as create] (/home/marco/webMatters/electronMatters/Raphy-
Template/dist/main.bundle.js:111636:10)

package.json :

"main": "./dist/main.bundle.js",
"private": true,
"scripts": {
  "babel": "babel ./src/**/* -d dist",
  "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
  "lint:fix": "yarn run lint -- --fix",
  "dev": "rimraf ./dist && cross-env NODE_ENV=development webpack --config 
    ./webpack.config.js --watch --progress --color",
  "prod": "rimraf ./dist && cross-env NODE_ENV=production webpack --config 
    ./webpack.config.js --progress --color",
  "start": "electron ./dist/main.bundle.js",
  "package": "rm -rf dist && yarn build && electron-builder build --publish never",
  "clean": "rimraf ./dist",
  "postinstall": "yarn electron-rebuild",
  "check-type": "tsc -w"
},

The webpack compilation seems went fine:

(base) marco@pc01:~/webMatters/electronMatters/Raphy-Template$ yarn dev
yarn run v1.22.5
$ rimraf ./dist && cross-env NODE_ENV=development webpack --config ./webpack.config.js 
--watch --progress --color
asset renderer.bundle.js 1020 bytes [emitted] (name: main) 1 related asset
asset index.html 274 bytes [emitted]
runtime modules 274 bytes 1 module
./src/renderer/index.js 28 bytes [built] [code generated]
webpack 5.22.0 compiled successfully in 118 ms

This is the entire webpack.config.js :

const lodash = require('lodash');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

function srcPaths(src) {
  return path.join(__dirname, src);
}

const isEnvProduction = process.env.NODE_ENV === 'production';
const isEnvDevelopment = process.env.NODE_ENV === 'development';

// #region Common settings
const commonConfig = {
  devtool: isEnvDevelopment ? 'source-map' : false,
  mode: isEnvProduction ? 'production' : 'development',
  output: { path: srcPaths('dist') },
  node: { __dirname: false, __filename: false },
  resolve: {
    alias: {
      _: srcPaths('src'),
      _main: srcPaths('src/main'),
      _models: srcPaths('src/models'),
      _public: srcPaths('public'),
      _renderer: srcPaths('src/renderer'),
      _cpp: srcPaths('src/cpp'),
      _python: srcPaths('src/python'),
    },
    extensions: ['.js', '.json', '.ts', '.tsx', '.cpp', '.c', '.py'],
  },
  externals: [/node_modules/, 'bufferutil', 'utf-8-validate'],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
      },
      {
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(jpg|png|svg|ico|icns)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
};
// #endregion

const mainConfig = lodash.cloneDeep(commonConfig);
mainConfig.entry = './src/main/main.ts';
mainConfig.target = 'electron-main';
mainConfig.output.filename = 'main.bundle.js';
mainConfig.plugins = [
  new CopyPlugin({
    patterns: [
      {
        from: 'package.json',
        to: 'package.json',
        transform: (content, _path) => { // eslint-disable-line no-unused-vars
          const jsonContent = JSON.parse(content);

          delete jsonContent.devDependencies;
          delete jsonContent.scripts;
          delete jsonContent.build;

          jsonContent.main = './main.bundle.js';
          jsonContent.scripts = { start: 'electron ./main.bundle.js' };
          jsonContent.postinstall = 'electron-builder install-app-deps';

          return JSON.stringify(jsonContent, undefined, 2);
        },
      },
    ],
  }),
];

const rendererConfig = lodash.cloneDeep(commonConfig);
rendererConfig.entry = './src/renderer/index.js';
rendererConfig.target = 'electron-renderer';
rendererConfig.output.filename = 'renderer.bundle.js';
rendererConfig.plugins = [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, './public/index.html'),
  }),
];

module.exports = [mainConfig, rendererConfig];

What is wrong with my webpack configuration? Looking forward to your kind suggestions and help.

devDependencies:

"electron": "^11.2.3",
"typescript": "^4.1.5",
"webpack": "^5.21.2",
  • node : v14.5.0
  • O.S. : Ubuntu 18.04.4 Desktop
Raphael10
  • 2,508
  • 7
  • 22
  • 50

0 Answers0