React version mismatch when creating new projects

richardhomewood commented 3 weeks ago

EDIT: See current workaround in https://github.com/Shopify/hydrogen/issues/2040#issuecomment-2084636795

What is the location of your example repository?

New

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.1

What version of Remix are you using?

2.9.1

Steps to Reproduce

Background:

macOS Sonoma 14.2.1 (23C71) Node v20.12.2

Steps to reproduce

Run npm create @shopify/hydrogen@latest
Enter y to install

Expected Behavior

Create a Hydrogen app

Actual Behavior

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

  ERROR  Cannot read properties of null (reading 'useState')

 /Users/richard.homewood/.npm/_npx/e1eac94ad41cc36f/node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();
 1622:   return dispatcher.useState(initialState);
 1623: }
 1624: function useReducer(reducer, initialArg, init) {
 1625:   var dispatcher = resolveDispatcher();

Hyperlink-rc commented 3 weeks ago

Hi all,

getting same error with MacBook Pro M1. Switching node version (using nvm) from 18 to 20 but still get same error message.

I also tried with previous Hydrogen versions up to 4.0 without success.

Following complete error log prompted on my terminal:

Need to install the following packages:
@shopify/create-hydrogen@4.0.5
Ok to proceed? (y) y

npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated rollup-plugin-inject@3.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated vm2@3.9.19: The library contains critical security issues and should not be used for production! The maintenance of the project has been discontinued. Consider migrating your code to isolated-vm.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
The above error occurred in the <BoxWithBorder> component:

    at BoxWithBorder (file:///Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:23:26)
    at Banner (file:///Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:63:19)
    at Alert (file:///Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Alert.js:7:18)
    at App (file:///Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/ink/build/components/App.js:18:9)

React will try to recreate this component tree from scratch using the error boundary you provided, InternalApp.

  ERROR  Cannot read properties of null (reading 'useState')

 /Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();
 1622:   return dispatcher.useState(initialState);
 1623: }
 1624: function useReducer(reducer, initialArg, init) {
 1625:   var dispatcher = resolveDispatcher();

 - useState (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21)
 - useLayout (file:///Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/dist/private/node/ui/hooks/use-layout.js:7:33)
 - BoxWithBorder (file:///Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:24:27)
 - renderWithHooks (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:6659:18)
 - mountIndeterminateComponent (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:11276:13)
 - beginWork (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:12799:16)
 - beginWork$1 (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:19608:14)
 - performUnitOfWork (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:18742:12)
 - workLoopSync (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:18648:5)
 - renderRootSync (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:18616:7)

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

  ERROR  Cannot read properties of null (reading 'useState')

 /Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();
 1622:   return dispatcher.useState(initialState);
 1623: }
 1624: function useReducer(reducer, initialArg, init) {
 1625:   var dispatcher = resolveDispatcher();

 - useState (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21)
 - SelectPrompt (file:///Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/@shopify/cli-kit/dist/private/node/ui/components/SelectPrompt.js:17:33)
 - renderWithHooks (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:6659:18)
 - mountIndeterminateComponent (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:11276:13)
 - beginWork (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:12799:16)
 - beginWork$1 (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:19608:14)
 - performUnitOfWork (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:18742:12)
 - workLoopSync (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:18648:5)
 - renderRootSync (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:18616:7)
 - performSyncWorkOnRoot (/Users/robertocarcamo/.npm/_npx/c52c58994f80bf21/node_modules/react-reconciler/cjs/react-reconciler.development.js:18232:20)

jamalsoueidan commented 3 weeks ago

This started to happen to me yesterday, after I update mini-oxygen to 3.0.1, I will try to downgrade to 3.0.0, maybe this would fix the problem again.

DevAOC commented 3 weeks ago

I'm getting the same: CleanShot 2024-04-26 at 11 34 52@2x

Tried running:

npx shopify hydrogen init
npm create @shopify/hydrogen@latest

Neither worked and returned the same error

jamalsoueidan commented 3 weeks ago

After downgrading, it's working again.

skdishansachin commented 2 weeks ago

@jamalsoueidan I tried to create a new project with Hydrogen 3.0.0 but it's not working as expected

...
Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
✔ Name your new Hydrogen storefront · store-test
✔ Choose a template · Hello world
✖ Cloning into '/tmp/9e1c0757e39577ee77bc904e59efcb7d/download'...
  fatal: Remote branch stackblitz not found in upstream origin
◼ Initializing your app store-test
◼ Installing dependencies with pnpm
◼ Cleaning up
file:///home/dishansachin/.local/share/pnpm/store/v3/tmp/dlx-421252/node_modules/.pnpm/@shopify+cli-kit@3.0.0/node_modules/@shopify/cli-kit/dist/index-117ce1ba.js:35795
      throw new Abort(err.message);
            ^

Abort [Error]: Cloning into '/tmp/9e1c0757e39577ee77bc904e59efcb7d/download'...
fatal: Remote branch stackblitz not found in upstream origin

    at file:///home/dishansachin/.local/share/pnpm/store/v3/tmp/dlx-421252/node_modules/.pnpm/@shopify+cli-kit@3.0.0/node_modules/@shopify/cli-kit/src/git.ts:16:13
    at onError2 (file:///home/dishansachin/.local/share/pnpm/store/v3/tmp/dlx-421252/node_modules/.pnpm/@shopify+cli-kit@3.0.0/node_modules/node_modules/simple-git/dist/esm/index.js:1342:7) {
  tryMessage: null
}

What am I doing wrong?

jamalsoueidan commented 2 weeks ago

You are not doing something wrong, we need to wait until Monday to get it fixed.

aaronkantrowitz commented 2 weeks ago

Not working for me even if I downgrade.. builds won't compile. Hope a fix is ready Monday morn 😬

jamalsoueidan commented 2 weeks ago

I was able to revert back to old package-lock 7 days ago, and then do npm ci, it will download exactly same packages I had before, and it's working.

Hyperlink-rc commented 2 weeks ago

I was able to revert back to old package-lock 7 days ago, and then do npm ci, it will download exactly same packages I had before, and it's working.

Hi @jamalsoueidan can you share more details about versions that are working for you? I need to have a working hydrogen project as soon as possible...

Thank you in advance

jamalsoueidan commented 2 weeks ago

[https://github.com/jamalsoueidan/booking-store/package-lock.json

This is my package-lock.

aqib668 commented 2 weeks ago

@jamalsoueidan It is showing not found

skdishansachin commented 2 weeks ago

@aqib668 Try this out https://github.com/jamalsoueidan/booking-store/blob/main/package-lock.json

jamalsoueidan commented 2 weeks ago

@jamalsoueidan It is showing not found

because the link at the start [ sorry

SpoonAndBirdcage commented 2 weeks ago

Looks like this issue might have something to do with having multiple versions of react. Looks to me that hydrogen-react is using 18.0.0 while all the other packages involved with hydrogen are using 18.2.0. I managed to force hydrogen-react to use react and react-dom 18.2.0 and it seems to all be working as intended. Had to fork the repo and install it that way but it looks to now be working.

jhonboyy commented 2 weeks ago

@SpoonAndBirdcage it seems working now but I have this errors in the app: useContext@http://localhost:3000/node_modules/.vite/deps/chunk-E5676FJW.js:1062:28 useRouteError@http://localhost:3000/node_modules/.vite/deps/chunk-WAUG3VOS.js:604:31 ErrorBoundary@http://localhost:3000/app/root.jsx:126:30 renderWithHooks@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:11568:35 mountIndeterminateComponent@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:14946:36 beginWork$1@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:19781:31 performUnitOfWork@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:19226:31 workLoopSync@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:19165:30 renderRootSync@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:19144:27 recoverFromConcurrentError@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:18764:42 performSyncWorkOnRoot@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:18907:54 flushSyncCallbacks@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:9135:38 flushRoot@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:18933:33 attemptSynchronousHydration$1@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:20828:26 attemptSynchronousHydration@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:5129:39 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:5491:44 dispatchEvent@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:5472:92 dispatchDiscreteEvent@http://localhost:3000/node_modules/.vite/deps/chunk-M2HMQGFR.js:5449:26

MuhammadHassanAmin commented 2 weeks ago

following....

jamalsoueidan commented 2 weeks ago

Not seeming to work yet...

hydrogen-may@1.0.7 dev shopify hydrogen dev --codegen

Port 3000 is in use, trying another one...

Environment variables injected into MiniOxygen:

SESSION_SECRET from local .env PUBLIC_STORE_DOMAIN from local .env

➜ Local: http://localhost:3001/ ➜ Network: use --host to expose ➜ press h + enter to show help

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. The above error occurred in the component:

at BoxWithBorder (file:///Users/jamalsoueidan/Development/hydrogen-may/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:23:26) at Banner (file:///Users/jamalsoueidan/Development/hydrogen-may/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:61:19) at Alert (file:///Users/jamalsoueidan/Development/hydrogen-may/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Alert.js:7:18) at App (file:///Users/jamalsoueidan/Development/hydrogen-may/node_modules/ink/build/components/App.js:19:9)

React will try to recreate this component tree from scratch using the error boundary you provided, InternalApp.

ERROR Cannot read properties of null (reading 'useState')

node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

kucherenko-ae commented 2 weeks ago

following this issue for creating new project and also the same problem in case of copying the skeleton template repository and trying to launch dev

RcKeller commented 2 weeks ago

Following.

Question - since @shopify/hydrogen@2024.4.1 is only a few days old, was it ever working for anybody else for creating a new project? Would like to understand the root cause and risk of future regressions of this nature.

athithya12 commented 2 weeks ago

@RcKeller,

I can confirm that last week I spun up a new project without issues. Today I tried the same and promptly ran into this error.

skdishansachin commented 2 weeks ago

I don't know where this is heading 😕. Has anyone taken any action to resolve this issue? I need to sort this out, so any progress update would be much appreciated. Thanks, everyone 😀.

michenly commented 2 weeks ago

HI folks, just ensuring that this issue have the attention of the team and we are working on re-producing and coming up with solution. Thank you all for your patience.

mhmdjaw commented 2 weeks ago

Anyone getting this warning after starting dev?

Screenshot 2024-04-29 170702

I tried running h2 codegen --watch but I get this error even though i have the latest version of @shopify/hydrogen installed:

Screenshot 2024-04-29 170925

Codegen is just not working for some reason.

graygilmore commented 2 weeks ago

Anyone getting this warning after starting dev?

@mhmdjaw please create a different issue.

michenly commented 2 weeks ago

An upstream dependency mismatch is found in @shopify/cli-kit and had been reported to appropriate team.

HeisUser commented 2 weeks ago

Please inform me (reply here) if this issue been resolved.

RcKeller commented 2 weeks ago

Here is a hotfix, which anybody can use to unblock themselves. Clone, install, and invoke the create tool directly. https://github.com/Shopify/hydrogen/pull/2049

frandiox commented 2 weeks ago

After some research, it looks like this is something that needs to be fixed properly in @shopify/cli-kit.

For the time being, we've added a better error when this happens:

The current workaround is to run npm create @shopify/hydrogen@latest --legacy-peer-deps to avoid the React mismatch during project creation. However, you might have already a wrong version installed in cache so, if that still doesn't work, try npm cache clean --force first. Or simply copy paste the new command shown in the warning (it should give you a random cache directory to bypass cache).

HeisUser commented 2 weeks ago

EDIT: See current workaround in #2040 (comment)

What is the location of your example repository?

New

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.4.1

What version of Remix are you using?

2.9.1

Steps to Reproduce

Background:

macOS Sonoma 14.2.1 (23C71) Node v20.12.2

Steps to reproduce

Run npm create @shopify/hydrogen@latest
Enter y to install

Expected Behavior

Create a Hydrogen app

Actual Behavior

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

  ERROR  Cannot read properties of null (reading 'useState')

 /Users/richard.homewood/.npm/_npx/e1eac94ad41cc36f/node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

 1619: }
 1620: function useState(initialState) {
 1621:   var dispatcher = resolveDispatcher();
 1622:   return dispatcher.useState(initialState);
 1623: }
 1624: function useReducer(reducer, initialArg, init) {
 1625:   var dispatcher = resolveDispatcher();

This issue still happening while updated to the latest version of dependencies with the commands as follows : $ npm install -g npm-check-updates --verbose  $ ncu $ ncu -u --verbose $ npm install --legacy-peer-deps $ npm update --save $ npm run dev

But this issue has solved and no problems without update latest version of dependencies and just run the command as follow : $ npm create @shopify/hydrogen@latest --legacy-peer-deps $ npm run dev

Anyways, this issue of React version mismatched still happening with I'd updated with commands as follows : $ npm install react@latest react-dom@latest $ npm run dev

Version Details as follow : Current Shopify CLI version: 3.59.2 Node v22.0.0 npm 10.6.0 MacOS 14.4.1 (23E224) @Intel-besed

Here is the errors on my system as follow: $ npm run dev `hydro-storefront@1.0.9 dev shopify hydrogen dev --codegen

Port 3000 is in use, trying another one...

Environment variables injected into MiniOxygen:

SESSION_SECRET from local .env PUBLIC_STORE_DOMAIN from local .env

➜ Local: http://localhost:3001/ ➜ Network: use --host to expose ➜ press h + enter to show help

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. The above error occurred in the component:

at BoxWithBorder (file:///usr/local/var/www/gitHub/hydro-storefront/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:23:26) at Banner (file:///usr/local/var/www/gitHub/hydro-storefront/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:61:19) at Alert (file:///usr/local/var/www/gitHub/hydro-storefront/node_modules/@shopify/cli-kit/dist/private/node/ui/components/Alert.js:7:18) at App (file:///usr/local/var/www/gitHub/hydro-storefront/node_modules/ink/build/components/App.js:19:9)

React will try to recreate this component tree from scratch using the error boundary you provided, InternalApp.

ERROR Cannot read properties of null (reading 'useState')

node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21

1619: } 1620: function useState(initialState) { 1621: var dispatcher = resolveDispatcher(); 1622: return dispatcher.useState(initialState); 1623: } 1624: function useReducer(reducer, initialArg, init) { 1625: var dispatcher = resolveDispatcher();

useState (node_modules/@shopify/cli-kit/node_modules/react/cjs/react.development.js:1622:21)
useLayout (node_modules/@shopify/cli-kit/dist/private/node/ui/hooks/use-layout.js:7:33)
BoxWithBorder (node_modules/@shopify/cli-kit/dist/private/node/ui/components/Banner.js:24:27)
renderWithHooks (node_modules/react-reconciler/cjs/react-reconciler.development.js:6659:18)
mountIndeterminateComponent (node_modules/react-reconciler/cjs/react-reconciler.development.js:11276:13)
beginWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:12799:16)
beginWork$1 (node_modules/react-reconciler/cjs/react-reconciler.development.js:19608:14)
performUnitOfWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:18742:12)
workLoopSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18648:5)
renderRootSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18616:7)

› Warning: Could not find ts-node at /usr/local/var/www/gitHub/hydro-storefront/node_modules/@shopify/cli/dist/index-e6f8190d.js. Please › ensure that ts-node is a devDependency. Falling back to compiled source.`

michenly commented 2 weeks ago

The fix is now released and npm create @shopify/hydrogen@latest can be use to create new project.

🗒️ that you will see Warning: Could not find ts-node while running the project locally. This is to a known issue and can be safety ignore.

cc HeisUser

jamalsoueidan commented 2 weeks ago

Thank you 🕺🏻

HeisUser commented 2 weeks ago

The fix is now released and npm create @shopify/hydrogen@latest can be use to create new project.

🗒️ that you will see Warning: Could not find ts-node while running the project locally. This is to a known issue and can be safety ignore.

cc HeisUser

Yes~ I'd stated.. But those dependencies not the latest version.

michenly commented 2 weeks ago

Yes~ I'd stated.. But those dependencies not the latest version.

Which dependencies are you talking about specifically?

richardhomewood commented 2 weeks ago

Working great, thanks all!

npm create @shopify/hydrogen@latest
Need to install the following packages:
@shopify/create-hydrogen@4.3.8
Ok to proceed? (y) y
?  Connect to Shopify:
✔  Use sample data from mock.shop (You can connect a Shopify account later)

?  Where would you like to create your storefront?
✔  test-install

?  Select a language:
✔  JavaScript

?  Install dependencies with npm?
✔  Yes

?  Create a global `h2` alias to run commands instead of `npx shopify hydrogen` ?
✔  Yes

╭─ info ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                          │
│  You'll need to restart your terminal session to make `h2` alias available.                                                              │
│                                                                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

╭─ success ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                          │
│  test-install is ready to build.                                                                                                         │
│                                                                                                                                          │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

?  Do you want to scaffold routes and core functionality?
✔  Yes, set up now

?  Select a URL structure to support multiple markets:
✔  Subfolders (example.com/fr-ca/...)

╭─ success ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                     │
│  Storefront setup complete!                                                                                                                         │
│                                                                                                                                                     │
│    Shopify:   Mock.shop                                                                                                                             │
│    Language:  JavaScript                                                                                                                            │
│    Markets:   Subfolders                                                                                                                            │
│    Routes:                                                                                                                                          │
│      • Home (/ & /:catchAll)                                                                                                                        │
│      • Page (/pages/:handle)                                                                                                                        │
│      • Cart (/cart/* & /discount/*)                                                                                                                 │
│      • Products (/products/:handle)                                                                                                                 │
│      • Collections (/collections/*)                                                                                                                 │
│      • Policies (/policies & /policies/:handle)                                                                                                     │
│      • Blogs (/blogs/*)                                                                                                                             │
│      • Account (/account/*)                                                                                                                         │
│      • Search (/api/predictive-search & /search)                                                                                                    │
│      • Robots (/robots.txt)                                                                                                                         │
│      • Sitemap (/sitemap.xml)                                                                                                                       │
│                                                                                                                                                     │
│  Next steps                                                                                                                                         │
│                                                                                                                                                     │
│    • Run `cd test-install && npm run dev`                                                                                                           │
│                                                                                                                                                     │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

callumflack commented 1 week ago

Anyone getting this warning after starting dev? Codegen is just not working for some reason.

I have this exact issue. Have followed upgrade-2024.1.1-to-2024.4.0 guide to a T, but something is off. Prob a package version mismatch. Pretty frustrating how complex these versions seem to be getting.

Di you find a solution?

mhmdjaw commented 1 week ago

Anyone getting this warning after starting dev? Codegen is just not working for some reason.

I have this exact issue. Have followed upgrade-2024.1.1-to-2024.4.0 guide to a T, but something is off. Prob a package version mismatch. Pretty frustrating how complex these versions seem to be getting.

Di you find a solution?

I was able to solve it somehow by upgrading hydrogen and oxygen related packages. Just try upgrading all the packages in the hydrogen read me file.

michenly commented 1 week ago

Anyone getting this warning after starting dev? Codegen is just not working for some reason.

I have this exact issue. Have followed upgrade-2024.1.1-to-2024.4.0 guide to a T, but something is off. Prob a package version mismatch. Pretty frustrating how complex these versions seem to be getting.

Di you find a solution?

The issue is fixed for the latest version of skeleton template (when you create a new project) However, if you have an existing project, try upgrading @shopify/cli to "3.59.2" and also ensuring there is only one version of react in your package.lock file

blittle commented 1 week ago

@callumflack

Pretty frustrating how complex these versions seem to be getting.

I totally agree, and we need to simplify how everything works.

Shopify / hydrogen