语法错误：在混音应用中使用快速组件时出现意外的令牌"导出"

Question

我正试图在混音应用程序中使用FAST web组件，但到目前为止运气不佳。

在这一点上，我的猜测是问题来自于在混音中完成的构建。我知道构建是由esbuild完成的，它不能完全与esm模块一起工作，至少不能以FAST导出的方式工作。

我得到的错误是：

/sandbox/node_modules/@microsoft/fast-components/dist/esm/index.js:4
export * from "./custom-elements":
SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Object.Module
// ...

以下是我如何尝试将FAST包含在我的混音应用程序中：

import {
provideFASTDesignSystem,
fastCard,
fastButton
} from "@microsoft/fast-components";
import { provideReactWrapper } from "@microsoft/fast-react-wrapper";
import React from "react";
const { wrap } = provideReactWrapper(React, provideFASTDesignSystem());
export const FastCard = wrap(fastCard());
export const FastButton = wrap(fastButton());
// https://remix.run/guides/routing#index-routes
export default function Index() {
return (
<div>
<h1>Trying to make FAST work</h1>
<FastCard>
<h2>FAST React</h2>
<FastButton appearance="accent" onClick={() => console.log("clicked")}>
Click Me
</FastButton>
</FastCard>
</div>
);
}

现场演示：https://codesandbox.io/s/green-leftpad-grd8o?file=/app/routes/index.tsx:0-702

Answer 1

基于remix文档，为了解决这个问题，您必须在remix.config.js文件中添加以下内容：

module.exports = {
...
serverDependenciesToBundle: [
...
"@microsoft/fast-components",
...
],
};