MASSIVELY OUTDATED dependencies

[BananaAcid]

Babel and Electron are ancient.

As of writing, included is Electron 2, but there is Electron is v9+ and latest Babel uses @babel/* packages.

When all is updated to the latest, there is a lot of fixing required. I just did - took me a few hours getting it all together. I used ncu to push it all to the latest.

For everyone reading this: as an example, css backdrop-filter as well as a lot of other things are not usable with the ancient versions.

[BananaAcid]

assets fixed by vuejs/vue-loader#1612 (comment)
tapSync has to become: compilation.compiler.hooks.afterEmit.tapAsync

--

.babelrc

{
  "comments": false,
  "env": {
    "main": {
      "presets": [
        ["@babel/preset-env", {
          "targets": { "node": 8 }
        }]
        //"stage-0"
      ]
    },
    "renderer": {
      "presets": [
        ["@babel/preset-env", {
          "modules": false
        }]
        //"stage-0"
      ]
    },
    "web": {
      "presets": [
        ["@babel/preset-env", {
          "modules": false
        }]
        //"stage-0"
      ]
    }
  },
  "plugins": ["@babel/plugin-transform-runtime"]
}

--

webpack.renderer.config.js (and the other webpack.*.config.js files need to be adjusted as well)

'use strict'

process.env.BABEL_ENV = 'renderer'

const path = require('path')
const { dependencies } = require('../package.json')
const webpack = require('webpack')

const MinifyPlugin = require("babel-minify-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

const pkg = require('../package.json')
const vueVersion = require('vue/package.json').version

/**
 * List of node_modules to include in webpack bundle
 *
 * Required for specific packages like Vue UI libraries
 * that provide pure *.vue files that need compiling
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
 */
let whiteListedModules = ['vue']

let rendererConfig = {
    devtool: '#cheap-module-eval-source-map',
    entry: {
        renderer: path.join(__dirname, '../src/renderer/main.js')
    },
    externals: [
        ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
    ],
    module: {
        rules: [
            /*
            {
              test: /\.(js|vue)$/,
              enforce: 'pre',
              exclude: /node_modules/,
              use: {
                loader: 'eslint-loader',
                options: {
                  formatter: require('eslint-friendly-formatter')
                }
              }
            },*/
            {
                test: /\.scss$/,
                use: ['vue-style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.sass$/,
                use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
            },
            {
                test: /\.less$/,
                use: ['vue-style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.pug$/,
                oneOf: [
                    // this applies to `<template lang="pug">` in Vue components
                    {
                        resourceQuery: /^\?vue/,
                        use: ['@pointotech/pug-plain-loader']
                    },
                    // this applies to pug imports inside JavaScript
                    {
                        use: ['raw-loader', '@pointotech/pug-plain-loader']
                    }
                ]
            },
            {
                test: /\.html$/,
                use: 'vue-html-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.node$/,
                use: 'node-loader'
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader',
                    options: {
                        extractCSS: process.env.NODE_ENV === 'production',
                        loaders: {
                            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
                            scss: 'vue-style-loader!css-loader!sass-loader',
                            less: 'vue-style-loader!css-loader!less-loader'
                        }
                    }
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    query: {
                        limit: 10000,
                        name: 'imgs/[name]--[folder].[ext]',
                        esModule: false
                    }
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'media/[name]--[folder].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: {
                    loader: 'url-loader',
                    query: {
                        limit: 10000,
                        name: 'fonts/[name]--[folder].[ext]'
                    }
                }
            }
        ]
    },
    node: {
        __dirname: process.env.NODE_ENV !== 'production',
        __filename: process.env.NODE_ENV !== 'production'
    },
    plugins: [
        new webpack.DefinePlugin({
            PKG_INFO: {
                appId: JSON.stringify(pkg.build.appId),
                productName: JSON.stringify(pkg.build.productName),
                description: JSON.stringify(pkg.description),
                name: JSON.stringify(pkg.name),
                author: JSON.stringify(pkg.author),
                version: JSON.stringify(pkg.version),
                repository: JSON.stringify(pkg.repository),
                homepage: JSON.stringify(pkg.homepage),
                license: JSON.stringify(pkg.license),

                vueVersion: JSON.stringify(vueVersion),
            }
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({ filename: 'styles.css' }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '../src/index.ejs'),
            templateParameters(compilation, assets, options) {
                return {
                    compilation: compilation,
                    webpack: compilation.getStats().toJson(),
                    webpackConfig: compilation.options,
                    htmlWebpackPlugin: {
                        files: assets,
                        options: options
                    },
                    process,
                };
            },
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true
            },
            nodeModules: process.env.NODE_ENV !== 'production' ?
                path.resolve(__dirname, '../node_modules') : false
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],
    output: {
        filename: '[name].js',
        libraryTarget: 'commonjs2',
        path: path.join(__dirname, '../dist/electron')
    },
    resolve: {
        alias: {
            '@': path.join(__dirname, '../src/renderer'),
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.vue', '.json', '.css', '.node']
    },
    target: 'electron-renderer'
}

/**
 * Adjust rendererConfig for development settings
 */
if (process.env.NODE_ENV !== 'production') {
    rendererConfig.plugins.push(
        new webpack.DefinePlugin({
            '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
        })
    )
}

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === 'production') {
    rendererConfig.devtool = ''

    rendererConfig.plugins.push(
        new MinifyPlugin(),
        new CopyWebpackPlugin({
            patterns: [{
                from: path.join(__dirname, '../static'),
                to: path.join(__dirname, '../dist/electron/static'),
                globOptions: { ignore: ['.*'] }
            }]
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    )
}

module.exports = rendererConfig

--

package.json

• important: osx:fix ( needs to changed to the productName ), gatekeeper and dependencies, dmg.contents needs some position fixing

{
    "name": "somename",
    "version": "0.0.1",
    "author": "Nabil Redmann <>",
    "description": "undefined",
    "license": null,
    "main": "./dist/electron/main.js",
    "scripts": {
        "osx:fix": "xattr -cr ./build/mac/somename.app",
        "build": "node .electron-vue/build.js && electron-builder",
        "build:dir": "node .electron-vue/build.js && electron-builder --dir",
        "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
        "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
        "dev": "node .electron-vue/dev-runner.js",
        "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
        "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
        "pack": "npm run pack:main && npm run pack:renderer",
        "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
        "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
        "postinstall": "# npm run lint:fix"
    },
    "build": {
        "productName": "somename",
        "appId": "com.domain.name",
        "directories": {
            "output": "build"
        },
        "files": [
            "dist/electron/**/*"
        ],
        "dmg": {
            "contents": [{
                    "x": 410,
                    "y": 150,
                    "type": "link",
                    "path": "/Applications"
                },
                {
                    "x": 130,
                    "y": 150,
                    "type": "file"
                }
            ]
        },
        "mac": {
            "category": "public.app-category.productivity",
            "hardenedRuntime": true,
            "gatekeeperAssess": false,
            "icon": "build/icons/icon.icns"
        },
        "win": {
            "icon": "build/icons/icon.ico"
        },
        "linux": {
            "icon": "build/icons"
        }
    },
    "dependencies": {
        "axios": "^0.19.2",
        "electron-root-path": "^1.0.16",
        "pug": "^3.0.0",
        "vue": "^2.6.11",
        "vue-electron": "^1.0.6",
        "vue-router": "^3.3.4",
        "vuex": "^3.4.0",
        "vuex-electron": "^1.0.3"
    },
    "devDependencies": {
        "@babel/core": "^7.10.3",
        "@babel/plugin-transform-runtime": "^7.10.3",
        "@babel/preset-env": "^7.10.3",
        "@babel/register": "^7.10.3",
        "@pointotech/pug-plain-loader": "^1.0.1",
        "ajv": "^6.12.2",
        "babel-loader": "^8.1.0",
        "babel-minify-webpack-plugin": "^0.3.1",
        "cfonts": "^2.8.5",
        "chalk": "^4.1.0",
        "copy-webpack-plugin": "^6.0.2",
        "cross-env": "^7.0.2",
        "css-loader": "^3.6.0",
        "del": "^5.1.0",
        "devtron": "^1.4.0",
        "electron": "^9.0.4",
        "electron-builder": "^22.7.0",
        "electron-debug": "^3.1.0",
        "electron-devtools-installer": "^3.0.0",
        "electron-rebuild": "^1.11.0",
        "eslint": "^7.3.0",
        "eslint-config-standard": "^14.1.1",
        "eslint-friendly-formatter": "^4.0.1",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-html": "^6.0.2",
        "eslint-plugin-import": "^2.21.2",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-standard": "^4.0.1",
        "file-loader": "^6.0.0",
        "html-webpack-plugin": "^4.3.0",
        "less": "^3.11.3",
        "less-loader": "^6.1.1",
        "mini-css-extract-plugin": "0.9.0",
        "multispinner": "^0.2.1",
        "node-loader": "^0.6.0",
        "node-sass": "^4.14.1",
        "sass-loader": "^8.0.2",
        "style-loader": "^1.2.1",
        "url-loader": "^4.1.0",
        "vue-html-loader": "^1.2.4",
        "vue-loader": "^15.9.2",
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0",
        "webpack-hot-middleware": "^2.25.0",
        "webpack-merge": "^4.2.2"
    }
}

--

... I might have missed to add some files here.

[KirksFletcher]

Your webpack.renderer.config.js has some erronious /* commenting, can you correct please?

[BananaAcid]

I added some backticks - i hope it will be more readable that way. It works for me as is. Feel free to optimize.

[swinm]

attention