wtulloch / Blazor.IndexedDB

A Blazor library for accessing IndexedDB
MIT License
139 stars 45 forks source link

Could not find 'TimeGhost' in 'window' #14

Open Piercenz opened 4 years ago

Piercenz commented 4 years ago

Firstly, can I say that project is looking awesome, great work!

However I am having a little trouble getting to first base with it...

I'm getting the below error using the library in my app running on Chrome. I also receive this when running the Blazor.IndexedDB.Test sample app. This occurs whenever I try using IndexedDBManager (eg AddRecord)

blazor.webassembly.js:1 WASM: Microsoft.JSInterop.JSException: Could not find 'TimeGhost' in 'window'.

wtulloch commented 4 years ago

I have tested this locally but haven't been able to replicate. I did come across this once before but I can't remember what the cause was. Happy to look at any code you have to see if I can spot the problem.

Piercenz commented 4 years ago

Thanks for the reply. Sorry I'm not sure what information would be helpful, so I've dumped as much as possible: .net Core 3.0.100.14277 SDK .net Core 3.0.0.28113 runtime

I've built a sample Server Side app to try and reproduce.

  1. New Server Side Project

  2. Add your sample services.AddIndexedDB(dbStore => ... section (direct copy and paste from ReadMe.md) to Startup.cs

At this point, running the app gives the error: Some services are not able to be constructed (Error while validating the service descriptor 'ServiceType: TG.Blazor.IndexedDB.IndexedDBManager Lifetime: Singleton ImplementationType: TG.Blazor.IndexedDB.IndexedDBManager': Cannot consume scoped service 'Microsoft.JSInterop.IJSRuntime' from singleton 'TG.Blazor.IndexedDB.IndexedDBManager'.)'

To get around the scope issue, I removed the services.AddIndexedDB call and replaced it with:

var dbStore = new DbStore
            {
                DbName = "TheFactory", //example name
                Version = 1

            };

            dbStore.Stores.Add(new StoreSchema
            {
                Name = "Employees",
                PrimaryKey = new IndexSpec { Name = "id", KeyPath = "id", Auto = true, Unique = true },
                Indexes = new List<IndexSpec>
                    {
                        new IndexSpec{Name="firstName", KeyPath = "firstName", Auto=false},
                        new IndexSpec{Name="lastName", KeyPath = "lastName", Auto=false}

                    }
            });

            dbStore.Stores.Add(new StoreSchema
            {
                Name = "Outbox",
                PrimaryKey = new IndexSpec { Auto = true }
            });

           // options(dbStore);
            services.AddScoped<DbStore>(o => dbStore);
            services.AddScoped<IndexedDBManager, IndexedDBManager>();

At this point the services are successfully registered.

  1. Then calling the below (from the main thread) causes the error:

    await DatabaseAccess.Insert<Employee>(new Employee
            {
                firstName = "My",
                lastName = "NAME"
            },
            "Employees");

    Where Insert is defined as:

    public async Task Insert<T>(T obj, string tableName )
        {
            try
            {
                var newRecord = new StoreRecord<T>
                {
                    Storename = tableName,
                    Data = obj
                };
    
                await _indexedDBManager.AddRecord(newRecord);
    
            }
            catch (Exception ex)
            {
    
                throw ex;
            }
        }

    Running the app now throws the error.

Log output:

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100] Unhandled exception rendering component: Could not find 'TimeGhost' in 'window'. Error: Could not find 'TimeGhost' in 'window'. at https://localhost:5001/_framework/blazor.server.js:8:28065 at Array.forEach () at p (https://localhost:5001/_framework/blazor.server.js:8:28026) at https://localhost:5001/_framework/blazor.server.js:8:28733 at new Promise () at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:8:28707) at https://localhost:5001/_framework/blazor.server.js:1:19148 at Array.forEach () at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:19119) at e.processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:17165) Microsoft.JSInterop.JSException: Could not find 'TimeGhost' in 'window'. Error: Could not find 'TimeGhost' in 'window'. at https://localhost:5001/_framework/blazor.server.js:8:28065 at Array.forEach () at p (https://localhost:5001/_framework/blazor.server.js:8:28026) at https://localhost:5001/_framework/blazor.server.js:8:28733 at new Promise () at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:8:28707) at https://localhost:5001/_framework/blazor.server.js:1:19148 at Array.forEach () at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:19119) at e.processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:17165) at TMCOnline.App.Database.DatabaseAccess.Insert[T](T obj, String tableName) in D:\GIT\TMCOnline\TMCOnline.App.Database\DatabaseAccess.cs:line 41 at TMCOnline.App.Core.Components.LoginModel.Authenticate() in D:\GIT\TMCOnline\TMCOnline.App.Core\Components\LoginModel.cs:line 58 at TMCOnline.App.Core.Components.LoginComponent.b0_5() in D:\GIT\TMCOnline\TMCOnline.App.Core\Components\LoginComponent.razor:line 33 at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle) fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111] Unhandled exception in circuit 'dAzdu46xND-36fSmwSkjEobzJtag6jyDQoKFDWrMqKg'. Microsoft.JSInterop.JSException: Could not find 'TimeGhost' in 'window'. Error: Could not find 'TimeGhost' in 'window'. at https://localhost:5001/_framework/blazor.server.js:8:28065 at Array.forEach () at p (https://localhost:5001/_framework/blazor.server.js:8:28026) at https://localhost:5001/_framework/blazor.server.js:8:28733 at new Promise () at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:8:28707) at https://localhost:5001/_framework/blazor.server.js:1:19148 at Array.forEach () at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:19119) at e.processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:17165) at TMCOnline.App.Database.DatabaseAccess.Insert[T](T obj, String tableName) in D:\GIT\TMCOnline\TMCOnline.App.Database\DatabaseAccess.cs:line 41 at TMCOnline.App.Core.Components.LoginModel.Authenticate() in D:\GIT\TMCOnline\TMCOnline.App.Core\Components\LoginModel.cs:line 58 at TMCOnline.App.Core.Components.LoginComponent.b0_5() in D:\GIT\TMCOnline\TMCOnline.App.Core\Components\LoginComponent.razor:line 33 at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle) info: Microsoft.AspNetCore.Routing.EndpointMiddleware[1] Executed endpoint '/_blazor' info: Microsoft.AspNetCore.Hosting.Diagnostics[2] Request finished in 5075.709400000001ms 101

wtulloch commented 4 years ago

I think the problem is with the fact that you are using server-side Blazor. This doesn't use web assembly and instead pushes the UI changes via SignalR. Given this I suspect that the JS Interop won't work. I will investigate in the next couple of days to confirm

panoukos41 commented 4 years ago

I have been getting this error too in blazor wasm:

image

Edit: After some search it seems blazor wasm will no longer include the static assets by default so now we need to include them ourselves.

Edit 2: Downloading the project, running build on the JS project and getting the produced "indexedDb.Blazor.js" file from the dist folder did the trick. I added it in the wwwroot and added a script tag with src to this js asset.

So the solution @wtulloch for libraries will be to have the produced javascript as a cdn somewhere and tell developers to reference that javascript from their index.html

FANMixco commented 4 years ago

I have been getting this error too in blazor wasm:

image

Edit: After some search it seems blazor wasm will no longer include the static assets by default so now we need to include them ourselves.

Edit 2: Downloading the project, running build on the JS project and getting the produced "indexedDb.Blazor.js" file from the dist folder did the trick. I added it in the wwwroot and added a script tag with src to this js asset.

So the solution @wtulloch for libraries will be to have the produced javascript as a cdn somewhere and tell developers to reference that javascript from their index.html

Hi @panoukos41, could you clarify the first point? Is it anything specific that we need to modify? Since I'm getting the same error.

FANMixco commented 4 years ago

I have been getting this error too in blazor wasm:

image

Edit: After some search it seems blazor wasm will no longer include the static assets by default so now we need to include them ourselves.

Edit 2: Downloading the project, running build on the JS project and getting the produced "indexedDb.Blazor.js" file from the dist folder did the trick. I added it in the wwwroot and added a script tag with src to this js asset.

So the solution @wtulloch for libraries will be to have the produced javascript as a cdn somewhere and tell developers to reference that javascript from their index.html

The second point was the trick!

panoukos41 commented 4 years ago

I have been getting this error too in blazor wasm: image Edit: After some search it seems blazor wasm will no longer include the static assets by default so now we need to include them ourselves. Edit 2: Downloading the project, running build on the JS project and getting the produced "indexedDb.Blazor.js" file from the dist folder did the trick. I added it in the wwwroot and added a script tag with src to this js asset. So the solution @wtulloch for libraries will be to have the produced javascript as a cdn somewhere and tell developers to reference that javascript from their index.html

The second point was the trick!

Hey so you got it working too? Even tho the readme.md has been updated and adding the provided script should work now havent tried it yet :D

wtulloch commented 4 years ago

Hi all, Sorry for the late reply. You need to make sure you are using the latest version of the package 1.5.0-preview. This has been updated to work with the new way Blazor is handling static resources. In addition to the using the updated library you will need to add the following to your index.html below the blazor js file declaration: <script src="_content/TG.Blazor.IndexedDB/indexedDb.Blazor.js"></script>

If this is still causing an issue please let me know.

Cheers, Bill

bzhtapp commented 4 years ago

Hi William, I downloaded your source code and got it working with the Blazor WebAssembly 3.2 Client with Progressive Web App option. Thanks, this is a good product.

Btw, I updated Microsoft.AspNetCore.Components packages to 3.1.4 in your TG.Balzor.IndexedDB to get it working. Can I upload the changes for your review and then get it uploaded to Nuget?

wtulloch commented 4 years ago

Re: updates, sure thing. Push it up as a PR and I will review and move into master. Thanks a lot for that, have been a little distracted of late.

Cheers, William

bzhtapp commented 4 years ago

Hi William, I just submitted the PR. Thanks.

btw, I can't find TG.Blazor.IndexedDB assembly on Nuget. Thoughts?

On Thu, Jun 4, 2020 at 5:06 AM William Tulloch notifications@github.com wrote:

Re: updates, sure thing. Push it up as a PR and I will review and move into master. Thanks a lot for that, have been a little distracted of late.

Cheers, William

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/wtulloch/Blazor.IndexedDB/issues/14#issuecomment-638721052, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFBJKT666SSK7VXJWVQONQTRU5P23ANCNFSM4I7HORPQ .

centrolutions commented 4 years ago

Hi William, I just submitted the PR. Thanks. btw, I can't find TG.Blazor.IndexedDB assembly on Nuget. Thoughts? On Thu, Jun 4, 2020 at 5:06 AM William Tulloch @.***> wrote: Re: updates, sure thing. Push it up as a PR and I will review and move into master. Thanks a lot for that, have been a little distracted of late. Cheers, William — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFBJKT666SSK7VXJWVQONQTRU5P23ANCNFSM4I7HORPQ .

You have to enable pre-releases to see the nuget package.

anujagilelancer commented 4 years ago

Hi William

I have used TG.Blazor.IndexedDB in Blazor Web assembly PWA Project How should i add new columns into existing store where I have existing previous version indexdDB Database

Please Suggest Its very Important. To Upgrade Old version IndexdDB, and if No Version is there Then install New fresh DB

Thanks Anuj