NextAuth.js: Error 400: redirect_uri_mismatch

Just need to put this in your .env file

NEXTAUTH_URL="http://localhost:3000"

Unchecked runtime.lastError: The message port closed before a response was received.

Even if the listener's async code returns true to indicate it is running an async code, the code will still have the error "Unchecked runtime.lastError: The message port closed before a response was received" if the async code is wrongly placed.
The following code produces the error mentioned due to misplaced async

chrome.runtime.onMessage.addListener(async (message /* , sender, sendResponse */) => {
    if (message.action === UPDATE_PAGE) {
        await applyStyleFromSettings();
    }
    // https://stackoverflow.com/questions/53024819/chrome-extension-sendresponse-not-waiting-for-async-function    
    return true;
});

Returning true is not enough, to fully fix the problem, we must place the async code on the code body itself, not on the callback's declaration. Remove the async declaration from the listener, move it to the code's body instead

chrome.runtime.onMessage.addListener((message /*, sender, sendResponse */) => {
    (async () => {
        if (message.action === UPDATE_PAGE) {
            await applyStyleFromSettings();
        }
    })();
    // https://stackoverflow.com/questions/53024819/chrome-extension-sendresponse-not-waiting-for-async-function            
    return true;
});

Uncaught (in promise) The message port closed before a response was received

// eslint-disable-next-line no-undef
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.dataNeeded === HANZI) {
        (async () => {                                       
            const hzl = await loadHanziListFile();                    
            sendResponse({data: hzl});
        })();
    
        // Need to return true if we are using async code in addListener.
        // Without this line..
        return true;
        // ..we will receive the error: 
        // Uncaught (in promise) The message port closed before a response was received
    }
});

Service worker registration failed. Cannot read property 'onClicked' of undefined

Given this background.js:

// eslint-disable-next-line no-undef
chrome.action.onClicked.addListener((tab) => {
    console.log("working");

    // eslint-disable-next-line no-undef
    chrome.tabs.sendMessage(
        // tabs[0].id,
        tab.id,
        { action: "CHANGE_COLOR" },
        // eslint-disable-next-line no-unused-vars
        function (response) {}
    );

});

I'm using manifest version 3:

{
    "name": "Chinese word separator",
    "description": "Put spaces between words",
    "version": "1.0",
    "manifest_version": 3,    
    "background" : {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": [],
            "js": ["contentScript.js"]
        }
    ]  
}

And I received this error:

To fix the error, add the action property even if it is empty:

{
    "name": "Chinese word separator",
    "description": "Put spaces between words",
    "version": "1.0",
    "manifest_version": 3,    
    "action": {},
    "background" : {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": [],
            "js": ["contentScript.js"]
        }
    ]  
}

It is advisable to wrap the background.js via a wrapper so you'll get better error message, so if there's no action property in manifest.json..

{
    "name": "Chinese word separator",
    "description": "Put spaces between words",
    "version": "1.0",
    "manifest_version": 3,    
    "background" : {
        "service_worker": "background-wrapper.js"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": [],
            "js": ["contentScript.js"]
        }
    ]  
}

..and you wrap the background via wrapper (e.g., background-wrapper.js)..

try {
    // eslint-disable-next-line no-undef
    importScripts("./background.js");
} catch (e) {
    console.error(e);
}

..you will receive a more descriptive error instead:

background-wrapper.js:5 TypeError: Cannot read property 'onClicked' of undefined
    at background.js:1
    at background-wrapper.js:3
(anonymous) @ background-wrapper.js:5

To fix the error, add action on manifest.json

Error on VS Code: Git: git@github.com: Permission denied (publickey)

To solve that problem, type this in terminal:

% ssh-add

Solution source: https://superuser.com/questions/360686/what-exactly-does-ssh-add-do

Failed to load config "react-app" to extend from.

Solution:

$ yarn add react-refresh eslint-config-react-app

NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'

This error will happen too even if the FormsModule is imported directly or indirectly (from shared module for example) in the feature module, if the imported component is not declared on declarations:



I followed Deborah Kurata's Angular Routing course, while I added the imported component ProductEditInfoComponent on Angular Route's component property, I forgot to add ProductEditInfoComponent on declarations property.

Adding the ProductEditInfoComponent on declarations property would solve the NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. problem

pgAdmin Internal Server Error

Internal Server Error

The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application.

If you encountered this error on *nix-based system, just delete the .pgAdmin directory from your directory, i.e.,

$ rm -rf ~/.pgadmin

Note that you will need to re-enter your user postgres password when pgAdmin is launched

Error: Actions must be plain objects. Use custom middleware for async actions

If you got that error, it's likely that you forgot to import the redux-thunk and configure it accordingly similar to the code below:

import { createStore, Store } from 'redux';

import { reducersRoot } from './reducers-root';

import { IAllState } from './all-state';

export function configureStore(): Store<IAllState>
{
    const devTools: any = (window as any)['__REDUX_DEVTOOLS_EXTENSION__'];

    return createStore(reducersRoot(), devTools && devTools());
}

Solution:

import { applyMiddleware, compose, createStore, Store } from 'redux';

import { reducersRoot } from './reducers-root';

import { IAllState } from './all-state';

import ReduxThunk from 'redux-thunk';

export function configureStore(): Store<IAllState>
{
    const middlewares = applyMiddleware(ReduxThunk);

    const composeEnhancers = (window as any)['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] || compose;

    const composed = composeEnhancers(middlewares);

    return createStore(reducersRoot(), composed);
}

Error: connect ECONNREFUSED 192.168.254.176:3306

In macOS environment there is no explicit file for my.cnf. It's weird, before I introduced .my.cnf in home directory, applications can connect to remote host (e.g., 192.168.254.176) just fine.

The solution is to force the TCP on .my.cnf

[client]
protocol=tcp

Restart:

$ brew services restart mysql

It turns out that the MySQL installation on my machine is using socket. What's odd is I'm not using localhost (e.g., 192.168.254.176) for database connection's host despite server and client are same machine, yet MySQL still resorts to using socket.

On Unix, if you are running the server and the client on the same machine, connect to localhost. For connections to localhost, MySQL programs attempt to connect to the local server by using a Unix socket file, unless there are connection parameters specified to ensure that the client makes a TCP/IP connection
-- https://dev.mysql.com/doc/refman/5.5/en/problems-connecting.html

pm2 must not be ran with sudo

If you got an EACCES error when you run pm2 without sudo..

me@ubuntu:~/myapp$ pm2 start ./bin/www
events.js:160
      throw er; // Unhandled 'error' event
      ^

Error: connect EACCES /home/me/.pm2/rpc.sock
    at Object.exports._errnoException (util.js:896:11)
    at exports._exceptionWithHostPort (util.js:919:20)
    at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1073:14)

..chances are you might try to run pm2 with sudo and it will work.

However, it will cause an undefined value on process.env.PWD, and then it will cause SPA page that are refreshed or re-loaded from bookmark not to load.

var base = process.env.PWD;

res.sendFile('index.html', {root: path.join(base, '/public')});

To fix the error, make the following your own file /home/yourUsernameHere/.pm2/rpc.sock

sudo chown yourUsernameHere ~/.pm2/rpc.sock

Doing the above you can now run your pm2 without the sudo.

After running:

$ pm2 start ./bin/www

Run this:

$ pm2 save
$ pm2 startup

Then follow the instruction of that pm2 startup command.


Happy Coding!

Using hallo on AngularJS and RequireJS (troubleshooting)

Requirement:
1. Hallo

npm install hallo

2. Hallo Angular Directive
Get the angular directive here: http://www.grobmeier.de/using-hallo-js-with-angularjs-14072013.html

3. Hallo requirejs.config paths:

"jQuery": "/lib/hallo/deps/jquery-1.9.0",
"jQueryUI" : "/lib/hallo/deps/jquery-ui-1.10.0.custom",
"rangyCore" : "/lib/hallo/deps/rangy-core-1.2.3",
"halloJS" : "/lib/hallo/examples/hallo",

4. require's prior to Angular app initialization:

define(require => {

    require('jQuery');
    require('jQueryUI');
    require('rangyCore');
    require('halloJS');

    var angie: ng.IAngularStatic = require('angular');
    createHalloDirective(angie); // http://www.grobmeier.de/using-hallo-js-with-angularjs-14072013.html">http://www.grobmeier.de/using-hallo-js-with-angularjs-14072013.html

    var mod: ng.IModule = angie.module('niceApp', []);

/lib points to node_modules directory.



If you encountered this error:

TypeError: element.hallo is not a function

You need to use full jQuery instead of Angular's jQLite.


In your requirejs.config shim section, you must specify jQuery as a dependency of Angular, if it's not specified it will load jQLite instead:

"angular" : {
    "exports": "angular",
    deps: ["jQuery"]
}

You'll encounter these errors if you don't define the depedencies between hallo, rangy and jQueryUI:

Uncaught TypeError: $.widget is not a function
  (anonymous function) 
  (anonymous function) 
TypeError: element.hallo is not a function

To fix that, must add these dependencies on your requirejs.config shim section:

"jQueryUI": {
    deps: ["jQuery"]
},

"rangyCore" : {
    deps: ["jQueryUI"]
},

"halloJS" : {
    deps: ["rangyCore"]
}

Hallo directive should load correctly on your Angular app. However when you double click the hallo content, it'll show the following errors:

jQuery.fn.jQuery.init[1]
Uncaught TypeError: rangy.getSelection is not a function
  jQuery.widget.getSelection 

The rangy-core that's bundled via hallo obtained from npm yields that error. To fix that, install rangy directly:

npm install rangy

Then use that instead of the rangy-core that's bundled with hallo.

Point rangyCore to new path on requirejs.config paths:

"jQuery": "/lib/hallo/deps/jquery-1.9.0",
"jQueryUI" : "/lib/hallo/deps/jquery-ui-1.10.0.custom",
// "rangyCore" : "/lib/hallo/deps/rangy-core-1.2.3", // remove this
"rangyCore" : "/lib/rangy/lib/rangy-core", // change to this
"halloJS" : "/lib/hallo/examples/hallo",

There's still an error when you double click the hallo content, it'll show the following:

jQuery.fn.jQuery.init[1]
Uncaught ReferenceError: rangy is not defined
  jQuery.widget.getSelection 

To fix that that, put the rangy's instance on window:

require('jQuery');
require('jQueryUI');

var rangy = require('rangyCore');
window["rangy"] = rangy;
    
require('halloJS'); // hallo looks for rangy in global scope, that is, window

That's it, when you double click the hallo's content, the tools for formatting(Bold, Italic, etc) should pop up now.

404 when accessing a subdirectory from nginx

I deployed an ASP.NET MVC application on Ubuntu + nginx + fastcgi-mono-server4, this works:

http://www.example.com/


However this doesn't:

http://www.example.com/Companies/Search?q=softwaremint


The fix is apparently simple, instead of letting nginx manage the subdirectories, let ASP.NET MVC manage it by removing the following (configuration is in /etc/nginx/sites-available/default) :

try_files $uri $uri/ =404;

Failed reloading nginx configuration nginx

michael@buen:/etc/init.d$ sudo nginx -t &&  service nginx reload
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
 * Reloading nginx configuration nginx                                   [fail]
michael@buen:/etc/init.d$ sudo nginx -t && sudo service nginx reload
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
 * Reloading nginx configuration nginx                                   [ OK ]

Put sudo on service too

Cannot find /Library/Tomcat/Home/bin/setclasspath.sh

When starting Tomcat on Lion:

$ /Library/Tomcat/bin/startup.sh 

And you encountered this error:

Cannot find /Library/Tomcat/Home/bin/setclasspath.sh This file is needed to run this program

just unset the CATALINA_HOME variable:

$ unset CATALINA_HOME

Then run this again:

/Library/Tomcat/bin/startup.sh 

Then visit http://127.0.0.1:8080

Troubleshooting idea got from this: http://www.malisphoto.com/tips/tomcatonosx.html

---

Another approach is to use sudo:

sudo /Library/Tomcat/bin/startup.sh 

Then visit http://127.0.0.1:8080