Skip to main content
Question

Uncaught SyntaxError when doing a development build

Edmund_Gauci

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 = []\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>

This topic has been closed for comments

5 replies

tank666
  • tank666
  • 4863 replies
  • March 15, 2023
MDN Web Docs
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Edmund_Gauci

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.

tank666
  • tank666
  • 4863 replies
  • March 15, 2023

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
UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Edmund_Gauci
1 person likes this
  • Edmund_Gauci
    Edmund_Gauci
Edmund_Gauci

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.

T

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.

Edmund_Gauci
1 person likes this
  • Edmund_Gauci
    Edmund_Gauci
Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings