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

浏览器报：Uncaught (in promise) ReferenceError: initWidget is not defined at autoload.js:36:3 #176

Open
x3fang opened this issue Jan 1, 2025 · 10 comments
Open

浏览器报：Uncaught (in promise) ReferenceError: initWidget is not defined at autoload.js:36:3 #176

x3fang opened this issue Jan 1, 2025 · 10 comments

Comments

@x3fang
Copy link

x3fang commented Jan 1, 2025

image
我所做的操作是将 'live2d_path' 改为我本地的资源路径
@stevenjoezhang
Copy link
Owner

可以提供你的网站地址吗？看图片比较难定位问题的具体原因

@sky22333
Copy link

可以提供你的网站地址吗？看图片比较难定位问题的具体原因

同样报错，也是本地运行的，感谢大佬帮忙看看

文件结构：

├── index.html
└── dist/
    ├── autoload.js
    ├── waifu.css
    ├── live2d.min.js
    ├── waifu-tips.js
    └── waifu-tips.json

autoload.js文件

// live2d_path 参数建议使用绝对路径
const live2d_path = "./dist/";
//const live2d_path = "/live2d-widget/";

// 封装异步加载资源的方法
function loadExternalResource(url, type) {
	return new Promise((resolve, reject) => {
		let tag;

		if (type === "css") {
			tag = document.createElement("link");
			tag.rel = "stylesheet";
			tag.href = url;
		}
		else if (type === "js") {
			tag = document.createElement("script");
			tag.src = url;
		}
		if (tag) {
			tag.onload = () => resolve(url);
			tag.onerror = () => reject(url);
			document.head.appendChild(tag);
		}
	});
}

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
	Promise.all([
		loadExternalResource(live2d_path + "waifu.css", "css"),
		loadExternalResource(live2d_path + "live2d.min.js", "js"),
		loadExternalResource(live2d_path + "waifu-tips.js", "js")
	]).then(() => {
		// 配置选项的具体用法见 README.md
		initWidget({
			waifuPath: live2d_path + "waifu-tips.json",
			//apiPath: "https://live2d.fghrsh.net/api/",
			//cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
			tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
		});
	});
}

前端文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live2D 看板娘示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

<body>
    <h1>Live2D 看板娘演示</h1>
    <p>这是一个 Live2D 看板娘的演示页面。</p>

    <!-- 加载本地 autoload.js -->
    <script src="./dist/autoload.js"></script>
</body>
</html>

浏览器报错信息：
image

报错的代码是这里：

		// 配置选项的具体用法见 README.md
		initWidget({❌

@panedioic
Copy link

同样遇到问题，已经解决。

我的解决方法是在根目录下的 rollup.config.js 的第 37 行左右，将 input 项修改为 build/waifu-tips.js 即可解决。

改完后：

export default {
  input: 'build/waifu-tips.js',
  output: {
    name: 'live2d_widget',
    file: 'dist/waifu-tips.js',
    format: 'iife',
  },
  plugins: [
    nodeResolve(),
    string({
      include: '**/*.svg',
    }),
    terser(),
  ],
  context: 'this',
};

@whitebear13579
Copy link

@panedioic 你好，我目前也遇到了類似了，但照著你的方法將input項改為build/waifu-tips.js依然會報此問題耶

@panedioic
Copy link

@whitebear13579 你也是 initWidget is not defined 吗？修改后 npm run build 然后在浏览器刷新一下缓存试试？或者在 build/waifu-tips.js里加一些 console.log 来检查代码有没有执行到这里

@whitebear13579
Copy link

對，我也同樣是遇到 initWidget is not defined 的問題，我嘗試修改完 build/waifu-tips.js 並添加 console.log("Waifu-tips.js loaded.") 至 build/waifu-tips.js 中
Image

重新 npm run build 後還是依然有 initWidget is not defined 的問題
Image
且貌似 build/waifu-tips.js 與 build/index.js 並未被正確加載，因為 console中沒有出現預期的 Waifu-tips.js loaded.

@panedioic
Copy link

@whitebear13579

我上面的回复有一些问题。应该修改的是 src/waifu-tips.ts 而不是 build/waifu-tips.js，因为 build/waifu-tips.js 会在 npm run build 后被修改。

你还可以修改 src 下的其他的 ts 文件，看看是否只有 src/waifu-tips.ts 不会被打包进 dist/waifu-tips.js 中，进一步定位问题。

@whitebear13579
Copy link

試了一下，發現 src 目錄底下所有的 .ts 文件都不會被打包 😅

@whitebear13579
Copy link

我嘗試在 autoload.js 中的 33 行嘗試新增 loadExternalResource("../build/waifu-tips.js") 載入資源，瀏覽器確實沒有報錯了，但 live2D 組件依然沒有成功加載出來 😅
Image

Image

@panedioic
Copy link

@whitebear13579 build/waifu-tips.js 使用了 import 语法，不能在前端中使用。还是建议检查打包工具的输入输出路径是否有误。

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
5 participants
@stevenjoezhang @panedioic @whitebear13579 @x3fang @sky22333