Plasmic with Shopify Hydrogen

Developer Support
1

Hello there,
I’m trying to use Plasmic with Shopify Hydrogen.

I started by running: npm create @shopify/hydrogen@latest
And then followed this Quickstart: Get started with Remix | Learn Plasmic
Running npm run dev , I got the following error.

ReferenceError: module is not defined
    at /Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@plasmicapp/isomorphic-unfetch/browser.js:1:76
    at Object.runViteModule (Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1181:17)
    at ViteRuntime.directRequest (Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1026:78)
    at ViteRuntime.cachedRequest (Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:949:28)
    at request (Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:976:128)
    at /node_modules/@plasmicapp/loader-fetcher/dist/index.esm.js?v=fd022b42:1:110
    at Object.runViteModule (Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1181:11)
    at ViteRuntime.directRequest (Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1026:60)
    at ViteRuntime.cachedRequest (Users/arash.saheli/shopify-poc-github/plasmic-may-16/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:950:79)
    at /node_modules/@plasmicapp/loader-core/dist/index.esm.js?v=fd022b42:1:110

I tried to downgrade "plasmicapp/loader-react, and reinstall all the dependencies, but no luck.

I also cloned this repo: plasmic/examples/hydrogen-oxygen-with-buildtime-codegen at master · plasmicapp/plasmic · GitHub
And tried to run it after adding my store tokens, but I’m getting the following error:

TypeError: Body is unusable
    at specConsumeBody (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/undici/lib/fetch/body.js:497:11)
    at Response.text (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/undici/lib/fetch/body.js:354:14)
    at Response.text (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/@miniflare/core/src/standards/http.ts:358:38)
    at runWithCache.cacheInstance.cacheInstance (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/@shopify/hydrogen/src/cache/fetch.ts:152:11)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runWithCache (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/@shopify/hydrogen/src/cache/fetch.ts:101:5)
    at fetchStorefrontApi (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/@shopify/hydrogen/src/storefront.ts:319:9)
    at loader (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/app/root.tsx:33:18)
    at callRouteLoaderRR (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/@shopify/remix-oxygen/node_modules/@remix-run/server-runtime/dist/esm/data.js:48:16)
    at callLoaderOrAction (/Users/arash.saheli/shopify-poc-github/hydrogen-oxygen-with-buildtime-codegen/node_modules/@remix-run/router/router.ts:3568:16)

Finally, I created a Remix project by running npx create-remix@latest and following the same Quickstart, and got this:

[vite] Error when evaluating SSR module /app/routes/mypage.jsx: failed to import "@plasmicapp/loader-react"
|- /Users/arash.saheli/shopify-poc-github/remix-plasmic-poc/node_modules/@plasmicapp/loader-react/dist/index.esm.js:55
import * as PlasmicDataSourcesContext from "@plasmicapp/data-sources-context";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

For the record, I’m able to run and deploy a Shopify+Hydrogen, as well as a Plasmic+NextJS store without any issue.

Am I doing something wrong? If not, is Plasmic+Hydrogen stable enough to be used in Production with Shopify?

Thanks,
Arash

2

Hi @arash_saheli, welcome to the Plasmic forum.

I think you’re running into the same issue as in this topic: Is Remix v2 integration broken?

3

Thanks for the quick response, Jason.
This solved the issue with my Remix project (which I only created for comparison). However, I still get the same error when I run the Hydrogen+Plasmic (which is the one that I’m trying to evaluate for our storefront).
Thanks.

ReferenceError: module is not defined
    at /Users/arash.saheli/shopify-poc-github/plasmic-hyd-poc/node_modules/@plasmicapp/isomorphic-unfetch/browser.js:1:76
    at Object.runViteModule (Users/arash.saheli/shopify-poc-github/plasmic-hyd-poc/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1181:17)
4

Yes this error does seem similar. Would you mind sharing your codebase so I can take a look at it?

6

Thanks Jason,
sent you a DM.