Use NodeJS's process in Vue CLI project - node.js

I have a challenge using the Node's process.on function in the Vue CLI project's main.js file.
I have the following code in the file.
process.on("unhandledRejection", function(reason, promise){
console.log("Unhandled", reason, promise); // log all your errors, "unsuppressing" them.
throw reason; // optional, in case you want to treat these as errors
});
The project builds but when the app is opened on the browser, I get an error:
Uncaught TypeError: process.on is not a function
How do I configure the project so that I can use the Node's process?
Am I not understanding NodeJS in this context?
Is there something I am missing?
Any assistance is appreciated thanks.

Related

#loadable/server pass the whole stats JSON to eval('require')(modulePath)

I'm trying to setup SSR for react app with #loadable/components. I setup all based on docs with babel and webpack plugins. When I try to run node server.js it runs ok but when I open a browser and throws the following error (into node console):
TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Object
at validateString (internal/validators.js:118:11)
at Module.require (internal/modules/cjs/loader.js:1033:3)
at require (internal/modules/cjs/helpers.js:72:18)
at smartRequire (/Users/max/Documents/repos/app/node_modules/#loadable/server/lib/util.js:44:25)
at new ChunkExtractor (/Users/max/Documents/repos/app/node_modules/#loadable/server/lib/ChunkExtractor.js:181:50)
at renderer (webpack://app/./node_modules/#MYSCOPE/elm/dist/elm.esm.js?:3619:19)
at eval (webpack://app/./src/server.tsx?:64:90)
at processTicksAndRejections (internal/process/task_queues.js:97:5) {
code: 'ERR_INVALID_ARG_TYPE'
}
As you can see there is #MYSCOPE in the traceback which holds some of my internal packages (if it matters).
#loadable/server/lib/util.js is the following function:
And when I try to console.log(modulePath) on line 42 I see a whole stats JSON output which seems wrong and I should get a single module path (as I understand).
Any help?
I can share some specific parts of my configuration files if needed. Because I see my own package in console output seems like something is wrong with it's build (it works perfectly on the client-side with cjs build), but having full stats object as module path is very confusing.
UPD: Demo https://www.dropbox.com/s/9r947cgg4qvqbu4/loadable-test.zip?dl=0
Run
yarn
yarn dev:server
# go to localhost:3000 and see the error in console
to rebuild:
yarn
yarn dev:build-client
yarn dev:build-server
yarn dev:server # go to localhost:3000
The statsFile option passed to ChunkExtractor expects a path to the loadable-stats.json file, not the actual JSON content of it. By doing require('../loadable-stats.json'), webpack actually resolve the JSON during build time and assign it to the loadableJson variable.
You can change your loadableJson as follow:
import path from 'path';
const loadableJson = path.resolve(__dirname, '../bundle_client/loadable-stats.json');
This will solve the problem you had on your question. But, if you only do this, you will notice that you have another problem. Loadable by default assumes that your entry chunk name is main. This is not the case in your demo, as you have set the entry chunk name to be app instead.
entry: {
app: ['#babel/polyfill', './src/index.tsx']
},
To solve this, simply tell loadable about your entrypoints names by passing an array to the ChunkExtractor contructor as such:
const extractor = new ChunkExtractor({
statsFile: loadableJson,
entrypoints: ["app"], // name of your entry chunk
});
That's it, everything should now be working properly!
If it helps, I set up the demo on GitHub so you can easily see the changes I made here.

Browserify / Electron / AngularJS Error: fs.existsSync is not a function

I'm getting a Error: fs.existsSync is not a function code after I bundle my code using Browserify.
Before I've tried to use require() but I kept getting Error: require is not defined due to require function not supported on client side. Browserify seems a solution to use. I've managed to solve require error with browserify but another one came up - fs.existsSync is not a function.
Here is the error code as shown on my console:
Error: fs.existsSync is not a function
[159]</</sqlite.prototype.connect#http://127.0.0.1:8080/services/bundle.js:169566:35
[160]</<#http://127.0.0.1:8080/services/bundle.js:169992:29
invoke#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4718:19
enforcedReturnValue#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4557:37
invoke#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4718:19
createInjector/protoInstanceInjector<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4517:37
getService#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4664:39
injectionArgs#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4688:58
instantiate#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4730:18
$controller#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:10369:28
compile/<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:4081:28
bind/<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:1247:18
invokeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:9934:9
nodeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:9335:11
compositeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8620:13
publicLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8500:30
lazyCompilation#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8844:25
updateView#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:4021:23
compile/</<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:3959:11
$broadcast#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:18005:28
transitionTo/$state.transition<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:3352:22
processQueue#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:16383:28
scheduleProcessQueue/<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:16399:27
$eval#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17682:28
$digest#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17495:31
$apply#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17790:24
done#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:11831:47
completeRequest#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:12033:7
requestLoaded#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:11966:9
<div ui-view="" class="ng-scope">
I'm using electron, angularjs and sqlite to build my app but I'm stuck on this error, any help will be appreciated.
I've managed to solve my error without browserify by enabling nodeIntegration: true in main.js file (electron entry file). Then I was able to load my script (coolscript.js) which has require function inside of it to my html without problems -
<script>
require('coolscript.js')
</script>

Catch errors coming from node module folder

I have node js project which uses mongoose and in mongoose I get the error "Unknown modifier $pushAll" which I saw whats all about it is just about versions in mongoose. I don't have any control over this file in node_modules and we have made it to work despite this error.
My problem is that it always gives UnhandledPromiseException to the console and log files which is annnoying.
My question is - How can I prevent a file,function, module or whatever exicsting in node_modules to write anything in the console? How can I catch the error given in a promise in a file I have no control over?

Catch Errors in Protractor Runner

Is there a way to catch specific errors thrown directly by protractor's runner? For example, one uncaught exception is:
WARNING - pattern /var/www/smoran/repo/app/partials/app/app.controller.e2e.js did not match any files.
[launcher] Process exited with error code 1
/var/www/smoran/repo/node_modules/protractor/node_modules/q/q.js:126
throw e;
^
Error: Spec patterns did not match any files.
at Runner.run (/var/www/smoran/repo/node_modules/protractor/lib/runner.js:249:11)
at TaskRunner.run (/var/www/smoran/repo/node_modules/protractor/lib/taskRunner.js:123:19)
at createNextTaskRunner (/var/www/smoran/repo/node_modules/protractor/lib/launcher.js:220:20)
at /var/www/smoran/repo/node_modules/protractor/lib/launcher.js:243:7
at _fulfilled (/var/www/smoran/repo/node_modules/protractor/node_modules/q/q.js:797:54)
at self.promiseDispatch.done (/var/www/smoran/repo/node_modules/protractor/node_modules/q/q.js:826:30)
at Promise.promise.promiseDispatch (/var/www/smoran/repo/node_modules/protractor/node_modules/q/q.js:759:13)
at /var/www/smoran/repo/node_modules/protractor/node_modules/q/q.js:573:44
at flush (/var/www/smoran/repo/node_modules/protractor/node_modules/q/q.js:108:17)
at process._tickCallback (node.js:419:13)
This error is thrown when protractor can not find any files using the globbing pattern specified or, possibly, when none of the files it finds that do exist can be parsed by jasmine or mocha.
Now, I do not care about the situation that causes this error. I do not care whether protractor can or can not find files with my globbing patterns, and if I do care, I would like to throw my own error(s), as its errors are much too verbose, being in fact uncaught exceptions. Unfortunately, protractor is tripping me up at every turn where I try to do that. It seems to be throwing the error in the runner, then catching it in its dependency, q, then rethrowing it if it is being run under NodeJS (which it is).
I am using gulp, and I am using child_process's spawn to spawn protractor, because all of gulp's protractor plugins seem to be blacklisted or advised not to be used. My code would be too long to show here, but it essentially ends up like this:
gulp.task('protractor', function() {
return spawn('protractor',
[
'--specs=' + notFoundTests
otherArgs
],
{
stdio: 'inherit'
});
});
I have protractor in my PATH, and notFoundTests is a string, not an array. I am using stdio: 'inherit' because I still want to see all the errors & output, but I am trying to find a way to filter it.
No matter what I try to catch, the error seems to not be emitted that way. It seems that it is not emitted as an error, so spawn(...).on('error', function() {}); does not work. Using a try catch block around the call to spawn also does not work. Even using process.on('uncaughtException'); does not catch it, even though it seems to be an uncaught exception.
My question is: How do I catch errors like this, that are thrown by protractor but not really returned? Does protractor provide any hooks, etc.? Also, why is it throwing this particular error? This seems to be an end-developer error, not something that protractor should handle itself.

Difficulty using seperate template files in ember router with browserify

I've followed this tutorial http://kroltech.com/2013/12/boilerplate-web-app-using-backbone-js-expressjs-node-js-mongodb/ to set up my backend node.js server, but instead of using backbone-marionette for the frontend I want to try ember. Therefore, having successfully set up the server, I am now going through this tutorial for ember http://emberjs.com/guides/getting-started/.
The problem I'm running into is including external templates into my ember routes. With this code and the todos template written in the browser the app works fine.
var Ember = require('ember');
window.Todos = Ember.Application.create();
Todos.Router.map(function() {
this.resource('todos', { path: '/' });
});
However, with a template written in ./templates/application.hbs and using browserify to try this,
Todos.Router.map(function() {
this.resource(require('./templates/application.hbs'), { path: '/' });
});
I get the errors shown below.
Uncaught TypeError: undefined is not a function myapp.js:46841
Error: Assertion Failed: The URL '/' did not match any routes in your application
at new Error (native)
at Error.Ember.Error (http://localhost:3300/js/myapp.js:12978:19)
at Object.Ember.assert (http://localhost:3300/js/myapp.js:12141:11)
at http://localhost:3300/js/myapp.js:47347:15
at invokeCallback (http://localhost:3300/js/myapp.js:22081:19)
at publish (http://localhost:3300/js/myapp.js:21751:9)
at publishRejection (http://localhost:3300/js/myapp.js:22179:7)
at http://localhost:3300/js/myapp.js:30448:7
at Object.DeferredActionQueues.flush (http://localhost:3300/js/myapp.js:18195:24)
at Object.Backburner.end (http://localhost:3300/js/myapp.js:18283:27) myapp.js:15589
Uncaught Error: Assertion Failed: Error: Assertion Failed: The URL '/' did not match any routes in your application
I was hoping someone could shed some light on how to include external templates in an ember router. Thanks!
Thanks for looking into it! I think I did a poor job explaining my question - I understood that it was the template name but I didn't understand how to include that in my application. I searched around a bit more and found grunt-ember-templates.
For future reference, they have really good docs to get you set up, this is what my emberTemplates code looked like.
emberTemplates: {
compile: {
options: {
templateBasePath: 'client/src/templates'
},
files: {
'build/templates.js': ['client/src/templates/*.hbs']
}
}
},
And then I just added 'application' as my route template name.
Don't forget to compile all of build/ in your app build.

Resources