[Typescript] [Vue] how to declare child vue component

This post describes an situation, when you want to put component to your parent vue component. In this example parent component is App, and child component is Canvas.

Firstly, install a vue-class-component npm package.
Then for your Typescript class use annotation like this:

import Vue from 'vue';
import Component from 'vue-class-component';
import {Canvas} from "./Canvas";

@Component({
    template: `<div><Canvas-component @element-added="addElement"></Canvas-component></div>`,
    components: {
        'Canvas-component': Canvas
    }
})
export default class App extends Vue
...
Like this you can declare also props field like in vanilla js Vue component.

[Android] admob invalid application id fix

If you tried everything from https://developers.google.com/admob/android/quick-start#update_your_androidmanifestxml and still doesn't work, get a test Ads from here , for example Banner ad format, paste it into your AndroidManifest.xml and change its meta-data value slash symbol (/) to tilda (~).

"vue.use is not a function" fix

You should call vue.use() before vue object initialization (before calling new Vue({})), not after, and call it like static method, not instance method. For example:

import Vue from 'vue';
import App from "./App";
import * as VueWindow from '@hscmap/vue-window'

Vue.use(VueWindow);
let vue = new Vue({
    el: '#app',
    template: '<App></App>',
    render: h => h(App)
})
export {vue};

[Typescript] "cannot find module 'vue'" error fix

When you write import Vue from 'vue'; and get error cannot find module 'vue' , fix it with adding this in tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    ...
   }
   ...
}

Symfony server - all routes fail with 404 fix

If you know that your project has working routes, but at requesting them with browser occasionally Symfony new server responds with 404 with any route, it can be your started Symfony local Web server (symfony command from CLI) from wrong directory, for example, in the parent folder after git cloning. In other words, check the current directory before running symfony serve command.

sylius.resource_controller.flash_helper has a dependency on a non-existent parameter "locale" - fix

if you have the such error:

The service "sylius.resource_controller.flash_helper" has a dependency on a non-existent parameter "locale". Did you mean one of these: "kernel.default_locale", "stof_doctrine_extensions.default_locale"?

It means you do not have an locale service parameter. To fix this, add this to the beginning of your project config/services.yaml file:

# This file is the entry point to configure your own services.
# Files in the packages/ subdirectory configure your dependencies.

# Put parameters here that don't need to change on each machine where the app is deployed
# https://symfony.com/doc/current/best_practices/configuration.html#application-related-configuration
parameters:
    locale: en

[Android] you must set design_width and design_height in your manifest file - how to fix

It looks like you use com.zhy.autolayout library, you can workaround it with using original AppCompatActivity instead of AutoLayoutActivity like this:

...
import androidx.appcompat.app.AppCompatActivity;

public abstract class BaseCameraActivity extends AppCompatActivity {
...

Works on Android API 28

[Typescript] Inversify 'has no exported member Container fix

Error Module '"./node_modules/inversify/dts/inversify"' has no exported member 'Container'

it because you have inversify@2.0.0-rc.14 version. Update your inversify version to 5.0.1 with setting this version in package.json and running npm install. 

Jetbrains HTTP client "org.apache.http.client.ClientProtocolException" fix

remove header Content-Length: 55 from your request.

Symfony doesnt update minor version fix

If you cannot update your Symfony project to new minor version (for example, from 4.2 to 4.3), and your packages only checks packages only previous versions like this:

The requested package symfony/security-bundle 4.3.4 exists as symfony/security-bundle[4.2.x-dev, v4.2.0, v4.2.0-BETA1, v4.2.0-BETA2, v4.2.0-RC1, v4.2.1, v4.2.10, v4.2.11, v4.2.2, v4.2.3, v4.2.4, v4.2.5, v4.2.6, v4.2.7, v4.2.8, v4.2.9] but these are rejected by your constraint.
  Problem 2
    - The requested package symfony/translation ^4.3 exists as symfony/translation[4.2.x-dev, v4.2.0, v4.2.0-BETA1, v4.2.0-BETA2, v4.2.0-RC1, v4.2.1, v4.2.10, v4.2.11, v4.2.2, v4.2.3, v4.2.4, v4.2.5, v4.2.6, v4.2.7, v4.2.8, v4.2.9] but these are rejected by your constraint.
  Problem 3
    - The requested package symfony/twig-bundle ^4.3 exists as symfony/twig-bundle[4.2.x-dev, v4.2.0, v4.2.0-BETA1, v4.2.0-BETA2, v4.2.0-RC1, v4.2.1, v4.2.10, v4.2.11, v4.2.2, v4.2.3, v4.2.4, v4.2.5, v4.2.6, v4.2.7, v4.2.8, v4.2.9] but these are rejected by your constraint.

it means you should to change extra node in your composer.json file:
"extra": {
        "symfony": {
            "allow-contrib": false,
            "require": "4.3.*"
        }
    }

Ways to optimize a Sylius project in dev mode

If you feel that your Sylius dev configuration is slow, try this:

1) use nginx (or docker with nginx) instead of php bin/console server:run
2) be sure XDebug is disabled
3) add these lines to your php.ini:

opcache.memory_consumption=256
opcache.max_accelerated_files=20000
realpath_cache_size=4096K

How to fix "504 gateway timeout" [php] [xdebug]

At the long PHP debug browser responds with "504 gateway timeout". If you want to increase this debugging period,

1) set in /etc/nginx/nginx.conf:
http {
    ...
    fastcgi_read_timeout 3600;
    ...
}
2) set this line in php.ini:
request_terminate_timeout = 3600s

3) restart nginx or restart containers.

It also possible to do in your Docker configuration.

Doctrine persists extra entities at update/merge fix

If you have batch create and update action simultaneously (persisting entity if it doesn't exists in DB or update it otherwise), made like in this documentation, and you noticed that it creates redundant entities, it means Doctrine think they are new. Enable "detach" cascade (transitional) operation in Doctrine like this:

/**
* @OneToMany(targetEntity="Customer", mappedBy="product", cascade={"detach"})
*/
protected $customers;

If you are not in dev environment, do not forget to run orm:clear-cache:metadata command.

[nodejjs] [websocket] Specified protocol was not requested by the client fix

If you have this error:

Error: Specified protocol was not requested by the client.
    at WebSocketRequest.accept (/proj/node_modules/websocket/lib/WebSocketRequest.js:289:19)

this means you have to create a connection at client side like this:

var connection = new WebSocket('ws://127.0.0.1:3000', 'echo-protocol');

instead of this:

var connection = new WebSocket('ws://127.0.0.1:3000');

Also this means you should to handle it at server side not to crash your server.

[Nodejs] Express + Websocket: Connection closed before receiving a handshake response

In case this error you should pass Express listen() return result to WebSocketServer() like this:

wsServer = new WebSocketServer({
    httpServer: app.listen(3000),
    port: 3001,
});

Full example:
var WebSocketServer = require('websocket').server;
var path = require('path');
var express = require('express');
var app = express();
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res){
    res.render('index.html');
});
console.log(`Server running on port ${process.env.PORT}`);

wsServer = new WebSocketServer({
    httpServer: app.listen(3000),
    port: 3001,
});

How to install USB Startup Disk Creator on Kubuntu/Debian

Just run sudo apt-get install usb-creator-gtk

my minimum steps to enable xdebug in ubuntu & phpstorm (locally)

1. install xdebug helper in Chrome-based browser
2. sudo apt-get install php7.2-xdebug
3. add these lines in <>:
xdebug.idekey=PHPSTORM
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
4. add in phpstorm settings Languages & Frameworks > PHP > Servers:
Name & Host: 127.0.0.1
Port 8000
4. set a breakpoint at reachable code line and start debugging

Custom compilerpass too few arguments fix

When you want use a service in your compilerpass and get "too few arguments" error, it means that needed service is not in container yet at custompass execution moment. In another words, custom pass executed earlier than service was added to container. To solve this situation, add this to Kernel.php/AppKernel.php:

protected function build(ContainerBuilder $container): void
    {
        $container->addCompilerPass(new CustomPass(), PassConfig::TYPE_AFTER_REMOVING);
    }


Contstant TYPE_AFTER_REMOVING means that compilerpass with be added after not used services removing time.

[Gitlab] how to edit gitlab-runner tags

Simply go to CI / CD > runner on Gitlab website, focus on your needed runner, press on modify icon and at the opened page modify runner tags.

It shouldn't be done from runner's machine, only at Gitlab.

[Sylius] The page you are looking for does not exist. at /payment/capture/Nvh8PX4pKVmoPE3xLd-AkXdtebcn_onUdnHiXX1KT-8

It occurs when order is created with non-default locale, and at Payum method locale is reset, because route /payment/capture/{token} doesn't contains locale code placeholder.

You can fix it with adding to payum.xml route config /{locale} prefix in another route file, for example shop.yaml file.

[Sylius] fix mysql errors with INSERT INTO sylius_shipping_method_translation after services.yaml locale changing

If you have errors similar to INSERT INTO sylius_shipping_method_translation (name, description, locale, translatable_id) VALUES (?, ?, ?, ?)' with params [null, null, "lv", 1] error after services.yaml changing locale , also with another Sylius tables, try to manually add these records in database.

For example, if you have problems with product db table, go to admin/products/{id}/edit and add translation to your main locale, do it for every product.

It occurs when you switch the main locale, then adding something to cart (in another words create an order). Order entity has relation to Shipping method, which has relation to Shipping method translation entity, which doesn't exists with needed locale. So Doctrine thinks it should persist before creating an Order, so there occurs an error.

Another way to create Sylius Resource factory

Use this in services.yaml:

App\Factory\RideFactory:
        decorates: app.factory.ride
        arguments:
            - "@App\Factory\RideFactory.inner"


App\Factory\RideFactory:
<?php
declare(strict_types=1);

namespace App\Factory;

use App\Entity\Ride;
use Sylius\Component\Resource\Factory\FactoryInterface;

class RideFactory implements FactoryInterface
{
    /**
     * @var FactoryInterface
     */
    private $decorated;

    public function __construct(FactoryInterface $decoratedFactory)
    {
        $this->decorated = $decoratedFactory;
    }

    public function createNew()
    {
        return new Ride();
    }
}

Finally you shouldn't add anything into `sylius_resource` in config.yml.

[PHP] Docker doesn't applies code changes in container!

Be sure your php.ini doesn't have opcache.validate_timestamps=0. Actually there is no issues with Docker, only OPcache.

[Sylius] How to autowire AbstractResourceType

Use this in your class:

final class HomepageOrderType extends AbstractResourceType
{
    public function __construct(array $validationGroups = [])
    {
        parent::__construct(Order::class, $validationGroups);
    }
    ...

symfony4 MAILER_URL Mailgun smtp example

Your .env.local:

MAILER_URL=smtp://smtp.mailgun.org?encryption=tls&auth_mode=login&username=yourusername&password=yourpassword

composer vcs repository doesn't update package latest commit

Manually find package in composer.lock and replace old commit occurencies to new commit hash.

sylius grid 'sorting' doesnt work fix

make your needed field for sorting `sortable: true` in `fields:` definition, for example:

sylius_grid:
    grids:
        my_grid:
            driver:
                name: doctrine/orm
                options:
                    class: App\Document\Record
            sorting:
                datetime: desc
            fields:
                datetime:
                    type: datetime
                    sortable: true

Entity of type * passed to the choice field must be managed - solution fix

If available, try to use ChoiceType instead of EntityType form type.

[Symfony4 upgrade] bundle app does not exist or it is not enabled

Remove these lines in your config/routes.yaml:

app:
    resource: '@App/Controller/'
    type: annotation

[Symfony standalone] There is no extension able to load the configuration for

If you are using symfony/dependency-injection as standalone and you have this error in using YAML file loader, add `services:` node at the top of your services.yaml file.

[MongoDB] [Symfony] "Could not find the document manager for class" fix with autowiring

For repository use this class below. Notice that it uses ManagerRegistry instead of Symfony\Bridge\Doctrine\RegistryInterface
<?php

use AppBundle\Document\Product;
use Doctrine\Bundle\MongoDBBundle\Repository\ServiceDocumentRepository;
use Doctrine\Bundle\MongoDBBundle\ManagerRegistry;

class ProductRepository extends ServiceDocumentRepository
{
    public function __construct(ManagerRegistry $managerRegistry)
    {
        parent::__construct($managerRegistry, Product::class);
    }
}

[gitlab] multiline environment variable passed as empty line fix

Use correct way to pass variable in your .gitlab-ci.yml in `script` section:

- echo "$PROD_PRIVATE_KEY" > config/nginx/certs/site.dev.priv

Then be sure you disabled "protected" option for your variable in Gitlab Settings > CI / CD.

How to fix "phpcr/phpcr-implementation no matching package found"

If you have error:

Using version ^1.4 for doctrine/phpcr-odm
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Restricting packages listed in "symfony/symfony" to "4.2.*"
Your requirements could not be resolved to an installable set of packages.

 Problem 1
   - doctrine/phpcr-odm 1.4.4 requires phpcr/phpcr-implementation ^2.1 -> no matching package found.
   - doctrine/phpcr-odm 1.4.3 requires phpcr/phpcr-implementation ^2.1 -> no matching package found.
   - doctrine/phpcr-odm 1.4.2 requires phpcr/phpcr-implementation ^2.1.0 -> no matching package found.
   - doctrine/phpcr-odm 1.4.1 requires phpcr/phpcr-implementation ^2.1.0 -> no matching package found.
   - doctrine/phpcr-odm 1.4.0 requires phpcr/phpcr-implementation ^2.1.0 -> no matching package found.
   - Installation request for doctrine/phpcr-odm ^1.4 -> satisfiable by doctrine/phpcr-odm[1.4.0, 1.4.1, 1.4.2, 1.4.
3, 1.4.4].

Potential causes:
- A typo in the package name
- The package is not available in a stable-enough version according to your minimum-stability setting
  see <https://getcomposer.org/doc/04-schema.md#minimum-stability> for more details.
- It's a private package and you forgot to add a custom repository to find it

Read <https://getcomposer.org/doc/articles/troubleshooting.md> for further common problems.

You should add your project's composer.json these lines:

"provide": {
    "phpcr/phpcr-implementation": "2.1.0"},

Symfony 4.2.3.

[Ckeditor] adds extra html tags fix

If you pass HTML content to Twig template and escape it with raw filter/function, and get extra <p> tags, like in this example:

<p></p>
<p>my passed HTML content from CKeditor</p>
<p></p>

It means you should unwrap <p> tag, which wraps Twig content variable.
Bad Twig case:

<p>{{ page.content|raw }}</p>

Good Twig case:
{{ page.content|raw }}

It occurs because <p> cannot be nested, so tag cannot be unclosed, and if at next opens a new <p>, previous tag becomes automatically closed. 

[Webpack] Module not found: Error: Empty dependency (no request) fix

If you have these errors in Webpack (encore):
This dependency was not found:

*  in ./node_modules/css-loader??ref--1-2!./src/AppBundle/Resources/public/css/styles.css

or:

Module build failed: ModuleNotFoundError: Module not found: Error: Empty dependency (no request)
   at factoryCallback (/var/www/project/core/node_modules/webpack/lib/Compilation.js:282:40)

It because you have background-image("") without an url. Add it or remove this attribute.

Symfony commands "environment variable not found" at migrating to symfony/dotenv fix

Add use Symfony\Component\Dotenv\Dotenv; at the beginning of file bin/console.php at the beginning of file and before line "require __DIR__.'/../vendor/autoload.php';"add (new Dotenv())->load(__DIR__.'/../.env');


So it should looks like:
#!/usr/bin/env php
<?php

use Symfony\Bundle\FrameworkBundle\Console\Application;
use Symfony\Component\Console\Input\ArgvInput;
use Symfony\Component\Debug\Debug;
use Symfony\Component\Dotenv\Dotenv;

// if you don't want to setup permissions the proper way, just uncomment the following PHP line
// read https://symfony.com/doc/current/setup.html#checking-symfony-application-configuration-and-setup
// for more information
//umask(0000);

set_time_limit(0);

require __DIR__.'/../vendor/autoload.php';
(new Dotenv())->load(__DIR__.'/../.env');

$input = new ArgvInput();
$env = $input->getParameterOption(['--env', '-e'], getenv('SYMFONY_ENV') ?: 'dev');
$debug = getenv('SYMFONY_DEBUG') !== '0' && !$input->hasParameterOption(['--no-debug', '']) && $env !== 'prod';

if ($debug) {
    Debug::enable();
}

$kernel = new AppKernel($env, $debug);
$application = new Application($kernel);
$application->run($input);

jest encountered an unexpected token + equals symbol

Also if you have error "Jest encountered an unexpected token"  , as in code below:

class App extends Component {
        state={
             ^             value: 'value'     }

add to your .babelrc

{
  "presets": ["env", "react"],
  "plugins": ["transform-class-properties"]
}

[Sulu] how to fix [extensionsData] This value is not valid. ({"{{ value }}":"NULL"})

If you have error "[extensionsData] This value is not valid. ({"{{ value }}":"NULL"})" in Symfony Profiler, downgrade symfony version to 3.4.15. Problem occured in symfony version 3.4.21.

[Linux] Fix opera/chrome browser video (again)

Run sudo apt-get install chromium-codecs-ffmpeg-extra 
then  sudo ln -sf /usr/lib/chromium-browser/libffmpeg.so /usr/lib/x86_64-linux-gnu/opera/libffmpeg.so
runs on opera 57

[Krita] make photoshop compatible shortcuts

If you want adobe photoshop compatible hotkeys, go to Settings > Configure Krita > Keyboard Shortcuts tab > Shortcut schemes and select there "photoshop_compatible". Real KDE way.