npm run build error and solutions

monhly commented 3 years ago

Found an issue or bug with electron-vue? Tell me all about it!

Questions regarding how to use electron or vue are likely to be closed as they are not direct issues with this boilerplate. Please seek solutions from official documentation or their respective communities.

Describe the issue / bug.

# When I run npm run build the system has an error
const tasks = new Listr( ^

SyntaxError: Identifier 'tasks' has already been declared; then I changed the variable name ,but it has another error: const m = new Multispinner(taskss, { ^

ReferenceError: Multispinner is not defined

then i run npm install --save multispinner and reuqire multispinner

then i success,

gigouni commented 3 years ago

I follow your instructions and it works great until I got the error message

Did you get it too @monhly ?

monhly commented 3 years ago

I follow your instructions and it works great until I got the error message

Did you get it too @monhly ?

show me your code ,I didn't encounter this situation. It was a mistake reported in what scenario, a second installation dependency, or the first time I changed the variable

gigouni commented 3 years ago

I didn't change anything except the rename of the tasks variable, the install of the multispinner and its usage though the require

Here the screenshots

Project settings
Installed successfully
Changed the variable, install multispinner dep and add the missing require
Run the build

monhly commented 3 years ago

I didn't change anything except the rename of the tasks variable, the install of the multispinner and its usage though the require

Here the screenshots

Project settings

Installed successfully

Changed the variable, install multispinner dep and add the missing require

Run the build

![Uploading image.png…]()

gigouni commented 3 years ago

Thanks for your help. Unfortunately, it still does not work with the new changes

Same error message

Even with the deleted&reinstalled node_modules

gigouni commented 3 years ago

Did you have any other idea @monhly ? Your help is well appreciated

monhly commented 3 years ago

I can also do this. First, I'll talk about my operation. First, I got the version of node 14.16, and then I used yarn. I don't know if it's the version of node. If not, I'll send you a copy of my package. json file in the company tomorrow. Then you can install it again to see if it's OK.

From: @.> Date: Thu, Jun 3, 2021 21:05 PM To: @.>; Cc: @.**@.>; Subject: Re: [SimulatedGREG/electron-vue] npm run build error and solutions (#1089)

Did you have any other idea @monhly ? Your help is well appreciated

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

monhly commented 3 years ago

Sorry, these are the two files used in my project, I hope to help you

// package.json

{ "name": "yy-music", "version": "0.0.1", "author": "yanghehe 1925659630@qq.com", "description": "An electron-vue project", "license": null, "main": "./dist/electron/main.js", "scripts": { "electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --electron-version=2.0.8 --overwrite", "build": "node .electron-vue/build.js && electron-builder", "build:dir": "node .electron-vue/build.js && electron-builder --dir", "build:win": "node .electron-vue/build.js && electron-builder --win --x64", "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", "mac": "node .electron-vue/build.js && electron-builder --platform=mac", "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": "" }, "build": { "productName": "el_music", "appId": "com.example.yourapp", "directories": { "output": "build" }, "files": [ "dist/electronsu/*/" ], "dmg": { "contents": [{ "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "mac": { "icon": "build/icons/icon.icns" }, "win": { "icon": "build/icons/icon.ico" }, "linux": { "icon": "build/icons" } }, "dependencies": { "axios": "^0.18.0", "dayjs": "^1.9.6", "element-ui": "^2.14.1", "vue": "^2.5.16", "vue-electron": "^1.0.6", "vue-lazyload": "^1.3.3", "vue-router": "^3.0.1", "vuex": "^3.0.1", "vuex-electron": "^1.0.0" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-minify-webpack-plugin": "^0.3.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "babel-register": "^6.26.0", "cfonts": "^2.1.2", "chalk": "^2.4.1", "copy-webpack-plugin": "^4.5.1", "cross-env": "^5.1.6", "css-loader": "^0.28.11", "del": "^3.0.0", "devtron": "^1.4.0", "electron": "^2.0.18", "electron-builder": "^20.19.2", "electron-debug": "^1.5.0", "electron-devtools-installer": "^2.2.4", "electron-packager": "^15.1.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "less": "^3.12.2", "less-loader": "^7.1.0", "mini-css-extract-plugin": "0.4.0", "multispinner": "^0.2.1", "node-loader": "^0.6.0", "sass-resources-loader": "^2.1.1", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "vue-html-loader": "^1.2.4", "vue-loader": "^15.2.4", "vue-style-loader": "^4.1.0", "vue-template-compiler": "^2.5.16", "webpack": "^4.15.1", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4", "webpack-hot-middleware": "^2.22.2", "webpack-merge": "^4.1.3" } }

//build.js

'use strict'

process.env.NODE_ENV = 'production'

const { say } = require('cfonts') const chalk = require('chalk') const del = require('del') const { spawn } = require('child_process') const webpack = require('webpack') const Multispinner = require('multispinner')

const mainConfig = require('./webpack.main.config') const rendererConfig = require('./webpack.renderer.config') const webConfig = require('./webpack.web.config')

const doneLog = chalk.bgGreen.white(' DONE ') + ' ' const errorLog = chalk.bgRed.white(' ERROR ') + ' ' const okayLog = chalk.bgBlue.white(' OKAY ') + ' ' const isCI = process.env.CI || false

if (process.env.BUILD_TARGET === 'clean') clean() else if (process.env.BUILD_TARGET === 'web') web() else build()

function clean() { del.sync(['build/', '!build/icons', '!build/icons/icon.']) console.log(\n${doneLog}\n) process.exit() }

function build() { greeting()

del.sync(['dist/electron/*', '!.gitkeep'])

const taskss = ['main', 'renderer']
const m = new Multispinner(taskss, {
    preText: 'building',
    postText: 'process'
})

let results = ''

m.on('success', () => {
            process.stdout.write('\x1B[2J\x1B[0f')
            console.log(`\n\n${results}`)
            console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
process.exit()

})

pack(mainConfig).then(result => { results += result + '\n\n' m.success('main') }).catch(err => { m.error('main') console.log(\n ${errorLog}failed to build main process) console.error(\n${err}\n) process.exit(1) })

pack(rendererConfig).then(result => { results += result + '\n\n' m.success('renderer') }).catch(err => { m.error('renderer') console.log(\n ${errorLog}failed to build renderer process) console.error(\n${err}\n) process.exit(1) }) }

function pack (config) { return new Promise((resolve, reject) => { config.mode = 'production' webpack(config, (err, stats) => { if (err) reject(err.stack || err) else if (stats.hasErrors()) { let err = ''

    stats.toString({
      chunks: false,
      colors: true
    })
    .split(/\r?\n/)
    .forEach(line => {
      err += `    ${line}\n`
    })

    reject(err)
  } else {
    resolve(stats.toString({
      chunks: false,
      colors: true
    }))
  }
})

}) }

function web () { del.sync(['dist/web/*', '!.gitkeep']) webConfig.mode = 'production' webpack(webConfig, (err, stats) => { if (err || stats.hasErrors()) console.log(err)

console.log(stats.toString({
  chunks: false,
  colors: true
}))

process.exit()

}) }

function greeting () { const cols = process.stdout.columns let text = ''

if (cols > 85) text = 'lets-build' else if (cols > 60) text = 'lets-|build' else text = false

if (text && !isCI) { say(text, { colors: ['yellow'], font: 'simple3d', space: false }) } else console.log(chalk.yellow.bold('\n lets-build')) console.log() }

Did you have any other idea @monhly ? Your help is well appreciated

Sorry, these are the two files used in my project, I hope to help you

// package.json

{ "name": "yy-music", "version": "0.0.1", "author": "yanghehe 1925659630@qq.com", "description": "An electron-vue project", "license": null, "main": "./dist/electron/main.js", "scripts": { "electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --electron-version=2.0.8 --overwrite", "build": "node .electron-vue/build.js && electron-builder", "build:dir": "node .electron-vue/build.js && electron-builder --dir", "build:win": "node .electron-vue/build.js && electron-builder --win --x64", "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", "mac": "node .electron-vue/build.js && electron-builder --platform=mac", "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": "" }, "build": { "productName": "el_music", "appId": "com.example.yourapp", "directories": { "output": "build" }, "files": [ "dist/electronsu/*/" ], "dmg": { "contents": [{ "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "mac": { "icon": "build/icons/icon.icns" }, "win": { "icon": "build/icons/icon.ico" }, "linux": { "icon": "build/icons" } }, "dependencies": { "axios": "^0.18.0", "dayjs": "^1.9.6", "element-ui": "^2.14.1", "vue": "^2.5.16", "vue-electron": "^1.0.6", "vue-lazyload": "^1.3.3", "vue-router": "^3.0.1", "vuex": "^3.0.1", "vuex-electron": "^1.0.0" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-minify-webpack-plugin": "^0.3.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-stage-0": "^6.24.1", "babel-register": "^6.26.0", "cfonts": "^2.1.2", "chalk": "^2.4.1", "copy-webpack-plugin": "^4.5.1", "cross-env": "^5.1.6", "css-loader": "^0.28.11", "del": "^3.0.0", "devtron": "^1.4.0", "electron": "^2.0.18", "electron-builder": "^20.19.2", "electron-debug": "^1.5.0", "electron-devtools-installer": "^2.2.4", "electron-packager": "^15.1.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "less": "^3.12.2", "less-loader": "^7.1.0", "mini-css-extract-plugin": "0.4.0", "multispinner": "^0.2.1", "node-loader": "^0.6.0", "sass-resources-loader": "^2.1.1", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "vue-html-loader": "^1.2.4", "vue-loader": "^15.2.4", "vue-style-loader": "^4.1.0", "vue-template-compiler": "^2.5.16", "webpack": "^4.15.1", "webpack-cli": "^3.0.8", "webpack-dev-server": "^3.1.4", "webpack-hot-middleware": "^2.22.2", "webpack-merge": "^4.1.3" } }

//build.js

'use strict'

process.env.NODE_ENV = 'production'

const { say } = require('cfonts') const chalk = require('chalk') const del = require('del') const { spawn } = require('child_process') const webpack = require('webpack') const Multispinner = require('multispinner')

const mainConfig = require('./webpack.main.config') const rendererConfig = require('./webpack.renderer.config') const webConfig = require('./webpack.web.config')

const doneLog = chalk.bgGreen.white(' DONE ') + ' ' const errorLog = chalk.bgRed.white(' ERROR ') + ' ' const okayLog = chalk.bgBlue.white(' OKAY ') + ' ' const isCI = process.env.CI || false

if (process.env.BUILD_TARGET === 'clean') clean() else if (process.env.BUILD_TARGET === 'web') web() else build()

function clean() { del.sync(['build/', '!build/icons', '!build/icons/icon.']) console.log(\n${doneLog}\n) process.exit() }

function build() { greeting()

del.sync(['dist/electron/*', '!.gitkeep'])

const taskss = ['main', 'renderer']
const m = new Multispinner(taskss, {
    preText: 'building',
    postText: 'process'
})

let results = ''

m.on('success', () => {
            process.stdout.write('\x1B[2J\x1B[0f')
            console.log(`\n\n${results}`)
            console.log(`${okayLog}take it away ${chalk.yellow('`electron-builder`')}\n`)
process.exit()

})

pack(mainConfig).then(result => { results += result + '\n\n' m.success('main') }).catch(err => { m.error('main') console.log(\n ${errorLog}failed to build main process) console.error(\n${err}\n) process.exit(1) })

pack(rendererConfig).then(result => { results += result + '\n\n' m.success('renderer') }).catch(err => { m.error('renderer') console.log(\n ${errorLog}failed to build renderer process) console.error(\n${err}\n) process.exit(1) }) }

function pack (config) { return new Promise((resolve, reject) => { config.mode = 'production' webpack(config, (err, stats) => { if (err) reject(err.stack || err) else if (stats.hasErrors()) { let err = ''

    stats.toString({
      chunks: false,
      colors: true
    })
    .split(/\r?\n/)
    .forEach(line => {
      err += `    ${line}\n`
    })

    reject(err)
  } else {
    resolve(stats.toString({
      chunks: false,
      colors: true
    }))
  }
})

}) }

function web () { del.sync(['dist/web/*', '!.gitkeep']) webConfig.mode = 'production' webpack(webConfig, (err, stats) => { if (err || stats.hasErrors()) console.log(err)

console.log(stats.toString({
  chunks: false,
  colors: true
}))

process.exit()

}) }

function greeting () { const cols = process.stdout.columns let text = ''

if (cols > 85) text = 'lets-build' else if (cols > 60) text = 'lets-|build' else text = false

if (text && !isCI) { say(text, { colors: ['yellow'], font: 'simple3d', space: false }) } else console.log(chalk.yellow.bold('\n lets-build')) console.log() }

siylau commented 3 years ago

I have the same problem. Have you solved it

gigouni commented 3 years ago

I change from node 12 to node 14.17.1 and now it works for the same generated electron-vue project @siylau

monhly commented 3 years ago

sorry now i can't help you

---Original--- From: @.> Date: Fri, Jun 18, 2021 18:44 PM To: @.>; Cc: @.**@.>; Subject: Re: [SimulatedGREG/electron-vue] npm run build error and solutions (#1089)

I change from node 12 to node 14.17.1 and now it works for the same generated electron-vue project @siylau

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

gigouni commented 3 years ago

No problem @monhly, it works now I just change my node+npm versions

himalay34 commented 2 years ago

no need to install multispinner, just comment out the following code in .electron-vue/build.js

 /*const task = ['main', 'renderer']
 const m = new Multispinner(task, {
      preText: 'building',
      postText: 'process'
 })*/

SimulatedGREG / electron-vue

npm run build error and solutions #1089

Found an issue or bug with electron-vue? Tell me all about it!

Describe the issue / bug.