Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Could not find 'BlazorExtensions.Canvas2d.add' ('BlazorExtensions' was undefined) #112

Open
DerekR15 opened this issue Jul 24, 2021 · 5 comments
Open

Could not find 'BlazorExtensions.Canvas2d.add' ('BlazorExtensions' was undefined) #112

DerekR15 opened this issue Jul 24, 2021 · 5 comments

Comments

@DerekR15
Copy link

I followed the steps in the ReadMe to create a 2D canvas component. However, when I run my application on localhost using IIS, I get the following error in the console:

Could not find 'BlazorExtensions.Canvas2d.add' ('BlazorExtensions' was undefined)

I've added usings everywhere I'm supposed to, and Googling this issue turned up just about nothing, so I'm not sure what else to try. Any help would be appreciated.
@pdavis68
Copy link

Sorry to be late to the party. I ran into this same issue. The fix was to add this to my index.html. Hope it helps.

<script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>

@wvdvegt
Copy link

wvdvegt commented Jan 4, 2023

Even it you do add the script to a client's project's index.html it only seems to work properly if the server project also has the Blazor.Extensions.Canvas installed.

If not, drawing will result in faults until the browser is refreshed.

@MowedMeadow
Copy link

<script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>

Fixed it for me, thanks !

@mwsaari
Copy link

mwsaari commented Jun 11, 2023 •
edited
Loading

Hey I'm also getting this error. I already have
<script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
In my index.html though. And added following to my _Imports.razor
@using Blazor.Extensions @using Blazor.Extensions.Canvas @using Blazor.Extensions.Canvas.Canvas2D

The only thing I'm doing in the canvas is using DrawImageAsync in order to add an image.

I retried thing about 100 times and rebuilding and it didn't work. I'd given up but after few days came back and it was just working. So clearly something was just stale.

@IlyaNavodkin
Copy link

Hello everyone, I encountered the same problem.
Here is information about my project.

image
image

My csproj:

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
	  <PackageReference Include="Blazor.Extensions.Canvas" Version="1.1.1" />
    <PackageReference Include="BlazorPanzoom" Version="0.2.1" />
    <PackageReference Include="Newtonsoft.Json" Version="13.0.2" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\..\..\libs\BIDTP.Dotnet.Core\BIDTP.Dotnet.Core.csproj" />
    <ProjectReference Include="..\..\Modules\Example.Schemas\Example.Schemas.csproj" />
  </ItemGroup>

</Project>

My _Host.cshtml:

@page "/"
@namespace Example.Client.Blazor.Pages

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorCanvasApp</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
    <script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>

    <script>
        function getDivCanvasOffsets(el) {
            var obj = {};
            obj.offsetLeft = el.offsetLeft;
            obj.offsetTop = el.offsetTop;
            return JSON.stringify(obj);
        }
    </script>
</body>
</html>

App.razor:


<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

I would be grateful to understand what's wrong, what I'm doing wrong

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@wvdvegt @pdavis68 @mwsaari @MowedMeadow @DerekR15 @IlyaNavodkin