[BUG] Can't include custom build config for --target node build within Vite config

[justinhenricks]

Describe the bug Including a build config in Vite causes an incomplete bundle when building for --target node. When running yarn build --target node the compilation appears to work, but when you do yarn preview --target node and visit the page, CSS and JS is missing and the page is broken.

To Reproduce Add a build config to vite.config.js. In my example we are trying to add node polyfills:

import nodePolyfills from "rollup-plugin-polyfill-node";
...
  build: {
    rollupOptions: {
      plugins: [
        // ↓ Needed for build
        nodePolyfills(),
      ],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },

Run a build for node: yarn build --target node Preview with node: yarn preview --target node

Visit the page and see it is missing all of its CSS and necessary JS. Page is very broken.

Remove the build option and repeat and it works great.

Expected behaviour The dist build is complete and includes the added configuration options in the build config.

[frandiox]

@justinhericks Hi! I'm not able to reproduce this issue. I've tried adding polyfills like you did but I can see the demo-store working as usual. The build options seem to be passed correctly to Rollup internally (we don't overwrite them, afaik). Can you provide a reproduction to test?

Also, I'm curious, why are you trying to polyfill Node APIs in a Node build? 🤔

[justinhenricks]

Hi @frandiox thank you for the reply! Forgive me as I may be going about this incorrectly. Here is a link to a video of the behavior that I'm getting:

https://www.awesomescreenshot.com/video/10477293?key=0d3d77ec7819c2f574b94cb730bb8c7b

For a bit more context.. we're trying to implement web3modal and followed directions for the vite setup as seen here: https://github.com/WalletConnect/web3modal#using-with-vite

Everything was working great locally with:

  plugins: [
    hydrogen(),
    !production &&
      nodePolyfills({
        include: [
          "node_modules/**/*.js",
          new RegExp("node_modules/.vite/.*js"),
        ],
      }),
  ],

until we went to build and was failing with: Cannot bundle Node.js built-in "assert" imported from "node_modules/ethereumjs-util/dist/index.js"

This is what led us to believe we should be building for node. Without the build config we were getting: global is not defined in our JS console. This is what led us to put the build config with polyfills back into the vite config, because we thought we needed it and how we came to see this behavior as shown in the video.

Hope that makes sense.. ultimately we opted to just include the web3modal and web3 packages via CDN right in our index file and it seems to be working now. But would be great if we can figure out how to get them working as part of our package.

Appreciate it.

[shopify[bot]]

Oxygen deployed a preview of your gfs-changeset-edits-april branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 10, 2024 4:04 PM
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 10, 2024 4:04 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 10, 2024 4:04 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 10, 2024 4:04 PM
skeleton	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 10, 2024 4:04 PM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	April 10, 2024 4:04 PM

Learn more about Hydrogen's GitHub integration.