1

我正在尝试在混音应用程序中使用FAST Web 组件，但到目前为止还没有运气。

在这一点上，我的猜测是问题出在 remix 中完成的构建。我知道构建是由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

4

0 回答 0