Expected argument of type "string", "null" given at property path "options".

[LinkNexus]

Hello!

I'm trying to use CropperJS and other forms in the same page, but when submitting a form which is not the crop form, the crop form returns an error going by:

Expected argument of type "string", "null" given at property path "options"

Here is my controller code:

`<?php

namespace App\Controller;

use App\Entity\User;
use App\Form\UserType;
use App\Service\FileUploader;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Asset\Packages;
use Symfony\Component\HttpFoundation\File\Exception\FileException;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\Component\Validator\Constraints\Image;
use Symfony\UX\Cropperjs\Factory\CropperInterface;
use Symfony\UX\Cropperjs\Form\CropperType;
use Symfony\UX\Dropzone\Form\DropzoneType;

final class AppController extends AbstractController
{
public function __construct(private readonly EntityManagerInterface $entityManager)
{}

#[Route('/', name: 'app_index')]
public function index(): Response
{
    return $this->render('app/index.html.twig');
}

#[Route('/profile/{id}', name: 'app_profile')]
public function profile(
    Request $request,
    FileUploader $fileUploader,
    CropperInterface $cropper,
    Packages $assets,
    ?int $id = null
): Response
{
    $user = $id ? $this->entityManager->getRepository(User::class)->findOneBy([
        'identifier' => $id,
    ]) : $this->getUser();

    if (!$user) {
        throw $this->createNotFoundException('User not found');
    }

    $form = $this->createForm(UserType::class, $user);
    $profileImageForm = $this->createFormBuilder()
        ->add('image', DropzoneType::class, [
            'error_bubbling' => true,
            'required' => true,
            'constraints' => [
                new Image([
                    'maxSize' => '2M',
                    'mimeTypes' => [
                        'image/jpeg',
                        'image/png',
                        'image/webp',
                        'image/jpg',
                        'image/svg'
                    ],
                    'mimeTypesMessage' => 'Please upload a valid image',
                ]),
            ]
        ])->getForm();

    $crop = $cropper->createCrop($this->getParameter('kernel.project_dir') . '/public/images/users/' . $user->getImage());
    $cropForm = $this->createFormBuilder(['crop' => $crop])
        ->add('crop', CropperType::class, [
            'public_url' => $assets->getUrl('images/users/' . $user->getImage()),
            'cropper_options' => [
                'preview' => '#cropper-preview',
            ],
            'error_bubbling' => true,
            'empty_data' => '',
        ])->getForm();

    $form->handleRequest($request);
    $profileImageForm->handleRequest($request);
    $cropForm->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        dd($form->getData());
    }

    if ($profileImageForm->isSubmitted()) {
        if ($profileImageForm->isValid()) {

            $file = $profileImageForm->get('image')->getData();
            if ($user->getImage() && $user->getImage() !== 'default-image.jpg') {
                unlink($this->getParameter('kernel.project_dir') . '/public/images/users/' . $user->getImage());
            }

            try {
                $fileName = $fileUploader->upload($file, '/images/users/');
                $user->setImage($fileName);
                $this->addFlash('success', 'Image uploaded successfully');
                $this->entityManager->flush();

                return $this->redirectToRoute('app_profile');
            } catch (FileException $exception) {
                $this->addFlash('error', 'An error occurred while uploading the image');
            }

        } else {
            $this->addFlash('error', $profileImageForm->getErrors());
        }
    }

    if ($cropForm->isSubmitted()) {
        if ($cropForm->isValid()) {
            dd($cropForm->getData());
        } else {
            $this->addFlash('error', $cropForm->getErrors());
        }
    }

    return $this->render('app/profile.html.twig', [
        'user' => $user,
        'form' => $form,
        'profileImageForm' => $profileImageForm,
        'cropForm' => $cropForm,
    ]);
}

}`

Here's the link to reproduce the bug: https://github.com/LinkNexus/GamersWorld.

Thanks.

[smnandre]

@LinkNexus, i moved your issue into discussions, as we now reserve the issues for bugs and RFC.

There is an issue in your controller/page. You have 2 forms without names, so both are named... "form" (you can check in the HTML).

So here, the cropForm believes it is submitted when you submit the other one, and the data is all mixed up.

You can check this page for more information : https://symfony.com/doc/current/forms.html#changing-the-form-name

[smnandre]

I’d like to add a quick comment regarding your reproducer.

First, thank you for taking the time to create one and for clearly explaining where you thought the issue might be. This is always appreciated and makes troubleshooting much easier.

---

That said, there are a couple of things that could have streamlined the process for me:

1. Include a README

A README is invaluable for quickly understanding the problem, how to set up the project, and how to reproduce the issue. For example, I spent some time figuring out that fixtures needed to be loaded.

A basic README could include steps like:

# Install dependencies
composer install

# Containers (if services are needed)
docker compose up -d 

# Assets
# Specify the dependency manager and environment (Docker or not) to avoid guesswork
docker compose exec <container_name> <command> 
# Example: docker compose exec foo node, bun, or yarn

# Required commands
symfony php doctrine:fixtures:load -n

Additionally, including a direct URL to the relevant page would have saved time. For instance, when I tried /profile/1, I hit a type exception, which could have been avoided with clearer guidance.

2. Minimize noise

Include only what's strictly necessary for reproducing the bug. Unrelated features or dependencies (like a mailer service, in this case) can create unnecessary clutter and complexity. Simplifying the reproducer often highlights the issue—nine times out of ten, you’ll discover the problem in the process of removing unrelated parts.

For example, here, reducing the forms would likely have revealed that the component itself was working as intended.

---

Thank you again for your effort, and I hope this feedback is helpful. Have a great day!

[LinkNexus]

Okay thanks for the solution, i will keep these pieces of advice in memory for the next time i open an issue. Have a nice day also.