未定义导出函数。包裹/浏览器

问题描述 投票:0回答:2

当我使用捆绑器使我的 JS 浏览器兼容时,我导出的函数不会导出。

错误:(索引):11 未捕获类型错误:连接不是函数 在 HTMLButtonElement.onclick ((index):11:46)

index.js(与index.html相同的根文件)

const {ethers} = require("ethers");

async function connect() {
    if (typeof window.ethereum !== 'undefined') {
        await ethereum.request({method: "eth_requestAccounts"});
      }
  }

  module.exports = {
    connect
  }

index.html(与index.js相同的根文件)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <script src="./index.js" type="module"></script>  
  </head>
  <body>
    <button id="connect" onclick="connect()">   Connect  </button>

  </body>

</html>

使用parcel,它会自动创建一个dist文件并启动本地服务器。 也尝试过 browserify 并遇到了同样的问题。

javascript module export browserify parcel
2个回答
0
投票

Parcel 支持脚本标签/模块类型元素。

这段代码对我有用,但 window.ethereum 未定义,它与 MetaMask 没有相关吗?

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML 5 Boilerplate</title>
  </head>
  <body>
    <button id="connect">Connect</button>

    <script type="module">
      //Import your module
      import something from "./index.js";

      //Assign event listener to button
      document
        .getElementById("connect")
        .addEventListener("click", function (event) {
          something.connect();
        });
      console.log("something", something);
      /* JavaScript module code here */
    </script>
  </body>
</html>

index.js

const { ethers } = require("ethers");

async function connect() {
  console.log("Inside connect function");
  console.log("window.etherum", window.ethereum);
  console.log("ethers", ethers);
  if (typeof window.ethereum !== "undefined") {
    await ethereum.request({ method: "eth_requestAccounts" });
  }
}

module.exports = {
  connect,
};

0
投票

这是一篇旧帖子,但我在这里写下我刚刚找到的解决方案,以防有人想避免几天绝望而无果的搜索

我正在尝试与您所做的相同的事情,但没有任何效果,但是在搜索“如何访问包裹捆绑的功能”而不是如何导出它们之后,我在另一个SO问题中找到了这个解决方案

最主要的是将任何你想要的东西附加到窗口对象上。因此,不要使用 module.exports、exports defaults 等等,只需执行以下操作即可:

const {ethers} = require("ethers");

async function connect() {
    if (typeof window.ethereum !== 'undefined') {
        await ethereum.request({method: "eth_requestAccounts"});
      }
  }

window.connect = connect

运行 Parcel 来捆绑它,然后从任何其他脚本中调用即可

window.connect()

就我而言,我尝试在 SSR 网站中使用 https://motion.dev,它也适用于 ES6 导入

import { animate } from "motion"
window.animate = animate

运行 Parcel 使捆绑包使用任何脚本中的函数

window.animate()

它并不完全导出功能,但您可以从任何需要的地方访问它们。如果有人找到了实际访问包裹导出功能的方法,请分享

© www.soinside.com 2019 - 2024. All rights reserved.