[BUG] "@shopify/hydrogen doesn't appear to be written in CJS. Please contact the package author to fix"

[jplhomer]

Hello! If you are seeing this warning in your server console, please know that it is a red herring and is not affecting your development environment. We are working to resolve the warning, but please look for any other errors in your server console that could be causing an issue.

This started appearing in Vite 2.7.0. It is directly related to #263 which is blocked on other things.

This ticket is here to prevent duplicate tickets from appearing.

[frehner]

Related Shopify/hydrogen#1155

[jplhomer]

Any ideas on how we can at least disable this error message? I thought #263 would fix this, but it does not 😢 @frandiox idea to drop CJS sounds appealing #1155 but we are blocked there.

Would it be totally gross to capture console.log outputs and simply filter them in the shopify hydrogen dev command @cartogram? Curious how we can clean this up before GA.

[frehner]

[edit] Whoops my bad, I thought this was a different issue

[Powma]

Hello,

When I run I have the same problem than him :
@shopify/hydrogen doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

I did that :
npx create-hydrogen-app
cd hydrogen-app
npm i
npm run dev

Do you have a solution for fixed that ?

[susannepeng]

Hi all,

We're developing a third party component library for use with Hydrogen and running into the same problem when we try to import anything from @shopify/hydrogen from our component library.

Our component library lists @shopify/hydrogen as a peer dependency and the components it exports are designed to be used by a merchant in their own Hydrogen app.

Demo

The third party component

• https://github.com/Owly-Owl/third-party-component-library/blob/master/src/components/ThirdPartyServerComponent.server.tsx#L2

The third party component used inside of a Hydrogen app

• https://github.com/Owly-Owl/hydrogen-app-cjs-error-demo/blob/master/src/App.server.jsx#L21

For now, the third party component library is packaged via npm pack and listed as a dependency of the user's Hydrogen app. Both repos linked above were set up to help illustrate this issue.

Errors

When running the app with npm run dev:

And the dev server output shows:

@shopify/hydrogen doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
Sourcemap for "/Users/susannepeng/dev/temp/hydrogen/hydrogen-app-cjs-error-demo/node_modules/kolorist/dist/module/index.js" points to missing source files
2:49:03 pm [vite] Error when evaluating SSR module /src/App.server:
/Users/susannepeng/dev/temp/hydrogen/hydrogen-app-cjs-error-demo/node_modules/@shopify/hydrogen/client.js:1
export * from './dist/esnext/client';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/Users/susannepeng/dev/temp/hydrogen/hydrogen-app-cjs-error-demo/node_modules/third-party-component-library/dist/cjs/components/ThirdPartyServerComponent.server.js:8:18)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)

Re: node module resolution

We think this may be a module resolution issue. Our component library expects to use certain Hydrogen components, hooks, etc.. We compile our modules to both CJS and ESM and the user app resolves to our CJS modules, which are in turn attempting to resolve modules from @shopify/hydrogen. Here we run into the problem -- it seems that certain Hydrogen foundation/framework modules are only compiled to ESM.

Further investigation indicates that @shopify/hydrogen has been packaged this way due to its dependency on Vite. There has also been talk of not compiling to CJS at all.

We tried setting the user app to use ESM module resolution and were met with the following error:

> hydrogen-app-cjs-error-demo@0.0.0 dev /Users/susannepeng/dev/temp/hydrogen/hydrogen-app-cjs-error-demo
> shopify hydrogen dev

failed to load config from /Users/susannepeng/dev/temp/hydrogen/hydrogen-app-cjs-error-demo/vite.config.js

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

    Cannot find module '/Users/susannepeng/dev/temp/hydrogen/hydrogen-app-cjs-error-demo/node_modules/@shopify/hydrogen/plugin' imported from /Users/susannepeng/dev/temp/hydrogen/hydrogen-app-cjs-error-demo/vite.config.js
Did you mean to import @shopify/hydrogen/plugin.js?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We tried to dig further into this but got lost in the weeds of Vite internals.

For compatibility purposes and encouraging the growth of an ecosystem of third party libraries surrounding Hydrogen, could @shopify/hydrogen also provide modules compiled to CJS?

[frandiox]

@susannepeng Hi! I think this problem is not due to the warning mentioned in this issue, so it would be better to create a new issue with this information.

To answer your question, though: Hydrogen is used as ESM in Vite. If you were to import a CJS version of Hydrogen in your library, the user would end up with 2 different copies of that Hydrogen component. Plus, Vite itself and the ecosystem are moving towards ESM-first.

I think the problem here is that your library is imported as CJS, and then it imports Hydrogen as ESM, right? Could you make sure your lib is imported as ESM instead? For that, I think you might need to provide ESM-only version and perhaps play with Vite's optimizeDeps.include.

If that still doesn't work, please report this again as a new issue with your findings.

[rafid-kore]

when I tried to build the hydrogen app in AWS codebuild ,I got the following error, any solution ?

[blittle]

@rafid-kore I think this is an unrelated issue. Could you create a separate issue?