search

PavelLaptev / JSON-to-Figma

An easy way to populate Figma layers with JSON
MIT License
142 stars 40 forks source link

images failing to load #20

Closed charliesneath closed 3 years ago

charliesneath commented 3 years ago

I'm seeing the following error in the Figma console when trying to load an image with the plugin. This feature worked a few days ago.

FYI I changed my image URL to image-url

fetchImagefromURL.tsx:3 GET https://cors-anywhere.herokuapp.com/image-url 403 (Forbidden)
fetchImagefromURL @ fetchImagefromURL.tsx:3
MsgListener @ App.tsx:14
postMessage (async)
postMessageToIframe @ figma_app.d568e097c290c2c6b1a02f4393192d0c.min.js.br:1251
(anonymous) @ figma_app.d568e097c290c2c6b1a02f4393192d0c.min.js.br:1258
e.invokeCallback @ figma_app.d568e097c290c2c6b1a02f4393192d0c.min.js.br:776
ASM_CONSTS @ jsvm-cpp.js.br:8
_emscripten_asm_const_iii @ jsvm-cpp.js.br:8
(anonymous) @ jsvm-cpp.wasm:0x7035
(anonymous) @ jsvm-cpp.wasm:0x4fbb
(anonymous) @ jsvm-cpp.wasm:0x10fdf
(anonymous) @ jsvm-cpp.wasm:0x12c71
(anonymous) @ jsvm-cpp.wasm:0x1422a
(anonymous) @ jsvm-cpp.wasm:0x83894
(anonymous) @ jsvm-cpp.wasm:0x10fdf
(anonymous) @ jsvm-cpp.wasm:0x12c71
(anonymous) @ jsvm-cpp.wasm:0x1422a
(anonymous) @ jsvm-cpp.wasm:0x140b0
(anonymous) @ jsvm-cpp.wasm:0x140b0
(anonymous) @ jsvm-cpp.wasm:0x33702
(anonymous) @ jsvm-cpp.wasm:0x69d7
jsvm_callFunction @ jsvm-cpp.wasm:0x81cf
Module._jsvm_callFunction @ jsvm-cpp.js.br:8
callFunction @ figma_app.d568e097c290c2c6b1a02f4393192d0c.min.js.br:776
callFunction @ figma_app.d568e097c290c2c6b1a02f4393192d0c.min.js.br:779
iframeMessageHandler @ figma_app.d568e097c290c2c6b1a02f4393192d0c.min.js.br:1258
windowMessageEventListener @ figma_app.d568e097c290c2c6b1a02f4393192d0c.min.js.br:1251
p @ vendor.1238b887754a64878f02249c8334814f.min.js.br:183
postMessage (async)
messageHandler @ plugin-sandbox:16
postMessage (async)
handleClick @ index.tsx:11
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306
executeDispatch @ react-dom.development.js:389
executeDispatchesInOrder @ react-dom.development.js:414
executeDispatchesAndRelease @ react-dom.development.js:3278
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287
forEachAccumulated @ react-dom.development.js:3259
runEventsInBatch @ react-dom.development.js:3304
runExtractedPluginEventsInBatch @ react-dom.development.js:3514
handleTopLevel @ react-dom.development.js:3558
batchedEventUpdates$1 @ react-dom.development.js:21871
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
vendor.1238b887754a64878f02249c8334814f.min.js.br:152 Error: in createImage: Image type is unsupported
    at <anonymous> (PLUGIN_3_SOURCE:594)
charliesneath commented 3 years ago

I found this information that seems to relate to the issue. I noticed that the Figma example plugin does include this CORS proxy, which is likely causing the 403.

Maybe it's just a matter of removing that part of the URL when fetching images?

https://github.com/Rob--W/cors-anywhere/issues/301

PavelLaptev commented 3 years ago

@charliesneath thank you for reporting. I created a private Heroku server. Should work now. Could you check please?