4

I'm trying to use FAST web-components in a remix application, but so far no luck.

My guess at this point is that the problem comes from the build done in remix. I understand that the build is done by esbuild and that it doesn't fully work with the esm modules, at least not in the way they are exported by FAST.

The error I get is:

/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
  // ...

And here is how I've tried to include FAST in my remix app:

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>
  );
}

Live demo: https://codesandbox.io/s/green-leftpad-grd8o?file=/app/routes/index.tsx:0-702

Ben
  • 674
  • 9
  • 21
  • Have you solved your issue? If so would be nice if you could post your solution and mark it as solved, otherwise this might help https://remix.run/docs/en/v1/api/conventions#serverdependenciestobundle, not sure tho – Can Rau Apr 14 '22 at 23:48

1 Answers1

1

based on remix docs, to solve the problem, you have to add the following to your remix.config.js file:

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