Svelte给我"未捕获的引用错误：未定义require"

Question

我试图使用一个名为RosaeNLG的自然语言生成库与我的Svelte应用程序，但每当我从'需要' RosaeNLG的JavaScript文件中导入任何变量时，我都会得到一个错误说'Uncaught ReferenceError: require未定义'。

Rosae是一个用于node.js或客户端(浏览器)执行的库，基于Pug模板引擎。

我在Svelte中读过类似的问题，通过将'require '语法更改为不同形式的'import'来解决。例如:'import rosaenlgPug from "rosaenlg"';'import * as rosaenlgg from "rosaenlg"';var rosaenlgPug = import("rosaenlg")';进口("rosaenlg"。

所有这些变量都不能rollup，并最终给出错误:'FATAL error: invalid 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>

然而，我仍然无法使它在JS文件中工作，或者通过从pug文件链接模板，如Rosae示例所示。

我在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 };

但是当将'result'变量导入到一个苗条文件中时，我得到:'Uncaught ReferenceError: require$$0$6 is not defined'.

任何关于如何在Svelte中渲染像这样的库的建议都将非常感谢。非常感谢。

Answer 1

我不熟悉rosaenlg，但下面是一个最小的SvelteKit项目，可以在svelte.config.js中指定CommonJS库后运行，按照FAQ

的指示

文件夹结构

├── sveltekit-project/        // Root
|   ├── src/
|   |   ├── routes/
|   |   |   ├── index.svelte
|   |   |   └── tuto.js
|   |   ├── app.html
|   |   ...
|   ├── svelte.config.js
|   ...

/src/线路/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/线路/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;

Answer 2

这不是一个答案，只是一些尝试。

有几种可能性——这条信息不是很有帮助。我在其他包中遇到过这个问题，下面是我解决它的方法:

首先，是否有一个必需的软件包没有安装?在ReferenceError: require is not defined之后，完整的错误信息说什么?我看到这种情况发生在http2-proxy或@snowpack/plugin-webpack等。例如

npm install --save-dev @snowpack/plugin-webpack

此外，如果使用snowpack，您可能有一个snowpack.config.mjs文件。试着将它重命名为snowpack.config.js

(在我的例子中，这立即修复了它，这第二步)

另一件事要尝试:在您的配置文件中，尝试将require交换为import，反之亦然。例如。

const pkg = require('http2-proxy');

const pkg = import('http2-proxy');