Using BeSql Client Side Only - SqlLite Exception Thrown

[andrewwilkin]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

I've followed the steps outlined in the demo for BeSql, though am using alongside the template for individual accounts.

Upon running my project it falls over client side. I do have added the javascript reference, and can see the browser has downloaded it.

I've recreated this on an empty project to demo.

Expected Behavior

Start app, navigate to counter page and should not throw any exceptions.

Steps To Reproduce

Repro created in new project here: https://github.com/andrewwilkin/BeSqlTest

Start up the app, and head to the counter page.

Exceptions (if any)

Error: One or more errors occurred. (The type initializer for 'Microsoft.Data.Sqlite.SqliteConnection' threw an exception.) at Jn (https://localhost:7156/_framework/dotnet.runtime.8.0.1.nkaj86rpbv.js:3:31614) at Ul (https://localhost:7156/_framework/dotnet.runtime.8.0.1.nkaj86rpbv.js:3:181904) at wasm://wasm/00b1ee2e:wasm-function[350]:0x1facb at wasm://wasm/00b1ee2e:wasm-function[246]:0x1bf8c at wasm://wasm/00b1ee2e:wasm-function[239]:0xf173 at wasm://wasm/00b1ee2e:wasm-function[307]:0x1e7e5 at wasm://wasm/00b1ee2e:wasm-function[328]:0x1efdb at wasm://wasm/00b1ee2e:wasm-function[218]:0xcfed at wasm://wasm/00b1ee2e:wasm-function[774]:0x44108 at e. (https://localhost:7156/_framework/dotnet.runtime.8.0.1.nkaj86rpbv.js:3:214976) {superStack: {…}, stack: Accessor, message: "One or more errors occurred. (The type initializer…ata.Sqlite.SqliteConnection' threw an exception.)", Symbol(wasm js_owned_gc_handle): 54}

.NET Version

8.0.101

Anything else?

No response

[ysmoradi]

Thanks for contacting us. We're investigating this issue. We'll let you know if it's possible to work on this issue.

[ysmoradi]

I checked the project and it seems that even the Besql package is not installed in it! Are you sure you have committed the latest changes? I suggest that you first build your project based on this video and make sure that everything works, then try to apply it to a different project structure. If you complete your project, I can probably answer the problem on it.

[andrewwilkin]

@ysmoradi so sorry, didn't commit and push (have done that now).

[ysmoradi]

I see no migrations! have you tried dotnet ef migrations add or something like that?

[ysmoradi]

[ysmoradi]

Anyway, in your project, you're not using blazor webassembly, so what would be a benefit of Besql in this sample? Your project won't be able to operate offline due the lack of PWA and service worker. I'd highly recommend you to watch these two videos: https://youtu.be/ClpMKUboJmA https://youtu.be/Y4MTtF1XMfM

[andrewwilkin]

Sorry Rider hadn't added the migrations to the commit, have added and pushed that now 🙈

This is a rewrite of a .NET 6 Blazor WASM project, it's a very data heavy application and the data can be reused between screens. I made use of an in memory cache and data structure to prevent needing to refetch the data.

My hope, perhaps crazy, is to utilise SQL Lite on the client, move more logic into repository pattern using EF Core, and interceptors to pull down missing data from the server using gRPC. There will be pages that make use of web assembly rendering mode.

If I can get that working then PWA is something I'll look at potentially later.

[ysmoradi]

I see, hope we can improve it. I'll have a look the project again right after my meeting.

[ysmoradi]

I know you need db context for your client side webassembly, but at least in development, you need to make that work in your server side too, because it providers better Developer experience if you compare it with blazor webassembly. That's why Besql works fine in both blazor server, ssr and webassembly (And also maui hybrid) So, you need to add this code to Program.cs of your server project too.

https://github.com/bitfoundation/bitplatform-samples/blob/main/videos/Bit.Besql/Bit.Besql.Sample/Program.cs#L40-L49

// To Create database and apply migrations
await using (var scope = app.Services.CreateAsyncScope())
{
    // Create db context
    await using var dbContext = await scope.ServiceProvider
        .GetRequiredService<IDbContextFactory<OfflineDbContext>>()
        .CreateDbContextAsync();

    // migrate database
    await dbContext.Database.MigrateAsync();
}

[ysmoradi]

Note that I deleted and added migrations to make sure everything is right, because InitialMigration.Designer.cs wasn't pushed to the repository. Let me know about the results.

[andrewwilkin]

Tried that, however I still get the same error on the client side when navigating to the counter component. I'm wondering whether this is somehow a clash with the default templates SqlLite usage for Identity services. Cloned your demo project and that works fine.

As an aside, in production really wouldn't want the OfflineDb on the server side as it will be specific to each user.

[ysmoradi]

Yes, using sqlite database of that offline dbContext in server side & at production doesn't make sense at all. You just need to make sure that every page that is leveraging dbContext, is developed in client project and then you're good to go, so don't worry about that. You're using this approach just to make your development experience better.

[ysmoradi]

I did two things: 1- Add some lines to the Program.cs of server project. 2- Deleted and added migrations again And everything is working now. Modified project BeSqlTest.zip

[ysmoradi]

You can also give our Boilerplate project template a try, it integrates ASP.NET Core Identity with JWT + EF Core for both server and client side + PWA and lots of other cool features. https://www.youtube.com/watch?v=ReS5mHLOa3Q&list=PLKG2Zun6HtHjn9PjM7w0IsTc40PTZD4hj

[andrewwilkin]

Just downloaded the zip file and tried it, and crashes with the same error 😭

Will try (next weekend) on Windows rather than my Mac as well as checking out the template. Thanks for your time looking into this.

Side note: Running on an M2 (Apple Silicon)

[ysmoradi]

Keep me posted then! I'm here to help. I downloaded my code and it works (":

[andrewwilkin]

No joy 🥲

Tried on an Intel Mac and a Windows 10 machine, same error. Will look at it more next weekend and try your template, not ready to give just yet.

[andrewwilkin]

Spent several hours looking into this, and can reproduce the same issue using the demo for Besql by setting the rendermode in Weather.razor.cs:

@page "/weather"
@rendermode InteractiveWebAssembly

So I suspect the issue is happening whenever it is using WASM and SQlite. Digging deeper, the underlying issue is that the browser is not loading the dll.

System.TypeInitializationException: The type initializer for 'Microsoft.Data.Sqlite.SqliteConnection' threw an exception. ---> System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation. ---> System.DllNotFoundException: e_sqlite3

Not had any success in ensuring it is downloaded to the browser, even though it is there (grep in Demo Client Project folder:

./obj/Debug/net8.0/webcil/SQLitePCLRaw.provider.e_sqlite3.wasm
./obj/Debug/net8.0/tmp-webcil/SQLitePCLRaw.provider.e_sqlite3.wasm
./bin/Debug/net8.0/e_sqlite3.a
./bin/Debug/net8.0/wwwroot/_framework/e_sqlite3.a
./bin/Debug/net8.0/wwwroot/_framework/e_sqlite3.a.gz
./bin/Debug/net8.0/wwwroot/_framework/SQLitePCLRaw.provider.e_sqlite3.wasm.gz
./bin/Debug/net8.0/wwwroot/_framework/SQLitePCLRaw.provider.e_sqlite3.wasm
./bin/Debug/net8.0/SQLitePCLRaw.provider.e_sqlite3.dll

[ysmoradi]

Could you please install the followings?

dotnet workload install wasm-tools wasm-experimental

[andrewwilkin]

Thanks @ysmoradi that fixed it after cleaning the solution and rebuilding.

[waleed-alharthi]

Could you please install the followings?

dotnet workload install wasm-tools wasm-experimental

This definitely helped, then it broke with a VS update.

For any lost souls out there; what helped was re-running the same command:

dotnet workload install wasm-tools wasm-experimental

Then:

• Restart VS
• Clean
• Rebuild