Exclude ObjectBox for Flutter Web

[DieGlueckswurst]

Basic info (please complete the following information):

• ObjectBox version: [latest]
• Flutter/Dart SDK: [latest]
• Null-safety enabled: [yes]
• Reproducibility: [always]
• OS: [macOs BigSur]
• Device/Emulator: [Chrome]

• Flutter doctor:

[✓] Flutter (Channel stable, 2.2.2, on macOS 11.2.3 20D91 darwin-x64, locale de-DE)
• Flutter version 2.2.2 at /Users/christiankonnerth/development/flutter
• Framework revision d79295af24 (5 weeks ago), 2021-06-11 08:56:01 -0700
• Engine revision 91c9fc8fe0
• Dart version 2.13.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/christiankonnerth/Library/Android/sdk
• Platform android-30, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5, Build version 12E262
• CocoaPods version 1.10.1

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] Connected device (2 available)
• sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)
• Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114

• No issues found!

Steps to reproduce

I have an existing mobile app and want to migrate it to web. I understand that ObjectBox is not supported. Because of this I tried running the app without using any extra dependencies. I am simply trying to show a simple screen:

class WebTestPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text('Mom, I did it'), ), ); } }

I still have all my dependencies in my pubsec.yaml file, but that shouldn't be a problem right?

It is working fine on a mobile device but on Chrome I get these 100000 lines of error which all look like this:

Try removing the 'external' keyword or adding a JS interop annotation. external ffi.Pointer<OBX_id_array> removals; ^

../../flutter/.pub-cache/hosted/pub.dartlang.org/objectbox-1.1.0/lib/src/native/bindings/objectbox-c.dart:6289:41: Error: Only JS interop members may be 'external'. Try removing the 'external' keyword or adding a JS interop annotation. external ffi.Pointer<OBX_sync_change> list; ^

../../flutter/.pub-cache/hosted/pub.dartlang.org/objectbox-1.1.0/lib/src/native/bindings/objectbox-c.dart:6292:16: Error: Only JS interop members may be 'external'. Try removing the 'external' keyword or adding a JS interop annotation. external int count; ^

What is the reason for this and is there a way to fix this?

[vaind]

I still have all my dependencies in my pubsec.yaml file, but that shouldn't be a problem right?

Actually it is - you can't build your app for the web with packages that don't support web. For the (future) web support, you can follow issue #185

[DieGlueckswurst]

@vaind oh damn. So is there a way to exclude that dependency for web?? Or is there any workaround for this for now? Couldn't find anything on this

[vaind]

Not sure why you're trying to import it but well...

You could try checking out this repository and switching the export in objectbox/lib/src/store.dart - currently it intentionally "breaks" the web build by not having the switch (otherwise pub.dev would show the package as supporting web, which isn't true yet). So - uncomment line 3, comment out line 5 - then you can try pointing your app to your local checkout via dependency_overrides with path.

Mind you, it's still not going to make the package support web of course, you might just be able to build the app even if you depend on objectbox. Though you must not use any objectbox calls anyway, as those are not available for web.

[DieGlueckswurst]

@vaind i need to import it for my mobile apps. I would like to have one codebase for both web and mobile. But on web I only need a small part of the app, excluding ObjectBox. Does that make sense?

[vaind]

I guess I would have gone for multiple packages then. But if you want to keep it in a single one, it should be doable with what I've described above. Plus you'd need the same conditional imports, as done in the mentioned store.dart so you don't do ObjectBox operations in the web app, i.e. flutter must not even try to import files that use objectbox.

Actually, with that conditional import it should even work with the released objectbox package, no changes needed. Something like this:

import 'myapp/sources-that-use-objectbox.dart' if (dart.library.html) 'myapp/sources-that-dont-use-objectbox.dart';

[vaind]

Seems answered? Feel free to reopen if it's not.

[tneotia]

I'll be honest, this was way too much work required to get everything to work in one codebase. It would have been nice if there were "dummy" models for things like Query or Box included in the web directory rather than an empty file, because simply uncommenting the line @vaind suggested would cause a ton of build errors.

For anyone else stuck on this, you can see how I enabled Web here: BlueBubblesApp/bluebubbles-app@0373291

Conditional imports and dummy models are your friends.

[parmeetmaster]

Please make it like generator own manage this

[greenrobot-team]

@parmeetmaster I don't follow. Can you explain how this relates to this issue?

[greenrobot-team]

As issues with the current approach came up again: see continued discussion in #697