无法导入第 3 方 JavaScript 模块

Question

我正在尝试使用非常简单的设置将第 3 方 SDK 导入到一个简单的项目中。 我有一个 index.html 文件，如下所示：

<!DOCTYPE html>
<html lang="en-us">
  <body>
    <h1>SDK Test</h1>
    <script type="module" src="/js/main.js"></script>
  </body>
</html>

我有一个 main.js 文件，如下所示：

import MyAlgoConnect from '/@randlabs/myalgo-connect';
console.log("It Worked!");

我在 Apache 服务器上运行的项目中也有 @randlabs 目录，因此在 Apache 的 htdocs 目录中，它看起来像这样：

但是我的浏览器控制台总是出现错误，提示：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

我最初尝试在 index.html 文件中使用<script src="/js/main.js"></script> ，但返回错误：

Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:3:1)

myalgo-connect 文件夹中有一大堆不同的文件和其他文件夹，所以当我尝试在我的浏览器中访问位于127.0.0.1:8080/@randlabs/myalgo-connect的本地 apache 服务器时，它只返回一个 html 文档显示文件夹的内容，这就是为什么我认为我首先遇到错误的原因。

根据 SDK 的文档，我想我完全按照其快速启动步骤操作： https://connect.myalgo.com/docs/getting-started/quickstart

几天来我一直在 inte.net 上搜索，试图弄清楚为什么我不能让它工作。 我还在关联的 discord 服务器上问了一个问题，但没有得到回应。 我在 web 开发方面的经验非常有限，所以这可能只是我经验不足的问题，但我无法弄清楚我做错了什么。 如果有人能对此有所了解，我将不胜感激！

Answer 1

import MyAlgoConnect from '/@randlabs/myalgo-connect';

尝试将导入替换为

import MyAlgoConnect from '@randlabs/myalgo-connect';

Answer 2

我建议设置基本节点处理器，然后将应用程序编译成 js 文件。

https://vuejs.org/guide/quick-start.html

https://reactjs.org/docs/create-a-new-react-app.html

https://nextjs.org/docs/getting-started

我还建议设置 TypeScript，因为它对数据类型和建议有很大帮助。

这是如何使用 Randlabs（React）的 MyAlgoConnect 的示例： https://github.com/Diatomix/Diatomix-frontend/blob/dff9a531ceac4341a3780c004f2bc2206b255ed4/src/components/Authenticate.tsx#L163

如何将 Algorand 与 Vue.js 一起使用的示例： https://github.com/scholtz/wallet