Svelte 给我“未捕获的 ReferenceError：未定义要求”答案

【问题标题】：Svelte giving me 'Uncaught ReferenceError: require is not defined'Svelte 给我“未捕获的 ReferenceError：未定义要求”
【发布时间】：2021-10-06 13:37:43
【问题描述】：

我正在尝试在我的 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 使用以下代码在一个 svelte 文件中工作：

<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 examples 中的说明在 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 };

但是当将“result”变量导入一个纤细的文件时，我得到：“Uncaught ReferenceError: require$$0$6 is not defined”。

任何关于如何在 Svelte 中呈现这样的库的建议将不胜感激。非常感谢。

【问题讨论】：

请贴出代码
我刚刚更新了。谢谢
您选择哪个模板来初始化您的 Svelte 应用程序以及使用哪个版本？
嗨@bigquestionsasked - 这个问题仍然悬而未决。如果我们可以提供更多帮助，请在任何答案下方添加评论，或编辑您的问题以澄清您还想知道什么。否则，请选择“最佳答案”（通过单击答案旁边的复选标记）以结束问题。如果没有答案提供有用的信息，请添加您自己的答案并将其选为最佳答案（以关闭问题）。那会帮助我们。 谢谢！

标签： javascript svelte nlg

【解决方案1】：

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

文件夹结构

├── 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;

【讨论】：

【解决方案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');

【讨论】：