Uncaught TypeError: Cannot read property 'firstChild' of undefined

[santigolucass]

I'm having this error while trying to render the form. I'm building it using Rails + Stimulus.

My setup:

<div data-controller="formeo" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
  <div data-formeo-target="renderer"></div>
  <div data-formeo-target="editor" style="min-height: 500px; border: 1px solid #ccc;"></div>
  <button data-action="formeo#renderForm">Render Form</button>
</div>

// app/javascript/controllers/formeo_controller.js
import { Controller } from '@hotwired/stimulus';
import { FormeoEditor, FormeoRenderer } from 'formeo';

export default class extends Controller {
  static targets = ['editor', 'renderer'];

  connect() {
    const editorContainer = this.editorTarget;

    if (!editorContainer) {
      console.error('Editor container not found!');
      return;
    }

    const options = {
      editorContainer: editorContainer,
      events: {
        onSave: this.saveFormData.bind(this),
      }
    };

    this.editor = new FormeoEditor(options);
  }

  saveFormData() {
    const formData = this.editor.formData;

    console.log('Form data:', formData);
  }

  renderForm() {
    const formData = this.editor.formData;
    const rendererContainer = this.rendererTarget;

    if (!rendererContainer) {
      console.error('Renderer container not found!');
      return;
    }

    const options = {
      rendererContainer,
    };

    console.log('Rendering options:', options);
    console.log('Rendering form:', formData);
    const renderer = new FormeoRenderer(options)
    renderer.render(formData)
  }

}

[kevinchappell]

i tried looking into this but i am not able to replciate. stimulus does not seem to work well outside of rails and webpack. If you can fork this sandbox and get stimulus to work i can look into this further: https://codesandbox.io/p/sandbox/jpf74p

[santigolucass]

The only change I had to make was adding the renderContainer in the options, and now it's working; I found this reading the formeo code

    const options = {
      renderContainer: rendererContainer,
    };

[kevinchappell]

That's great, glad you were able to resolve the issue. Thanks for the update