Problematic third-party dependencies

[jplhomer]

Please add a comment below listing dependencies that you're struggling to get to work with your Hydrogen app. This will help us provide guidance, suggest alternatives, or patch Hydrogen to support these dependencies.

[jplhomer]

contentful

This relies on axios which doesn't play well with a Worker runtime.

Suggested alternative: Use fetch and call Contentful's GraphQL API instead. This allows you to get a more succinct payload instead of having to call the REST API and manually refactor the responses into a coherent object.

[davidhousedev]

Another approach to working with Contentful: Shopify/hydrogen#93 (comment)

[davecyen]

react-bootstrap

https://github.com/react-bootstrap/react-bootstrap

This is a popular UI kit for react. It appears this issue is related to the ThemeProvider utility.

Error: This Hook is not supported in Server Components.

Note: This worked fine in 0.9.x releases, but upgrading to 0.10.x and above have caused conflicts.

I've tried importing a react-bootstrap component into a .client.jsx file in my hydrogen project, and then use this .client.jsx component in my app, but it still breaks.

[jplhomer]

Shared with you in Slack, but for other folks curious about how to make this work:

https://stackblitz.com/edit/shopify-hydrogen-xzxuta?file=src%2Fpages%2Findex.server.jsx

[davecyen]

Shared with you in Slack, but for other folks curious about how to make this work:

https://stackblitz.com/edit/shopify-hydrogen-xzxuta?file=src%2Fpages%2Findex.server.jsx

👆🏽thanks for this, I was able to get this working by importing components from react-bootstrap into their own *.client.jsx files like you did in the StackBlitz.

I ran into an issue with another 3P library, did the same as above, and it worked as well.

[Aurelio-One]

I did the same as above but get a "Error: Unsupported server component type: undefined" error message. Any suggestion?

[AlejandroV01]

@Aurelio-One did you ever manage to fix the issue? I am having the same issue

[jplhomer]

@headlessui/react

The Transition, Dialog, and Menu components do not yet work in React 18's Strict Mode. The issue is being tracked here: tailwindlabs/headlessui#681

The workaround for the time being is to disable strict mode in your Hydrogen app. You will need to add a custom client entrypoint and follow the instructions to disable StrictMode.

[Thisisjuke]

styled-components

Link : https://github.com/styled-components/styled-components
Style is well contained in the final React Component object, but not applied on the visual element.

Complete details in this issue : Shopify/hydrogen#398

[kcarra]

graphql-request

Link: https://www.npmjs.com/package/graphql-request

Details: By default the client uses XMLHttpRequest which will break in Oxygen. A quick fix is to specify fetch as the default:

    new GraphQLClient(Oxygen.env.CONTENTFUL_GRAPHQL_ENDPOINT, {
      fetch: fetch,
    })

[myko1328]

Not sure about this but I would like to include this one:

Airtable

Details: Using TS template, t'was working smooth in the development. But when deployed to Oxygen, table functions were not recognized.

Sample call: table.select({}).firstPage()
Error received: TypeError: c.default is not a constructor.

[kcarra]

@myko1328 I would recommend trying to run your app in preview, via shopify hydrogen preview and see if you can get more verbose logging before deploying to Oxygen.

[myko1328]

Hey @kcarra . thank you for the fast response. I tried running shopify hydrogen preview and I received this error (please see attached error ss: https://prnt.sc/H9YLrqwNOXsY )

TypeError: d.default is not a constructor
        at Object.p [as default] (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:16531)
        at C.runAction (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:4819)
        at V (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:11529)
        at _.m (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:11738)
        at _.eachPage (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:7121)
        at _.g (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:10798)
        at /Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:7275
        at new Promise (<anonymous>)
        at _.firstPage (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:168:7212)
        at Object.Jg [as resource] (/Users/myko/Documents/reactjs-projects/outliant/mash-app/dist/worker/index.js:169:24637)`

Here is my sample airtable call for fecthing data:

import Airtable from "airtable";

const base = new Airtable({ apiKey: api }).base(
 base
);

const table = base(table);

export async function api(request, { params }) {
  const records = await table.select({}).firstPage();

  return new Response(JSON.stringify(records));
}

[kcarra]

Taking a shot in the dark with this one. Looking at the airtable source code, it seems like it's using node-fetch behind the scenes to make http requests when the window object is not present (https://github.com/Airtable/airtable.js/blob/master/src/fetch.ts) My guess is that node-fetch is not compatible with Cloudflare workers. We had a similar issue, listed above, with graphql-request. I would test my hypothesis though and see if you can use node-fetch in a Hydrogen preview environment. If this is the case, then your options are: Drop airtable as a dependency(Probably not ideal), deploy your hydrogen app to a node env instead of Oxygen, or put in a pr to airtable to be able to configure a fetch implementation that will work in cloudflare workers (fetch)

There may be other issues with airtable that I'm not immediately seeing causing your app to break in Oxygen, but this is probably a decent starting point.

[myko1328]

Thank you @kcarra !

[frehner]

Shopify/hydrogen#2231 (comment)

[IbsaGunjo]

I am trying to use nodemailer for the 'contact us' page of my hydrogen site and I can't seem to get past this error, please help.

✖ Cannot bundle Node.js built-in "events" imported from "node_modules/nodemailer/lib/mailer/index.js". Consider disabling ssr.noExternal or remove the built-in dependency.

[jeiemgi]

Hello @jplhomer, I've been struggling to install twin.macro� any advice?

Link: https://www.npmjs.com/package/twin.macro

[jplhomer]

What problems are you having? If you haven't already, I would recommend using Remix instead of Hydrogen v1, as we're going to transition to that in the next couple weeks.

[jeiemgi]

I don't know how to install dependencies that have to do with the vite.config; I've read the docs about third-party dependencies, but I don't see any details on how to do that, I've tried twin.macro and trying to add vite-plugin-svgr It just doesn't work, throws vague errors, anyways, about Remix, How do I do that? What do you mean exactly? Do you guys provide a starter kit or any documentation about that?

[juanpprieto]

Unfortunately, libraries depending on Emotion or Styled Components are not supported in Hydrogen due to RSC.