search

Shopify / blockchain-components

Blockchain related React UI components for Shopify storefronts
https://blockchain.shopify.dev
MIT License
81 stars 19 forks source link

`buildConnectors` breaks hydrogen project #212

Open justinhenricks opened 1 year ago

justinhenricks commented 1 year ago

From the tutorial

When I am setting up my <WagmiConfig> config:

Like:

const {chains, publicClient, webSocketPublicClient} = configureChains(
  [mainnet],
  [
    /**
     * We recommend using `alchemyProvider or `infuraProvider`
    * to reduce the risk of your application being rate limited.
    */
    // alchemyProvider({apiKey: 'INSERT API KEY HERE'}),
    publicProvider(),
  ],
);
const {connectors, wagmiConnectors} = buildConnectors({
  chains,
  projectId: 'YOUR_WALLET_CONNECT_PROJECT_ID',
});
const config = createConfig({
  autoConnect: true,
  connectors: wagmiConnectors,
  publicClient,
  webSocketPublicClient,
});

And then go to run my dev server I am getting: TypeError: Object prototype may only be an Object or null: undefined

And the server won't start.

If I remove the buildConnectors call and pass <WagmiConfig> a basic config like from their docs:

const config = createConfig({
  autoConnect: true,
  publicClient: createPublicClient({
    chain: mainnet,
    transport: http(),
  }),
});

The app will run. Any idea what's going on?

QuintonC commented 1 year ago

Hey @justinhenricks 👋

Thanks for opening up this issue. Which versions of wagmi and viem are you using? Also, if you don't mind, which version of typescript are you using?

justinhenricks commented 1 year ago

Hey @justinhenricks 👋

Thanks for opening up this issue. Which versions of wagmi and viem are you using? Also, if you don't mind, which version of typescript are you using?

Thanks for the quick response! I did have to upgrade typescript from 4.something to 5.1.6.

Also: viem: 1.6 wagmi: 1.3.1

Here is my full package:

"dependencies": {
    "@headlessui/react": "^1.7.2",
    "@remix-run/react": "1.19.1",
    "@shopify/cli": "3.48.0",
    "@shopify/cli-hydrogen": "^5.1.1",
    "@shopify/connect-wallet": "^3.0.1",
    "@shopify/hydrogen": "^2023.7.1",
    "@shopify/remix-oxygen": "^1.1.2",
    "@shopify/tokengate": "^1.1.2",
    "clsx": "^1.2.1",
    "cross-env": "^7.0.3",
    "dayjs": "^1.11.9",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "isbot": "^3.6.5",
    "keen-slider": "^6.8.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intersection-observer": "^9.4.1",
    "react-use": "^17.4.0",
    "schema-dts": "^1.1.0",
    "tiny-invariant": "^1.2.0",
    "typographic-base": "^1.0.4",
    "viem": "^1.6.0",
    "wagmi": "^1.3.10",
    "worktop": "^0.7.3",
    "typescript": "^5.1.6"
  },
  "devDependencies": {
    "@remix-run/dev": "1.19.1",
    "@remix-run/eslint-config": "1.19.1",
    "@shopify/eslint-plugin": "^42.0.1",
    "@shopify/oxygen-workers-types": "^3.17.2",
    "@shopify/prettier-config": "^1.1.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@total-typescript/ts-reset": "^0.4.2",
    "@types/eslint": "^8.4.10",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "cross-env": "^7.0.3",
    "eslint": "^8.20.0",
    "eslint-plugin-hydrogen": "0.12.2",
    "postcss": "^8.4.21",
    "postcss-import": "^15.1.0",
    "postcss-preset-env": "^8.2.0",
    "prettier": "^2.8.4",
    "rimraf": "^3.0.2",
    "tailwindcss": "^3.3.0"
  },

Are you able to reproduce?

QuintonC commented 1 year ago

@justinhenricks Yeah, I'm able to replicate this behavior.

I do know that for the time being you can downgrade your @shopify/cli-hydrogen version to ^4.2.1 and the storefront should will work as expected.

I'm looking into this a bit more to see what changed, but my assumption is something related to cloudflare workers dropping support for something being used in the connect-wallet package.

justinhenricks commented 1 year ago

@QuintonC ok, cool, glad to hear it's reproducible. Yeah, was thinking the same thing. When I did get the app to start (by uncommenting out the buildConnectors and then bringing it back in I am seeing this error:

FetchError [ERR_NO_HANDLER]: No fetch handler defined and no upstream to proxy to specified.
Make sure you're exporting a default object containing a `fetch` function property.
    at ServiceWorkerGlobalScope.[kDispatchFetch] (/Users/justin/Workspace/SCP/Clients/Creepz/creepz-hydrogen-storefront/node_modules/@miniflare/core/src/standards/event.ts:431:15)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

It seems like there is an open issue that may be related here: https://github.com/cloudflare/miniflare/issues/34

I just tried downgrading my cli-hydrogen as you suggested but unfortunately, it seems to be totally breaking my bundle now, no CSS is loading.

QuintonC commented 1 year ago

@QuintonC ok, cool, glad to hear it's reproducible. Yeah, was thinking the same thing. When I did get the app to start (by uncommenting out the buildConnectors and then bringing it back in I am seeing this error:

I just tried downgrading my cli-hydrogen as you suggested but unfortunately, it seems to be totally breaking my bundle now, no CSS is loading.

@justinhenricks Ah, that's probably because I gave you the wrong version number 😳. Sorry about that! Could you try ^4.1.2?

The version I mentioned last time is not a valid version number, so it probably defaulted to utilizing ^5.x.x.

If you have additional errors there, please let me know and if you can provide some additional steps to replicate let me know.

Can you try with the correct version number and letting me know if that resolves the issue for you?

Investigation notes so far - from what I can tell, this issue seems like it might be related to miniflare in that it's not supporting any usage of connectors. Not just from this package, but even from wagmi.

I've tried replicating this with just a pure wagmi implementation by providing the following configuration (see below) and it is also crashing. I'll continue to see if I can find out more information on what changed and how we can proceed.

const config = createConfig({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({chains}),
    new CoinbaseWalletConnector({chains, options: {appName: 'Test app'}}),
  ],
  publicClient,
  webSocketPublicClient,
});
justinhenricks commented 1 year ago

@QuintonC Unfortunately, that version seems to break my bundle too. Not entirely sure what's going but looks like the CSS just doesn't get compiled in the correct way.

Noted, thanks for confirming the issue.

If you find any more information or other possible workaround I would love to hear them, thanks!

QuintonC commented 1 year ago

Unfortunately, that version seems to break my bundle too. Not entirely sure what's going but looks like the CSS just doesn't get compiled in the correct way.

When you say your bundle is broken do you mean that your store doesn't run/render at all or is it just CSS related?

Do you have a sample repo I can pull down and run or some other data I can take a look at such as a deployment url / development preview url?

justinhenricks commented 1 year ago

@QuintonC yeah, sorry - just seems like its not loading my css correctly.

I'm working on a private project for a client but I can probably generate you a preview link. I'll message you on twitter.

justinhenricks commented 1 year ago

@QuintonC can you follow me on twitter so I can message you: https://twitter.com/justhenricks

Lmk if there's a better way - i just can't send a public link here for this project for you to check out.

QuintonC commented 1 year ago

yeah, sorry - just seems like its not loading my css correctly.

@justinhendricks You're including the CSS for the tokengate + connect-wallet components in your root.tsx layout file, correct?

I'd prefer to keep the conversation to resolving the bug to this Github issue in case other developers run into the same issue. Hopefully you can understand :)

justinhenricks commented 1 year ago

yeah, sorry - just seems like its not loading my css correctly.

@JustinHendricks You're including the CSS for the tokengate + connect-wallet components in your root.tsx layout file, correct?

I'd prefer to keep the conversation to resolving the bug to this Github issue in case other developers run into the same issue. Hopefully you can understand :)

No worries - I just can't share the example project I have here is all.

I am including that CSS - I meant like when I downgrade my Hydrogen-CLI none of my CSS seems to load, and the entire site breaks. I feel like there is a difference between 4 and 5 with how the CSS gets bundled and served via Oxygen or something.

QuintonC commented 1 year ago

No worries - I just can't share the example project I have here is all.

I am including that CSS - I meant like when I downgrade my Hydrogen-CLI none of my CSS seems to load, and the entire site breaks. I feel like there is a difference between 4 and 5 with how the CSS gets bundled and served via Oxygen or something.

Is this behavior occurring both in your local environment and in your development previews for Hydrogen deploys?

Can you also provide more information about your Hydrogen storefront? Is it using Tailwind or something else? Lastly, can you perhaps share your links function from your root.tsx file?

QuintonC commented 1 year ago

Hey @justinhenricks, just wanting to check in with you and see if you're still facing these issues

justinhenricks commented 1 year ago

@QuintonC hey there - sorry for the delay have been on vaca and something came up today to get me out of the office.

Haven’t gotten a chance to get back into this just yet - would love to be able to carry on with the latest CLI version though. This project is for a client and I have a deadline unfortunately so wondering if you have any ideas on alternate libraries I should look into to try and roll an alternative way of handling the wallet connect/validation? Or if there might be a patch coming into this package shortly? I’m fairly new to this world so appreciate any help/advice you might be able to offer.

Also - should have some time tomorrow to explore what you have suggested with downgrading the CLI and give you some more insight like the links in root and whatnot.

justinhenricks commented 1 year ago

@QuintonC it looks like when i use hydrogern CLI 4.1.2 the CSS is not compiling/bundling correctly in both my local environment and when I deploy.. The CSS and everything loads and works fine when I switch the version back to the 5 one.

This is my links in root: 

export const links: LinksFunction = () => {
  return [
    {rel: 'stylesheet', href: styles},
    {rel: 'stylesheet', href: connectWalletStylesheet},
    {rel: 'stylesheet', href: tokengateStylesheet},
    {rel: 'stylesheet', href: customFont},
    {
      rel: 'preconnect',
      href: 'https://cdn.shopify.com',
    },
    {
      rel: 'preconnect',
      href: 'https://shop.app',
    },
    {rel: 'icon', type: 'image/svg+xml', href: favicon},
  ];
};

I am using tailwind

QuintonC commented 1 year ago

@QuintonC it looks like when i use hydrogern CLI 4.1.2 the CSS is not compiling/bundling correctly in both my local environment and when I deploy.. The CSS and everything loads and works fine when I switch the version back to the 5 one.

This is my links in root:

export const links: LinksFunction = () => {
  return [
    {rel: 'stylesheet', href: styles},
    {rel: 'stylesheet', href: connectWalletStylesheet},
    {rel: 'stylesheet', href: tokengateStylesheet},
    {rel: 'stylesheet', href: customFont},
    {
      rel: 'preconnect',
      href: 'https://cdn.shopify.com',
    },
    {
      rel: 'preconnect',
      href: 'https://shop.app',
    },
    {rel: 'icon', type: 'image/svg+xml', href: favicon},
  ];
};

I am using tailwind

What does your remix.config.js look like?

justinhenricks commented 1 year ago

@QuintonC 

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  appDirectory: 'app',
  ignoredRouteFiles: ['**/.*'],
  watchPaths: ['./public', './.env'],
  server: './server.ts',
  /**
   * The following settings are required to deploy Hydrogen apps to Oxygen:
   */
  publicPath: (process.env.HYDROGEN_ASSET_BASE_URL ?? '/') + 'build/',
  assetsBuildDirectory: 'dist/client/build',
  serverBuildPath: 'dist/worker/index.js',
  serverMainFields: ['browser', 'module', 'main'],
  serverConditions: ['worker', process.env.NODE_ENV],
  serverDependenciesToBundle: 'all',
  serverModuleFormat: 'esm',
  serverPlatform: 'neutral',
  serverMinify: process.env.NODE_ENV === 'production',
  postcss: true,
  tailwind: true,
  future: {
    v2_meta: true,
    v2_headers: true,
    v2_errorBoundary: true,
    v2_routeConvention: true,
    v2_normalizeFormMethod: true,
  },
};

Is it not working because CLI 5 handle the .env for me? Do I just need to create a .env file? Seems like it would still work in the oxygen preview environment if that was the case, right?

justinhenricks commented 1 year ago

@QuintonC messed around a bit tonight with the wallet connect web3modal just following the instructions in the docs

That setup seems to work fine and I am able to connect to a wallet and const account = useAccount(); from wagmi seems to work as well, always giving me back the currently connected wallet info (client side of course).

Apologies as I'm a bit ignorant to this stuff still - but do you see any issues with just proceeding with this for handling my wallet connections? Do you see any way of combining this web3wallet connect with your TokenGate component so that I can take advantage of that still in passing it the requirements/rewards from my product gates?

Appreciate the help.

QuintonC commented 1 year ago

@justinhenricks Hmm, the remix config looks fine to me.

In regards to using Wallet Connect Web3Modal versus our package, that's fine :)

You can most certainly place any button you'd like into the Tokengate connectButton slot.

I'm also looking into this a bit more to see what we can do to resolve this issue being present in the most recent hydrogen versions. I'm not certain what it is that is causing it and if it is a result of miniflare or something else. I'll keep this issue open as I dive a bit deeper to figure out what is going on here.

justinhenricks commented 1 year ago

@QuintonC thanks - spent the day getting Web3Modal working with good success. Once I got the account back, generated a signature (with the help of viem), and posted up to my server I was basically able to follow the create token-gated storefront docs to a tee, they were very helpful!

I got so close to being able to just use TokenGate component, it was working great locally like: 

 <Tokengate
            connectButton={
              <Web3Button />
            }
            isConnected={Boolean(wallet)}
            reaction={reaction}
            requirements={requirements}
            unlockingTokens={unlockingTokens}
            isSoldOut={allVariantsSoldOut}
            discountCustomTitles={{
              unlockedSubtitle: 'Discount applied automatically at checkout',
            }}
          />

But, unfortunately broke my deploy. These were the logs:

🏗️  Building in production mode...
╭─ warning ────────────────────────────────────────────────────────────────────╮
│                                                                              │
│  In Remix:                                                                   │
│                                                                              │
│  could not resolve "@shopify/tokengate"                                      │
│                                                                              │
│  You imported "@shopify/tokengate" in                                        │
│  app/routes/($locale).products.$productHandle.tsx,                           │
│  but that package is not in your `node_modules`.                             │
│  Did you forget to install it?                                               │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

📦 Worker built: 6.403s
   dist/worker/index.js  2.34 MB

🚨 Worker bundle exceeds 1 MB! This can delay your worker response.

✅ Done in 9.63s.

🔍 Locating assets to upload... 
✅ Done in 0.05s.

🔑 Requesting asset upload... 
✅ Done in 0.54s.

☁️ Uploading assets... 
✅ Done in 1.16s.

🚀 Uploading deployment... 
❌ Cancelling deployment...
✅ Done in 0.51s.

🛑 InvalidScriptError: retrying will not succeed. The following error must be actioned:

Error: Script startup exceeded CPU time limit.
Error: Process completed with exit code 1.

The "could not resolve "@shopify/tokengate" " is especially interesting, because it is definitely in my package and working locally like I said, so I couldn't quite figure out why that was happening.

Hope this has been helpful, look forward to hopefully seeing this get back in action, after going through all this I can definitely say that your abstraction on this stuff will be awesome to have!

QuintonC commented 1 year ago

The "could not resolve "@shopify/tokengate" " is especially interesting, because it is definitely in my package and working locally like I said, so I couldn't quite figure out why that was happening.

That is... strange. I'll see if I can find out more about that once I get a replicable issue put together.

In my testing so far, I've found that I can't create a websocket client using viem. Additionally, I can't attempt to render a ConnectWalletProvider as the following two errors present themselves:

  1. When starting the application with the provider commented out and then uncommenting it, I receive the following error (related to websockets)
FetchError [ERR_NO_HANDLER]: No fetch handler defined and no upstream to proxy to specified.
Make sure you're exporting a default object containing a `fetch` function property.
    at ServiceWorkerGlobalScope.[kDispatchFetch] (/test-bench/node_modules/@miniflare/core/src/standards/event.ts:431:15)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
  1. When starting the application with the provider uncommented out, I receive the following error. Initially, the error depicted an error against the qrcode package, to which I attempted to create a patch using qr-image (a recommended package from Cloudflare), which is also not working.
ReferenceError: process is not defined
    at <script>:72176:7
    at node_modules/qr-image/lib/crc32.js (<script>:72199:7)
    at <script>:17:51
    at node_modules/qr-image/lib/png.js (<script>:72207:68)
    at <script>:17:51
    at node_modules/qr-image/lib/qr.js (<script>:72409:111)
    at <script>:17:51
    at <script>:115743:31
    at SourceTextModule.evaluate (node:internal/vm/module:225:23)
    at VMScriptRunner.runAsModule (/test-bench/node_modules/@miniflare/runner-vm/src/index.ts:40:18)

Hope this has been helpful, look forward to hopefully seeing this get back in action, after going through all this I can definitely say that your abstraction on this stuff will be awesome to have!

Thanks! I definitely want to see this functional inside of Hydrogen. It's really bizarre to me that something seems to have broken between the hydrogen releases for this package 🤔