javascript - Svelte 给我“未捕获的 ReferenceError:未定义要求”
问题描述
我正在尝试在我的 Svelte 应用程序中使用名为 RosaeNLG 的自然语言生成库,但每当我从 JavaScript 文件中导入任何“需要”rosaenlg 的变量时,我都会收到一条错误消息,提示“未捕获的 ReferenceError:未定义要求”。
Rosae 是一个用于 node.js 或客户端(浏览器)执行的库,基于 Pug 模板引擎。
我已经阅读了 Svelte 的类似问题,这些问题已通过将“requires”语法更改为不同形式的“import”来解决。例如:'从“rosaenlg”导入 rosaenlgPug';'从 "rosaenlg" 导入 * 作为 rosaenlgPug'; var rosaenlgPug = import("rosaenlg")'; '导入(“rosaenlg”)'。
所有这些变体都无法汇总并最终给出错误:'FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory'。
编辑:我已经设法让旧版本的 Rosae 使用以下代码在一个苗条的文件中工作:
<script>
let rendered = "Busy...";
const onRosaeNlgLoad = () => {
let array = ['x','y','z'];
let template = `
mixin variable
| this is a Rosae template #[+syn('synonym1', 'synonym2')]`
rendered = rosaenlg_en_US.render(template, {
language: 'en_US',
fruits: fruits
})
}
</script>
<svelte:head>
<script src="https://unpkg.com/rosaenlg@1.20.2/dist/rollup/rosaenlg_tiny_en_US_1.20.2_comp.js" on:load="{onRosaeNlgLoad}"></script>
</svelte:head>
<h1>{rendered}!</h1>
但是,我仍然无法按照Rosae 示例中的说明在 JS 文件中或通过从 pug 文件链接模板来使其工作。
我在 JS 文件中尝试以下内容:
import * as rosaenlgPug from "rosaenlg";
let array = ['x', 'y', 'z']
let result = rosaenlgPug.renderFile('tuto.pug', {
language: 'en_US',
element: array[0]
});
export { result };
但是,当将“结果”变量导入到一个纤细的文件中时,我得到:“未捕获的 ReferenceError:未定义需要 $$0$6”。
任何关于如何在 Svelte 中呈现这样的库的建议将不胜感激。非常感谢。
解决方案
我不熟悉rosaenlg
,但下面是一个最小的SvelteKit
项目,可以在svelte.config.js
按照常见问题解答指定 CommonJS 库后运行
文件夹结构
├── sveltekit-project/ // Root
| ├── src/
| | ├── routes/
| | | ├── index.svelte
| | | └── tuto.js
| | ├── app.html
| | ...
| ├── svelte.config.js
| ...
/src/routes/tuto.js
import rosaenlgPug from 'rosaenlg';
const phones = [{
name: 'OnePlus 5T',
colors: ['Black', 'Red', 'White'],
}, {
name: 'OnePlus 5',
colors: ['Gold', 'Gray'],
}, {
name: 'OnePlus 3T',
colors: ['Black', 'Gold', 'Gray'],
}];
const template = `
mixin colors
| the phone's available colors are
eachz color in phone.colors with { separator:',', last_separator:'and', end:'.' }
| #{color}
- let phone;
each phoneElt in phones
- phone = phoneElt;
p #{phone.name} . #[+colors]
`;
// As an endpoint
export async function get() {
const res = rosaenlgPug.render(template, {
language: 'en_US',
phones: phones
});
return { body: { res }};
};
/src/routes/index.svelte
<script context='module'>
// Fetch in load for client side usage
export const load = async ({ fetch }) => {
const data = await fetch('/tuto').then(r => r.json())
const { res } = data
return { props: { res }}
}
</script>
<script>
export let res
</script>
<p>{@html res}</p>
/svelte.config.js
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
vite: {
optimizeDeps: {
include: ['rosaenlg']
}
}
}
};
export default config;
推荐阅读
- arrays - [string[]] 参数与读取主机行为
- azure - 如何在 ADF 中使用作业控制文件或 0 kb 文件(fin)跟踪复制活动?
- powerbi - 计算案例在两个日期之间处于活动状态的天数
- docker - 当 Apache 在 docker 中运行时自动化 letencrypt
- d3.js - 将最后一个刻度格式化为 24:00 而不是 00:00
- reactjs - 如何正确使用带有问号的 if else?
- java - gRPC java spring 服务器“错误”:“2 UNKNOWN:流已删除”
- html - 如何获取父类之外的元素
- flutter - 全局变量或单例在刷新后失去其值(重置)
- javascript - 如何检查对象是否具有某些属性