Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
cyberwombat opened this issue Jan 29, 2023 · 2 comments
Open
2 tasks done

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

cyberwombat opened this issue Jan 29, 2023 · 2 comments

Comments

@cyberwombat
Copy link

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

@cyberwombat cyberwombat changed the title [Bug]: <YOUR ISSUE TITLE> [Bug]: vite.config.ts import error Jan 29, 2023
@cyberwombat cyberwombat changed the title [Bug]: vite.config.ts import error [Bug]: vite.config.ts ESM import error Jan 29, 2023
@cyberwombat
Copy link
Author

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.

@Arkham
Copy link

Arkham commented Jan 30, 2023

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

@pepicrft pepicrft transferred this issue from Shopify/cli Feb 16, 2023
@jplhomer jplhomer transferred this issue from Shopify/hydrogen Feb 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants