Forms playground sidebar not showing up?

[XavierElon]

Hi

I am trying to incorporate the forms playground component into my app but the sidebard with all the different form fields you can drag and drop is not showing up. And I am finding the documentation is very limiting. Can anyone please help me out?

Here is what I have so far

import React, { CSSProperties, useEffect, useRef, useState } from 'react'
import { createFormEditor } from "@bpmn-io/form-js";
import { Playground } from '@bpmn-io/form-js-playground';

import '@bpmn-io/form-js/dist/assets/dragula.css'
import '@bpmn-io/form-js/dist/assets/form-js.css'
import '@bpmn-io/form-js/dist/assets/form-js-editor.css'
import '@bpmn-io/form-js/dist/assets/properties-panel.css'
import '@bpmn-io/form-js/dist/assets/form-js-playground.css'

// import schema from './schema.json'

const BpmnForms = () => {

    const data = {
        creditor: "John Doe Company",
        amount: 456,
        invoiceNumber: "C-123",
        approved: true,
        approvedBy: "John Doe"
    };

    const schema = {
      schemaVersion: 3,
      exporter: {
        name: "form-js (https://demo.bpmn.io)",
        version: "0.3.0"
      },
      components: [
        {
          key: "name",
          label: "Text Field",
          type: "textfield",
          id: "Field_1jfqw1v",
          description: "Enter your name ...",
          validate: {
            required: true,
            minLength: 3,
            maxLength: 50
          }
        }
      ],
      type: "default",
      id: "Form_1f88rws"
    }

    useEffect(() => {   
          
          const playground = new Playground({
            container: document.querySelector('#container'),
            schema,
            data
          });

    }, [])

    return(
        <div>
          <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"/>
          <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet"></link>
          <div id="container" style={{ width: '75%', height: '80%'}}></div>
        </div>
    ) 
};

export default BpmnForms;

And here is what is displayed

[Niklas_Kiefer]

Hi! Do you have any errors poping up in the Browser console (e.g. Developer Tools in Chrome)? Something not properly rendering could be an indicator for this.

[XavierElon]

Yes I am getting this error but can’t figure out why. I followed the documentation exactly.

 useEffect(() => {
        const formEditor = new FormEditor({
          container: document.querySelector('#container')
        });
        
        const importSchema = async () => {
          await formEditor.importSchema(schema);
        }

        importSchema()
          
    }, [])

    return(
        <div>
          <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"/>
          <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet"></link>
          <div id="container"></div>
        </div>

[philippfromme]

This is an issue with the dragula library. For some reason, the library uses global which is undefined in browsers like Chrome (cf. Angular 7: Uncaught ReferenceError: global is not defined when adding package · Issue #602 · bevacqua/dragula · GitHub). Webpack polyfills global by default (cf. Module Variables | webpack). You need to polyfill global, too.

[XavierElon]

Do you know of a way to fix this? I already have global defined in my vite.config file

export default defineConfig({
  plugins: [
    react(),
    istanbul({
      include: 'src/',
      exclude: ['node_modules/*', 'dist'],
      extension: ['.js', '.ts', '.tsx'],
      // requireEnv: true,
      // forceBuildInstrument: Boolean(process.env.INSTRUMENT_BUILD),
    }),
  ],
  define: {
    global: {},
  },
});

[philippfromme]

Defining it as an empty object won’t solve the problem. Dragula will try to access global.navigator.pointerEnabled so you need to point global to window. I assume that’s what Webpack does.