Uncaught SyntaxError when doing a development build

Edit to: provide a more detailed error description and reclassify this as a possible API bug.

I’m upgrading an existing plugin from React 17 to 18 and Webpack 4 to 5. I used the webpack-react sample plugin as source for the Webpack config file. Production builds are fine, but development builds break when it tries to bring up the UI. The issue remained when I backed off to React 17.

I see this on the console:

VM12806:4282 Uncaught SyntaxError: Unexpected end of input

at onmessage (data:text/html;base64,PHNj …

onmessage @ data:text/html;base64,PHNjcmlw …

postMessage (async)

innerIframeElement.onload @ Figma_app.min.js.br:1428

load (async)

g4r @ Figma_app.min.js.br:1428

createInnerIframe @ Figma_app.min.js.br:1448

makeIframe @ Figma_app.min.js.br:1448

cb @ Figma_app.min.js.br:1522

(anonymous) @ Figma_app.min.js.br:1495

(anonymous) @ Figma_app.min.js.br:705

showUI @ VM12140:7

eval @ VM12265 PLUGIN_39_SOURCE:7854

eval @ VM12265 PLUGIN_39_SOURCE:8722

eval @ VM12265 PLUGIN_39_SOURCE:8724

eval @ VM12134:8

(anonymous) @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:9

(anonymous) @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:9

realmEvaluate @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:9

eval @ VM94:1

evaluate @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:1

evalCode @ Figma_app.min.js.br:705

evalTopLevelCode @ Figma_app.min.js.br:705

(anonymous) @ Figma_app.min.js.br:1524

n @ Figma_app.min.js.br:12

setTimeout (async)

(anonymous) @ Figma_app.min.js.br:12

runResult @ Figma_app.min.js.br:1524

wDs @ Figma_app.min.js.br:1522

await in wDs (async)

tbo @ Figma_app.min.js.br:1527

await in tbo (async)

(anonymous) @ Figma_app.min.js.br:1657

await in (anonymous) (async)

nMt @ Figma_app.min.js.br:1657

zgp @ Figma_app.min.js.br:1657

await in zgp (async)

(anonymous) @ Figma_app.min.js.br:1657

YO @ Figma_app.min.js.br:2081

(anonymous) @ Figma_app.min.js.br:2081

YG.onSelectItem @ Figma_app.min.js.br:2081

(anonymous) @ Figma_app.min.js.br:1661

(anonymous) @ Figma_app.min.js.br:1661

glu @ Figma_app.min.js.br:16

_lu @ Figma_app.min.js.br:16

ylu @ Figma_app.min.js.br:16

wqn @ Figma_app.min.js.br:16

$Yn @ Figma_app.min.js.br:16

(anonymous) @ Figma_app.min.js.br:16

Wpr @ Figma_app.min.js.br:19

vYn @ Figma_app.min.js.br:16

nur @ Figma_app.min.js.br:16

_pr @ Figma_app.min.js.br:16

Nlu @ Figma_app.min.js.br:16

n @ Figma_app.min.js.br:12

data:text/html;base64,PHNjcmlwd …

postMessage (async)

innerIframeElement.onload @ Figma_app.min.js.br:1428

load (async)

g4r @ Figma_app.min.js.br:1428

createInnerIframe @ Figma_app.min.js.br:1448

makeIframe @ Figma_app.min.js.br:1448

cb @ Figma_app.min.js.br:1522

(anonymous) @ Figma_app.min.js.br:1495

(anonymous) @ Figma_app.min.js.br:705

showUI @ VM12140:7

eval @ VM12265 PLUGIN_39_SOURCE:7854

eval @ VM12265 PLUGIN_39_SOURCE:8722

eval @ VM12265 PLUGIN_39_SOURCE:8724

eval @ VM12134:8

(anonymous) @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:9

(anonymous) @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:9

realmEvaluate @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:9

eval @ VM94:1

evaluate @ 1adf7aa3-80d6-4337-98d4-757ab2bf719c:1

evalCode @ Figma_app.min.js.br:705

evalTopLevelCode @ Figma_app.min.js.br:705

(anonymous) @ Figma_app.min.js.br:1524

n @ Figma_app.min.js.br:12

setTimeout (async)

(anonymous) @ Figma_app.min.js.br:12

runResult @ Figma_app.min.js.br:1524

wDs @ Figma_app.min.js.br:1522

await in wDs (async)

tbo @ Figma_app.min.js.br:1527

await in tbo (async)

(anonymous) @ Figma_app.min.js.br:1657

await in (anonymous) (async)

nMt @ Figma_app.min.js.br:1657

zgp @ Figma_app.min.js.br:1657

await in zgp (async)

(anonymous) @ Figma_app.min.js.br:1657

YO @ Figma_app.min.js.br:2081

(anonymous) @ Figma_app.min.js.br:2081

YG.onSelectItem @ Figma_app.min.js.br:2081

(anonymous) @ Figma_app.min.js.br:1661

(anonymous) @ Figma_app.min.js.br:1661

glu @ Figma_app.min.js.br:16

_lu @ Figma_app.min.js.br:16

ylu @ Figma_app.min.js.br:16

wqn @ Figma_app.min.js.br:16

$Yn @ Figma_app.min.js.br:16

(anonymous) @ Figma_app.min.js.br:16

Wpr @ Figma_app.min.js.br:19

vYn @ Figma_app.min.js.br:16

nur @ Figma_app.min.js.br:16

_pr @ Figma_app.min.js.br:16

Nlu @ Figma_app.min.js.br:16

n @ Figma_app.min.js.br:12

data:text/html;base64,PHNjcmlwd …

I removed the long base64 sequences, but here is the first one decoded:

onmessage = (event) => {
if (event.source === window.top && event.origin === "https://www.figma.com") {
document.write("" + "\n document.close();\n document.addEventListener('keydown', (e) => {\n if (e.keyCode === 80 /* P */ && !e.shiftKey && e.altKey && e.ctrlKey && !e.metaKey) {\n // Handle the plugin re-run shortcut\n window.parent.postMessage('$INTERNAL_DO_NOT_USE$RERUN_PLUGIN$', '*')\n e.stopPropagation()\n e.stopImmediatePropagation()\n } else if (true) {\n // Handle Select All, Undo and Redo in the desktop app\n if (e.keyCode === 65 /* A */ && e.ctrlKey) {\n document.execCommand('selectAll')\n } else if (e.keyCode === 90 /* Z */ && e.ctrlKey) {\n if (e.shiftKey) {\n document.execCommand('redo')\n } else {\n document.execCommand('undo')\n }\n }\n }\n }, true)\n\n function renderCssVariables(vars) {\n return Object.entries(vars)\n .map((entry) => entry.join(': '))\n .join('; ') + ';'\n }\n\n window.addEventListener('message', function(event) {\n if (\n event.source === window.top &&\n event.data &&\n typeof event.data === 'object' &&\n 'figmaMessage' in event.data\n ) {\n event.stopImmediatePropagation()\n\n const figmaMessage = event.data.figmaMessage\n\n if (figmaMessage.type === 'THEME') {\n const figmaStyle = document.getElementById('figma-style')\n figmaStyle.textContent = ':root { ' + renderCssVariables(figmaMessage.payload.variables) + ' }'\n\n const classesToRemove = o]\n\n document.documentElement.classList.forEach((value) => {\n if (value.startsWith('figma-')) {\n classesToRemove.push(value)\n }\n })\n\n for (const className of classesToRemove) {\n document.documentElement.classList.remove(className)\n }\n\n if (figmaMessage.payload.name && figmaMessage.payload.name !== 'legacy') {\n document.documentElement.classList.add('figma-' + figmaMessage.payload.name)\n }\n }\n }\n }, true)\n " + "" + "" + "" + event.data)
}
}

</sc ript>

Page 1 / 1

MDN Web Docs

Thank you so much for your reply.

I’m not 100% convinced this isn’t something I’m doing wrong. However, two things point against that:

None of the code I’ve written depends on the build mode. Production builds work. Development builds fail this way.

The code I included above, which is what is triggering the error, isn’t in any of my sources. It looks like it’s Figma API code that’s setting up the UI iframe. I think the call stack also reinforces this idea. This: window.parent.postMessage(‘$INTERNAL_DO_NOT_USE$RERUN_PLUGIN$’, '')* for example, is definitely not in my source code.

Thanks again. This has been puzzling me for days and I welcome any thoughts.

Unfortunately, I do not know how and what exactly you are doing. Also you didn’t share any sample code. I can only suggest to look at this example plugin and test it:

github.com

Thank you for your reply. Yes, my configuration is based on the webpack-react sample. I did have to add ‘node-polyfill-webpack-plugin’ to the webpack.config.js file.

Unfortunately, sharing code is just not allowed. Not my decision.

It would be nice if someone from Figma could take a look at the onmessage code I posted above and let me know if they recognize it. It’s definitely not part of anything I wrote.

I experienced the same issue. I think it’s due to the size limit of the backend of Figma plugins. Production mode generates a bundle that fits the limit, but the dev mode creates a larger bundle that exceeds the limit.

Reply

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded