0

我正在开发一个 .Net5 Blazor 服务器应用程序，我正在尝试导入Selecto。进入 JavaScript。

按照 Selecto GitRepo 中的示例，我创建了一个名为 DesignerHelper.js 的 Javascript 文件并将其放在 wwwroot 文件夹中。它包含以下 javascript。

import Selecto from 'https://daybrush.com/selecto/release/latest/dist/selecto.min.js';

const selecto1 = new Selecto({
    // The container to add a selection element
    container: ".selecto-area",
    // Selecto's root container (No transformed container. (default: null)
    rootContainer: null,
    // The area to drag selection element (default: container)
    dragContainer: Element,
    // Targets to select. You can register a queryselector or an Element.
    selectableTargets: [".zone", document.querySelector(".zone")],
    // Whether to select by click (default: true)
    selectByClick: true,
    // Whether to select from the target inside (default: true)
    selectFromInside: true,
    // After the select, whether to select the next target with the selected target (deselected if the target is selected again).
    continueSelect: false,
    // Determines which key to continue selecting the next target via keydown and keyup.
    toggleContinueSelect: "shift",
    // The container for keydown and keyup events
    keyContainer: window,
    // The rate at which the target overlaps the drag area to be selected. (default: 100)
    hitRate: 100,
});

selecto1.on("select", e => {
    e.added.forEach(el => {
        el.classList.add("selected");
    });
    e.removed.forEach(el => {
        el.classList.remove("selected");
    });
});

我将以下代码隐藏文件添加到标准 Blazor 模板的索引文件中。

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.Threading.Tasks;

namespace WebApplication4.Pages
{
    public partial class Index
    {

        [Inject]
        public IJSRuntime? _jsRuntime { get; set; }
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            var _module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./designerHelper.js");
        }
    }
}

当我运行该应用程序时，我收到以下错误。

错误：Microsoft.JSInterop.JSException：请求的模块“https://daybrush.com/selecto/release/latest/dist/selecto.min.js”不提供名为“default”的导出语法错误：请求的模块“https” ://daybrush.com/selecto/release/latest/dist/selecto.min.js' 没有在 Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[ ] args) 在 C:\Users\johnk\source\repos\WebApplication4\Pages\Index.razor.cs 中的 WebApplication4.Pages.Index.OnAfterRenderAsync(Boolean firstRender)：Microsoft.AspNetCore.Components.RenderTree.Renderer 的第 14 行。 GetErrorHandledTask(任务taskToHandle)

当我查看 Selecto 的 Selecto.tsx 源代码时，它们确实提供了默认导出。

import SelectoManager from "./SelectoManager";

class Selecto extends SelectoManager {

}
export default Selecto;

我还尝试了以下导入...

import { Selecto } from 'https://daybrush.com/selecto/release/latest/dist/selecto.min.js';

但是错误如下，在这种情况下，我认为这是正确的；

请求的模块“https://daybrush.com/selecto/release/latest/dist/selecto.min.js”不提供名为“Selecto”的导出

我错过了什么？为什么 Microsoft.JSInterop.JSException 没有从 Selecto 参考中找到默认导出？

4

0 回答 0