未定义导出功能。包裹/浏览

发布于 2025-02-10 10:55:21 字数 1035 浏览 0 评论 0原文

当我使用Bundler将JS浏览器兼容时，我的导出功能不会导出。

错误：（索引）：11未介绍的TypeError：连接不是函数访问htmlbuttonelement.onclick（（（索引）：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相同的根文件与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>

请并启动本地服务器。还尝试了浏览并遇到了同样的问题。

原文

When I use a bundler to make my JS browser compatible my exported functions are not exported.

Error: (index):11 Uncaught TypeError: connect is not a function
at HTMLButtonElement.onclick ((index):11:46)

index.js (Same root file as 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 (Same root file as 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>

Using parcel, which auto creates a dist file and starts a local server.
Also tried browserify and had same issue.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瀟灑尐姊 2025-02-17 10:55:21

包裹支持脚本标签/类型模块的元素。

此代码对我有用，但是Window.Eterum不确定，它与MetAmask NO有关吗？

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,
};

Parcel supports script tag/elements of type module.

This code works for me but window.ethereum is undefined, it's related to MetaMask no?

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 原文

情仇皆在手 2025-02-17 10:55:21

这是一篇古老的帖子，但我在这里写信我刚才发现的解决方案，以防任何人都想避免几天的绝望和毫无结果的搜索，

我正在尝试与您所做的相同的事情，但在搜索“如何访问”之后由包裹捆绑的功能“而不是如何导出它们，我发现在另一个问题中，这个解决方案。

主要的事情是将您想要的任何东西都附加到窗口对象。因此，代替模块。exports，导出默认值，...以及所有这些东西，只需：

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

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

window.connect = connect

运行包裹以捆绑它，而从任何其他脚本中都可以调用

window.connect()

，或者只是

connect()

在我的情况下，我试图使用

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

Run Run Parcel合作，以使Bundle bundle从任何脚本中使用该

window.animate()

功能只是

animate()

它并不是完全导出功能，但是您可以在需要的任何地方访问它们。如果有人找到一种实际访问包裹中出口功能的方法，请分享

This is an old post but I'm writing here the solution I just found, in case anyone wants to avoid a few days of desperate and fruitless searching

I was trying the same things you did and nothing worked, but after searching "how to access functions bundled by parcel" instead of how to export them, I found this solution in another SO question.

The main thing is attaching anything you want to the window object. So instead of module.exports, exports defaults, ... and all that stuff, just do:

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

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

window.connect = connect

run parcel to bundle it and from any other script just call

window.connect()

or just

connect()

In my case, I was trying to use https://motion.dev in a SSR website and it also worked with ES6 imports

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

run parcel to make a bundle use the function from whatever script as

window.animate()

or just

animate()

It's not exactly exporting the functions but you get to access them from wherever you need. If anyone finds a way to actually access exported functions from parcel please share it

回复收藏 0 原文

~没有更多了~