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?
- Add a web worker.
- Initialize GrapesJS with "headless" option inside the worker.
- Add a plugin with "editor.DomComponents.addType" + "styles".
- Post a message to worker.
- 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)
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
Hi @artf, thanks a lot for your quick answer 😄 I will try this week.
@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.
Issue #4496
BUG: setStyle
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome latest versionReproducible demo link...
Issue #5389
BUG: GrapesJS v0.21.5 Doesn't Work in NodeJS (Headless)
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? ChromeV117.0.5938.62 Reproducible demo lin...
Issue #4572
BUG: Page update event doesn't fire
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link https://jsfi...
Issue #4919
BUG: calling destroy method breaks the editor ( React app )
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 109.0.5414.119 Reproducible demo li...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.