Native plugin editor alpha - Bugs & Tips (July 4th, 2025)

[jonah.deleseleuc]

Hi everyone,

I hope everyone is doing alright. I’ve come across some bugs & silent errors in the new plugin editor. Here are some tips I hope can be useful to you.

1. Basic compiling errors don’t show an error message

If you write some code that causes the compiler or transpiler to not work (like a missing or an extra { character) your app preview can become bricked - even the SafeArea at the top of the page will disappear.

And you may find this error in the console:

Inspecting the browser debugger (not bubble’s debugger), you’ll find the code isn’t send to the client side - appearing empty. If any of these things happen, check your code syntax.

2. Spread […] operators in the return statement cause a compiling error

Using a spread operator in the return statement like this:

Causes the same compiling behaviour as we saw above. Bricked app or no code being sent to the client side.

3. Not all gestures are supported

The tap gesture works fine, but trying to configure a Pan gesture (dragging an element around with your finger) does not. Trying to use the default react-native Animated and PanResponder does not work on browser preview or on mobile preview. source code

4. We can’t (yet) install npm packages

In the shared tab, you’ll be prompted to install packages. Don’t believe the hype, it’s not available yet!

5. General gesture bugginess

For whatever reason Reanimated cannot communicate with react-native-gesture-handler. I have a feeling it’s because the relevant Babel plugin isn’t installed, but I can’t confirm it. Regardless, you’ll come across a lot of “Why isn’t this working?” moments when working . My advice is to not develop plugins that rely on gestures yet until the team has a chance to figure this out.

Hope this helps someone

Jonah

[jonah.deleseleuc]

Update (July 8th, 2025):

BUG REPORT

BUG: Writing an async function to instance.data causes catastrophic error on mobile view only (and not on web preview)

Here is a simple component that returns a simple text …

return(<Text>Hello World!</Text>)

This screenshot was taken from the web preview of the app on my computer, as you can see there’s nothing wrong here. This is the same component but viewed on Bubble Go:

As you can see, we get an error message No plugin found. I tried diagnosing the issue in several ways, as it seemed like a problem with bubble not finding the element or there being some sort of permissions issue. Digging a little deeper, I narrowed down the bug and found that the problem would go away when I commented out a function written to props.instance.data .

Steps to reproduce the bug:

1. Write an anonymous async fuction to props.instance.data
   
   
2. Preview the component on Bubble Go
3. You will find the error Plugin not found

Note: Writing a synchronous function the same way would not reproduce the same problem.

I hope this prevents someone digging around like I did

Have a great day,

Update #1 ( a few minutes later)

Following this pattern seems to prevent the issue Just make sure the function appended to instance.data is not async itself.

Update #2 ( another few minutes later)

You can write async code inside this block, but you can’t write anonymous async code. Don’t try to do this: (async () => {})(), it will throw an error. You must write named async functions!

[jonah.deleseleuc]

(July 8th, 2025)

TIP: Do not set useNativeDriver: true

Do not attempt to use the native device driver when using react-native Animate. It will cause animations to fail on mobile preview (but not on web preview).

[jonah.deleseleuc]

(July 8th, 2025)

TIP: Anonymous async functions in regular JS element actions cause code to fail

If you create a regular JS action and place an anonymous async function inside of it, your code inside the action will not run at all. The component will render, but the action will fail everytime.

[nocodeventure]

You’re spot on with everything so far, great work @jonah.deleseleuc

[jonah.deleseleuc]

Thank you that’s really kind. You’ve seen this as well?

[nocodeventure]

Yep, in practice have encountered everything you said so far. Including the pan gesture with a kanban we tried building

[jonah.deleseleuc]

(July 8th, 2025)

TIP: The available libraries JSON isn’t accurate

Some libraries inside the following package.json aren’t actually available: { "@bbob/preset-react": "^4.2.0", "@bbob/react": "^4.2.0", "@expo/metro-runtime": "~4.0.1", "@gorhom/bottom-sheet": "^5.1.2", "@gorhom/portal": "^1.0.14", "@microsoft/react-native-clarity": "^4.2.2", "@react-native-community/audio-toolkit": "^2.0.3", "@react-native-community/datetimepicker": "^8.2.0", "@react-native-community/netinfo": "11.4.1", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/elements": "^2.2.5", "@react-navigation/native": "^7.0.14", "@react-navigation/native-stack": "^7.2.0", "@sentry/react-native": "^6.10.0", "@shopify/flash-list": "1.7.3", "expo": "~52.0.42", "expo-asset": "^11.0.4", "expo-auth-session": "~6.0.2", "expo-blur": "~14.0.3", "expo-clipboard": "~7.0.1", "expo-constants": "^17.0.7", "expo-crypto": "~14.0.2", "expo-document-picker": "~13.0.3", "expo-image": "~2.0.7", "expo-image-picker": "^16.0.6", "expo-linear-gradient": "~14.0.2", "expo-location": "~18.0.9", "expo-media-library": "^17.0.6", "expo-notifications": "~0.29.14", "expo-secure-store": "~14.0.1", "expo-splash-screen": "^0.29.22", "expo-status-bar": "~2.0.1", "expo-updates": "~0.27.4", "expo-video": "~2.0.6", "fast-text-encoding": "^1.0.6", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "~0.77.1", "react-native-fs": "^2.20.0", "react-native-gesture-handler": "~2.22.0", "react-native-localize": "^3.4.1", "react-native-maps": "1.18.0", "react-native-mmkv": "^2.12.2", "react-native-modal-datetime-picker": "^18.0.0", "react-native-reanimated": "~3.17.5", "react-native-redash": "^18.1.1", "react-native-safe-area-context": "~5.1.0", "react-native-screens": "~4.8.0", "react-native-svg": "^15.11.2", "react-native-web": "~0.19.13", "react-native-webview": "~13.13.1" }

Attempting to use react-native-fs returns the error:

[jonah.deleseleuc]

Well, it’s great to hear this because I was worried I might’ve been doing something wrong. If you (or anyone else) finds something not listed here it would be great to share!

[nocodeventure]

react-native-fs is available on the native build I believe.

[jonah.deleseleuc]

That makes sense, but it bricks the entire app if you try calling it on web. Bubble should handle the errors and not crash the entire preview.

[jonah.deleseleuc]

(July 10th, 2025)

Uploading tips: Avoid these mistakes!

Over the past two days I’ve been trying to get uploading working consistently across all platforms. I’ve got it working now, but I came across several roadblocks and learned a lot. I’ll keep this one short and sweet.

• instance.uploadFile only works on web preview, not on mobile.
• • This function expects a File , which we can’t use on mobile. There are libraries you could install to create a File from a local URI - but we can’t install libraries yet. This might work in the future though.
• The old context.uploadContent sort of works, but presents two huge caveats.
• • 1. This function requires you to encode the file as base64. expo-image-picker allows you to request the file as bas64 but the performance hit is quite high.
• • 2. While the function does technically work, as in, it’ll upload the file to your database. However, the callback function containing the uploaded file URL never fires in both the web and mobile previews. This makes this function useless for a production plugin since you would need to look in the file manager to retrieve the URL.
• While react-native-fs is available on mobile, it’s pretty useless for making conversions (to base64 for example) since it uses a lot of memory. Not only is this a potential performance problem, using the function readFile() completely crashes both the app preview and BubbleGo on my mobile device. It seems that this function applies too much pressure on the JS bridge causing it to panic even on modern and fast devices (testing on a Galaxy Z Flip 4)
• While Bubble is using expo, they aren’t exposing expo-file-system unfortunately. This means we need to rely on libraries like expo-image-picker to do all the file processing we need.
• expo-image-picker returns base64 data URLs on web preview and on mobile it returns file URIs: file:////

To reliably upload files, you’re going to have to rely on the https://${APPID}.bubbleapps.io/version-${VERSION}/fileupload endpoint. I didn’t know this before messing around with it here, but it doesn’t only support base64 files - it also supports uploading the file directly using form data!

Here’s a working example:

const formdata = new FormData();
formdata.append("contents", `file://// ...`);
formdata.append("name", "example.png");
formdata.append("private", "true");
formdata.append("attach", bubbleThingUniqueId);

const requestOptions = {
  method: "POST",
  body: formdata,
  redirect: "follow"
};

fetch(`https://${APPID}.bubbleapps.io/version-${VERSION}/fileupload`, requestOptions)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

You won’t be able to tell what the uploading % will be which is a little disappointing but it’s livable. This solution allows uploading base64 data URIs (which are returned on web preview) and mobile file URIs (file:////)

I hope this helps someone avoid the several hours of debugging / investigating I just did

Have a great day,

Jonah

[Cosmic.Steve]

Thank you @jonah.deleseleuc for this thread, it’s helping a lot!
It looks like every plugin developer is stumbling upon the same bugs… Have you found a way to debug on BubbleGO app? Sometimes my plugins are not rendering some elements and I have no idea why.

[jonah.deleseleuc]

You’re welcome!

Are you saying your plugin isn’t rendering or that the whole page isn’t rendering?

[Cosmic.Steve]

I was developing a plugin, and a HTML element inside a webview wasn’t properly rendering on BubbleGO, while it was on the web preview. Turned out as an easy bug, but without an inspection tool or a debugger all the silent errors are almost impossible to spot.