Issue #5232Opened July 11, 2023by bgrand-ch5 reactions

BUG: Worker - Headless "document is not defined"

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

114.0.5735.133

Reproducible demo link

Impossible to add a worker to reproduce.

Describe the bug

How to reproduce the bug?

  1. Add a web worker.
  2. Initialize GrapesJS with "headless" option inside the worker.
  3. Add a plugin with "editor.DomComponents.addType" + "styles".
  4. Post a message to worker.
  5. ReferenceError: document is not defined.

What is the expected behavior? Use GrapesJS inside a worker without "ReferenceError: document is not defined" error.

What is the current behavior? ReferenceError: document is not defined.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

plugin.js

const type = 'button'

function plugin (editor, options) {
  const domComponents = editor.DomComponents

  domComponents.addType(type, {
    isComponent (element) {
      return element.dataset.type === type
    },
    model: {
      defaults: {
        tagName: 'input',
        attributes: {
          type: 'button',
          'data-type': type
        },
        classes: [
          type
        ],
        styles: `
          .${type} {
            display: inline-block;
          }
        `
      }
    }
  })
}

worker.js

import addPlugin from './plugin.js'

onmessage = function (event) {
  try {
    grapesjs.init({
      headless: true,
      plugins: [
        addPlugin
      ]
    })
    postMessage({ success: true })
  } catch (error) {
    postMessage({ success: false, error })
  }
}

index.js

const worker = new Worker('worker.js')

worker.onmessage = (event) => {
  const data = event.data
  console.log('Editor worker result', data)
}

worker.postMessage({})

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

artfJuly 11, 20233 reactions

Hi @bgrand-ch unfortunately everything that involves the parser (HTML/CSS) requires the DOM related API to be available. For the CSS maybe you can try to use parser-postcss plugin, I'd expect it to work in the worker environment

bgrand-chJuly 11, 20231 reactions

Hi @artf, thanks a lot for your quick answer 😄 I will try this week.

bgrand-chJuly 11, 20231 reactions

@artf The Post CSS parser plugin works perfectly in a web worker! Thanks for your help.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.