roccoc / webpack-build-notifier Goto Github PK
View Code? Open in Web Editor NEWA Webpack plugin that generates OS notifications for build steps using node-notifier.
License: MIT License
A Webpack plugin that generates OS notifications for build steps using node-notifier.
License: MIT License
I'm not sure why it's not working @RoccoC... Apple Silicon ? Big Sur ? Wenbpack 5 ? All of them...
When an error is too long it causes Webpack to exit with:
Error: spawn ENAMETOOLONG
It would be good to have a max length of the raw output (and truncate it) or even better options for a custom message for warning and error as having the raw output in the error isn't too helpful anyway.
I'm currently using iTerm2 rather than terminal and both the activateTerminalOnError
and onClick
opens a new Terminal (not ideal).
So two questions:
I'm new to this plugin. I installed it, added it to my webpack.config.js but after build nothing happened. I'm aware that Big Sur broke some things. It this one of them? Can someone confirm it's (not) working on Big Sur? Thank you.
When you have multiple screen connected and you are mirroring the screen, notifier doesn't work
Using Webpack with Typescript via ts-loader, in watch mode, the build completes successfully and I get a notification. But the type-checker runs after emit, so I still have to check the console to see if there were any type errors. In normal mode this causes the build to exit with an error code, but in watch mode it continues, so no notification, just console messages.
Mac OS Sierra 10.12.6
Webpack 1.13.2
When building the project - get the following error
(everything was building fine - and using notifications v0.1.14 in the project)
Also project builds fine if I remove the Notifier plugin from webpack config......
internal/child_process.js:319
throw errnoException(err, 'spawn');
^
Error: spawn EACCES
at exports._errnoException (util.js:1018:11)
at ChildProcess.spawn (internal/child_process.js:319:11)
at exports.spawn (child_process.js:378:9)
at Object.exports.execFile (child_process.js:143:15)
at Object.module.exports.fileCommand (/Users/Projects/contact/node_modules/node-notifier/lib/utils.js:53:13)
at NotificationCenter.notify (/Users/Projects/contact/node_modules/node-notifier/notifiers/notificationcenter.js:66:11)
at WebpackBuildNotifierPlugin.onCompilationDone (/Users/Projects/contact/node_modules/webpack-build-notifier/index.js:152:18)
at Compiler.applyPlugins (/Users/Projects/contact/node_modules/tapable/lib/Tapable.js:26:37)
at Watching._done (/Users/Projects/contact/node_modules/webpack/lib/Compiler.js:78:17)
at Watching.<anonymous> npm ERR! code ELIFECYCLE
Is there a way to allow webpack to still finish processing and exiting out of the build after the notification has appeared? As long as the notification is on the screen, webpack won't complete the process.
Hi,
after updating my macbook to High Sierra 10.13.4 (from 10.13.3) and upgrading to command line tools 9.3 (from 9.2) I don't get any notifications anymore - no sound and no notice (in the right top corner of the screen). Yesterday (before upgrading) it worked fine and I didn't install anything else. I get no error message in terminal and changes I make in the code are processed by webpack.
Any ideas what to do about this?
I don't have a minimal repro config at the moment, but it seems like when compiling a Webpack config file from TS to JS* using tsc --build
, the following errors appear:
node_modules/webpack-build-notifier/dist/types.d.ts:59:44 - error TS2724: 'exports' has no exported member named 'compiler'. Did you mean 'Compiler'?
59 onCompileStart?: (compilation: webpack.compiler.Compiler) => void;
~~~~~~~~
node_modules/webpack-build-notifier/dist/types.d.ts:65:40 - error TS2724: 'exports' has no exported member named 'compilation'. Did you mean 'Compilation'?
65 onComplete?: (compilation: webpack.compilation.Compilation, status: CompilationStatus) => void;
I also had to install @types/node-notifier
on my repo to silence a few errors (I'm happy to post them as well), which is super weird, but at least it was easy to fix.
Is there any workaround I could use?
Versions:
* Context is that we have a shared Webpack config for all our repositories, that we write in TypeScript, then compile into a regular JS package.
An idea for enhancement: optionally showing build duration (from compilation start to end)
As you can read in this issue on webpack from me, webpack takes way to long to finish. We figured out that it is this plugin and the success message that causes the delay. I have seen that in #28 there was already something like that but that didn't help me.
Some other plugins can create child compilers (for example extract-css-chunks-webpack-plugin) which will lead to a crash with errors like this
TypeError: Cannot read property 'module' of undefined
at WebpackBuildNotifierPlugin.onCompilationDone
if that child compiler has errors or warnings
This is happening due to the code inside webpack.Stats.hasErrors which checks errors also inside child compilers.
To fix the issue we need to extract errors and warnings also from child compilers if there are no errors in the current one.
Setting sound to false doesn't prevent sounds from playing. It only works if I set the specific sound options (successSound etc) to false.
I am using macOS 10.15.2 and webpack-build-notifier 2.0.0.
The onClick config option is not working, it does nothing even with default setting which is supposed to open the Terminal app. Playing around with shelljs and child_process exec
didn't work either.
If you could verify that it's working and then also provide an implementation code example in the README, for example to run command open http://localhost:8080/
which would open the localhost in browser. Thanks!
When running webpack with ts-node (webpack.config.ts) I get this error:
new BuildNotifier({
^
TypeError: webpack_build_notifier_1.WebpackBuildNotifierPlugin is not a constructor
In a basic JS node application everything seems fine. Maybe this is because webpack-build-notifier
in not a class?
I import it with import { WebpackBuildNotifierPlugin as BuildNotifier } from 'webpack-build-notifier'
.
If it is because it is not a class, it would be great if someone would rewrite it to a class.
Here is an example of a good TypeScript written webpack plugin: https://github.com/johnagan/clean-webpack-plugin/blob/master/src/clean-webpack-plugin.ts
I noticed I'm still getting notifications for warnings that're being filtered by webpack's ignoreWarnings
field. ๐ค
This has been working great for a while, but now getting this:
using electron-webpack, all packages are updated
Error: spawn ENAMETOOLONG
at _errnoException (util.js:1024:11)
at ChildProcess.spawn (internal/child_process.js:323:11)
at exports.spawn (child_process.js:502:9)
at Object.exports.execFile (child_process.js:212:15)
at Object.module.exports.fileCommand (f:\Github\eth-client\node_modules\node-notifier\lib\utils.js:53:13)
at WindowsToaster.notify (f:\Github\eth-client\node_modules\node-notifier\notifiers\toaster.js:65:9)
at WebpackBuildNotifierPlugin.onCompilationDone (f:\Github\eth-client\node_modules\webpack-build-notifier\index.js:172:18)
at Compiler.applyPlugins (f:\Github\eth-client\node_modules\tapable\lib\Tapable.js:61:14)
at Watching._done (f:\Github\eth-client\node_modules\webpack\lib\Compiler.js:104:17)
at onCompiled (f:\Github\eth-client\node_modules\webpack\lib\Compiler.js:54:18)
at applyPluginsAsync.err (f:\Github\eth-client\node_modules\webpack\lib\Compiler.js:514:14)
at next (f:\Github\eth-client\node_modules\tapable\lib\Tapable.js:202:11)
at Compiler. (f:\Github\eth-client\node_modules\webpack\lib\CachePlugin.js:78:5)
at Compiler.applyPluginsAsyncSeries (f:\Github\eth-client\node_modules\tapable\lib\Tapable.js:206:13)
at compilation.seal.err (f:\Github\eth-client\node_modules\webpack\lib\Compiler.js:511:11)
at Compilation.applyPluginsAsyncSeries (f:\Github\eth-client\node_modules\tapable\lib\Tapable.js:195:46)
at self.applyPluginsAsync.err (f:\Github\eth-client\node_modules\webpack\lib\Compilation.js:680:19)
at Compilation.applyPluginsAsyncSeries (f:\Github\eth-client\node_modules\tapable\lib\Tapable.js:195:46)
at self.applyPluginsAsync.err (f:\Github\eth-client\node_modules\webpack\lib\Compilation.js:671:11)
at Compilation.applyPluginsAsyncSeries (f:\Github\eth-client\node_modules\tapable\lib\Tapable.js:195:46)
at self.applyPluginsAsync.err (f:\Github\eth-client\node_modules\webpack\lib\Compilation.js:666:10)
at next (f:\Github\eth-client\node_modules\tapable\lib\Tapable.js:202:11)
It would be great to get notifications of hot reload successes and failures. The motivation for this is that I find that I sometimes require a full reload, but that's not always immediately obvious.
Why do I need to handle onClick by myself? In the docs it says "by default" so I guess this should be optional:
Argument of type '{ title: string; }' is not assignable to parameter of type 'WebpackBuildNotifierConfig'.
Property 'onClick' is missing in type '{ title: string; }' but required in type 'WebpackBuildNotifierConfig'.
see: index.d.ts#L96
After upgrading to sierra, I re-installed the plugin to make sure it builds correctly. Still though, I get no notifications. The terminal activation option ( on error ) works though. How can I provide you with more information for this issue?
Thanks ๐
Can we bump the npm version number by 0.0.1 in package.json to make sure that we get the version with the configurable warning sound, when we install.
This code that is actually pulled from npm for '0.1.13' is this:
this.sound = cfg.hasOwnProperty('sound') ? cfg.sound : 'Submarine';
this.successSound = cfg.hasOwnProperty('successSound') ? cfg.successSound : this.sound;
this.failureSound = cfg.hasOwnProperty('failureSound') ? cfg.failureSound : this.sound;
this.suppressSuccess = cfg.suppressSuccess || false;
but was expecting the additional code to be included (as per gitHub)
https://github.com/RoccoC/webpack-build-notifier/blob/master/index.js
this.sound = cfg.hasOwnProperty('sound') ? cfg.sound : 'Submarine';
this.successSound = cfg.hasOwnProperty('successSound') ? cfg.successSound : this.sound;
this.warningSound = cfg.hasOwnProperty('warningSound') ? cfg.warningSound : this.sound;
this.failureSound = cfg.hasOwnProperty('failureSound') ? cfg.failureSound : this.sound;
this.suppressSuccess = cfg.suppressSuccess || false;
The comments in each code section have been removed for brevity ...
Passing false for sound will play the Submarine sound.
What about a type definition for webpack-build-notifier
? I would like to discuss if this makes sense for you. I'm using webpack with TypeScript and this would prevent me from creating a global.d.ts file with just declare module 'webpack-build-notifier'
and helps me with typings.
Sometimes when running with webpack a build will happen several times, when using webpack --watch --watch-poll
. Is there a way to force this plugin to only give 1 notification until only a file change makes a build again?
This can be implemented in the webpack config, but I wonder if there can be a shared ENV that disables the notifier without having to add more project-specific configuration and documentation. e.g.
WEBPACK_NOTIFY=false webpack --mode production
Hi,
Node notifications are displayed by default for 5s long seconds and that can be annoying.
It seems that node notifier have a timeout option to change that.
It could be nice to be able to access this settings from your plugin.
Cheers
Hello,
Thank you for this package. Would it be possible to make the new note-notifier options configurable from this package ?
// New in latest version. See example/macInput.js
for usage
timeout: 5, // Takes precedence over wait if both are defined.
closeLabel: void 0, // String. Label for cancel button
actions: void 0, // String | Array. Action label or list of labels in case of dropdown
dropdownLabel: void 0, // String. Label to be used if multiple actions
reply: false // Boolean. If notification should take input. Value passed as third argument in callback and event emitter.
notifier.on('timeout', function(notifierObject, options) {
// Triggers if wait: true
and notification closes
});
An idea, perhaps merge the user configuration with the defaults so that in the future we can pass any new options without the need for a new release. Something like Object.assign({}, defaultConfig, userConfig);
The 'compileStart' notification has a sound even if the sound
option is set to false
.
It seems it is not affected by the sound
option in general, and it has no option on its own.
After an update to Windows 10 1903, notifications stopped popping up. They do show up as notifications in the notification area after a reboot. Any ideas?
I get the following error when webpack starts up related to the build notifier. Everything still ends up working but it throws the error at the beginning.
An error occurred while attempting to install the SnoreToast AppID! { Error: Command failed: C:\myProject\node_modules\node-notifier\vendor\snoreToast\SnoreToast.exe -appID Snore.DesktopToasts -install SnoreToast.lnk C:\myProject\node_modules\node-notifier\vendor\snoreToast\SnoreToast.exe Snore.DesktopToasts
at checkExecSyncError (child_process.js:596:11)
at Object.execFileSync (child_process.js:614:13)
at Object.<anonymous> (C:\myProject\node_modules\webpack-build-notifier\index.js:21:12)
at Module._compile (C:\myProject\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (C:\myProject\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\myProject\webpack.config.js:4:36)
at Module._compile (C:\myProject\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
at Function.Module._load (internal/modules/cjs/loader.js:520:3)
at Module.require (internal/modules/cjs/loader.js:626:17)
at require (C:\myProject\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (C:\myProject\node_modules\webpack-cli\bin\convert-argv.js:133:13)
at requireConfig (C:\myProject\node_modules\webpack-cli\bin\convert-argv.js:135:6)
at C:\myProject\node_modules\webpack-cli\bin\convert-argv.js:142:17
at Array.forEach (<anonymous>)
at module.exports (C:\myProject\node_modules\webpack-cli\bin\convert-argv.js:140:15)
at yargs.parse (C:\myProject\node_modules\webpack-cli\bin\webpack.js:240:39)
at Object.parse (C:\myProject\node_modules\webpack-cli\node_modules\yargs\yargs.js:552:18)
at C:\myProject\node_modules\webpack-cli\bin\webpack.js:218:8
at Object.<anonymous> (C:\myProject\node_modules\webpack-cli\bin\webpack.js:515:3)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
at Module.load (internal/modules/cjs/loader.js:589:32)
At present this project has no unit tests or continuous integration checks. Would be nice to add some!
This might just be a configuration issue, but my success messages don't go away, but might error messages timeout after 5 seconds and then go away.
I am on Mac 10.14.2
I am looking actually to reverse this. I would like Errors to stay on until I click close or dismiss. I have my mac notification settings to set the Terminal Notifications to Alerts, which should make them stay on until clicked.
I did add the notifyOptions with timeout to 20 and that did work, but setting it to 0 does not. So I guess I am left with setting it to a very high number, but I would rather just disable. However, I would like success to timeout after 5. I don't see a way to separate them with notifyOptions.
Does anyone know how to achieve this.
Thanks
Hi @RoccoC !
While upgrading to webpack 4 I noticed this deprecation warning for a while:
(node:8154) DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks'instead
I just update to the new webpack-build-notifier 1.24
and it fixed the deprecation warning ๐ !
Sadly it also introduce a bug... webpack is watching files forever and never serving build assets.
I don't get any error message so it's difficult to give you more information, sorry.
Hero is a screenshot of the console. First run is with webpack-build-notifier 1.23
second run with webpack-build-notifier 1.24
.
From the test I've made the problem come from this part of your code.
Let me know if you need more info...
Thanks for your help!
Cheers
Note that the success notification will always be shown for the first successful compilation or following a failed build regardless of the value of this setting.
I am working to integrate this excellent (because opposite to alternatives, icons are shown correctly) into electron-webpack.
suppressSuccess: true
Use case: run yarn dev
(run webpak-dev-server / webpack in a watch mode).
Expected: no success notification. Expected only if first successful compilation or following a failed build. I don't want to show notification if all is ok (first run). Only errors/warnings make sense.
I'm trying to figure out how/if possible to have
on success: popup, play Submarine sound (the default)
on fail: popup, play Basso sound (errorish beep)
this would also be fine:
on success: popup, silent
on fail: popup, play Basso sound
the thing is i want a popup even on success (to see my tool was run),
so i cant exactly set the Basso sound and alwaysNotify: false
any ideas?
Hello!
First thank you so much for this very nice plugin, I love it !
I have a feature request to improve the experience while building.
It could be nice to have a notification on save as build process just start.
This feedback should give a nice responsiveness feeling but also would informe user about a potential problem.
Also a switch to activate this feature or not should be create.
And you could even add a new icon, maybe something like this:
What do you think about this ? ๐
I am not sure if this is your error, or some other outside configuration.
Building [=================== ] 95% (9.5 seconds)/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack-build-notifier/index.js:111
msg = error.module.rawRequest + '\n' + error.error.replace(error.module.resource, '');
^
TypeError: error.error.replace is not a function
at WebpackBuildNotifierPlugin.onCompilationDone (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack-build-notifier/index.js:111:60)
at Compiler.applyPlugins (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/tapable/lib/Tapable.js:26:37)
at Compiler.<anonymous> (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack/lib/Compiler.js:193:12)
at Compiler.emitRecords (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack/lib/Compiler.js:282:37)
at Compiler.<anonymous> (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack/lib/Compiler.js:187:11)
at /Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack/lib/Compiler.js:275:11
at Compiler.next (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/tapable/lib/Tapable.js:67:11)
at Compiler.<anonymous> (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/copy-webpack-plugin/dist/index.js:190:13)
at Compiler.applyPluginsAsync (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/tapable/lib/Tapable.js:71:13)
at Compiler.afterEmit (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack/lib/Compiler.js:272:8)
at Compiler.<anonymous> (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/webpack/lib/Compiler.js:267:14)
at /Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/async/lib/async.js:52:16
at done (/Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/async/lib/async.js:246:17)
at /Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/async/lib/async.js:44:16
at /Users/mikee/Documents/Projects/dev/angular/angular-sandbox/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:82:15)
help can't seem to figure out this issue
โ v2 git:(blue/service-fulfillment-file-uploader) npm run webpack --progress --watch --config webpack.config.babel.js
npm ERR! missing script: webpack
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/aupeterson/.npm/_logs/2017-06-18T23_24_20_207Z-debug.log
โ v2 git:(blue/service-fulfillment-file-uploader) webpack --progress --watch --config webpack.config.babel.js
module.js:472
throw err;
^
Error: Cannot find module 'lodash._baseclone'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/aupeterson/Projects/ansible-playbooks/marketplace/git-repos/marketplace/Apps/v2/node_modules/webpack-build-notifier/node_modules/lodash.clonedeep/index.js:9:17)
at Module._compile (module.js:571:32)
at Module._extensions..js (module.js:580:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/aupeterson/Projects/ansible-playbooks/marketplace/git-repos/marketplace/Apps/v2/node_modules/babel-register/lib/node.js:152:7)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.