[Bug]: vite.config.ts ESM import error

[Yashua]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Hydrogen custom storefront

Expected behavior

I am trying to get the demo store working in TS in ESM. Ive essentially done this:

• installed demo store per instructions
• fixed all the issues with missing types etc
• set my package.json type to module

Doing yarn dev results in an error.

failed to load config from /Shopify/vite.config.ts
Error:   Cannot use import statement outside a module             

/Shopify/node_modules/@shopify/hydrogen/dist/esnext/framework/plugin.js:1
import hydrogenConfig from './plugins/vite-plugin-hydrogen-config.js';
^^^^^^

I've pushed the code to https://github.com/cyberwombat/hydrogen

I've searched for similar errors - some stuff came up on Vite repo but not related (issues with linked directories).

Ive tried Vite versions 2, 3 and 4.

The other commands for the cli seem to work ok.

Actual behavior

Error thrown

Stack trace

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Module._load (node:internal/modules/cjs/loader:827:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)

Reproduction steps

1. Clone https://github.com/cyberwombat/hydrogen
2. Run yarn
3. Run yarn dev

Operating System

MacOS Ventura 13.2

Shopify CLI version (check your project's package.json if you're not sure)

3.38.0

Shell

tsh

Node version (run node -v if you're not sure)

18.0.0

What language and version are you using in your application?

NodeJS

[Yashua]

I should add that I initially tried without type = module but that sent me down a whole bunch of other errors related to CJS, vite etc... For me the demo was nowhere close to being able to run out of the box - so seems that getting esm working is a better path than the patching of cjs/vite I was experiencing.

[Ju Liu]

Hi there, thanks for reporting this, I'll page our friends @Shopify/hydrogen which might be able to help you.