Broken using SSR - Hydrogen

[jacksontriffon]

Many frameworks these days are migrating to a server-side renderred approach with their apps - Since loadDefaultJapaneseParser() requires the window object to load, it's currently unusable on Hydrogen.

Below is a screenshot of a mock Hydrogen store which breaks when using any parser.
ReferenceError: window is not defined

---

Steps to reproduce:

1. Create a new Hydrogen storefront.

   npm create @shopify/hydrogen@latest

   In your terminal, create a new Hydrogen project using example data from Mock.shop
   https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started

2. Run the dev serverAnchor link to section titled "Step 2: Run the dev server"
   After installation, open your new project and start the dev server:

   cd hydrogen-quickstart
   shopify hydrogen dev
   

   Once the dev server is running, open http://localhost:3000/ in your browser and you'll see Mock.shop

3. Add budoux to the project.

   npm install budoux

4. Navigate to file /app/routes/_index.tsx (Home page)

5. Update the loader function by adding the parser:

   export async function loader(args: LoaderFunctionArgs) {
     const parser = loadDefaultJapaneseParser();
   
     // Start fetching non-critical data without blocking time to first byte
     const deferredData = loadDeferredData(args);
   
     // Await the critical data required to render initial state of the page
     const criticalData = await loadCriticalData(args);
   
     return defer({...deferredData, ...criticalData});
   }

6. Open http://localhost:3000/ in your browser and you'll see the error.

[tushuhei]

Thanks for trying BudouX. I reproduced the same issue on my end. I believe the problem has several aspects.

1. Overriden win.ts: BudouX exports both CommonJS (CJS) and ECMAScript Modules (ESM). However, npm run build:es overrides win.ts with win-browser.ts, which prevents exporting Node.js compatible ESM. This should be fixed on BudouX's end.
2. Missing Exports Field: Specifying the exports field in package.json should be done for better discoverability.
3. Module Resolution in Shopify: Even if the above problem is fixed, MiniOxygen seems to prioritize the browser field in package.json for some reason. This can be fixed by specifying mainFields: ['exports', 'main', 'module'] in vite.config.ts on user's end.

Finally, the "window is not defined" problem is gone, but Shopify still encounters a problem using JSDOM with the error "require is not defined."

[jacksontriffon]

Thanks for the quick reply!

This issue is quite tricky to get around, although considering many frameworks are moving towards SSR this fix would be a great improvement for BudouX moving forward.

Would you have any insight into the "require is not defined" JSDOM error? I'm not quite sure what that's referring to, whether that's within BudouX or Hydrogen...

Appreciate the help!