SyntaxError: Неожиданный «экспорт» токена при использовании быстрых компонентов в приложении для ремикса

Question

Я пытаюсь использовать веб-компоненты FAST в приложении дляремикса , но пока безуспешно.

На данный момент я предполагаю, что проблема связана со сборкой, сделанной в ремиксе. Я понимаю, что сборка выполняется 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.config.jsфайл:

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