search

Shopify / hydrogen

Hydrogen lets you build faster headless storefronts in less time, on Shopify.
https://hydrogen.shop
MIT License
1.35k stars 261 forks source link

Cannot publish #1657

Closed danabdn closed 7 months ago

danabdn commented 7 months ago

What is the location of your example repository?

Private

Which package or tool is having this issue?

Oxygen

What version of that package or tool are you using?

~2023.10.3 (see Package.json below for versions)

What version of Remix are you using?

See Package.json below for versions

Steps to Reproduce

  1. Ensure actions installed for Shopify for Hydrogen app
  2. Check in code to Github (all permissions Shopify requested granted)
  3. Examine action result
  4. Fails on step "Add dependencies".
  5. Does not publish.

Code is very close to the demo-store on the Hydrgen GitHub page.

Expected Behavior

I expect that the website, which runs fine locally to publish to Oxygen on commit via GitHub. Since it has published fine before, I did not expect any issues. However, I have since upgraded the project to closely match that latest demo-store code. If it works locally, it should work (the same) when published. Any differences I personally would consider a bug and hope you guys would agree too.

Actual Behavior

Examining the GitHub action when deploying to oxygen, which failed at "Add dependencies" stage. Error message below...

Run yarn
yarn install v1.22.21
info No lockfile found.
[1/[5]([URL]#step:6:6)] Validating package.json...
error hydrogen@2.1.[6]([URL]#step:6:7): The engine "node" is incompatible with this module. Expected version ">=1[8]([URL]#step:6:9).0.0". Got "16.20.2"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: Process completed with exit code 1.

(note I have replace the potentially sensitive job urls with [URL].

Notes

My package.json

{
  "name": "hydrogen",
  "private": true,
  "sideEffects": false,
  "version": "2.1.6",
  "scripts": {
    "dev": "shopify hydrogen dev --worker --codegen",
    "build": "shopify hydrogen build",
    "preview": "npm run build && shopify hydrogen preview --worker",
    "e2e": "npx playwright test",
    "e2e:ui": "npx playwright test --ui",
    "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
    "format": "prettier --write --ignore-unknown .",
    "format:check": "prettier --check --ignore-unknown .",
    "typecheck": "tsc --noEmit"
  },
  "browserslist": [
    "defaults"
  ],
  "prettier": "@shopify/prettier-config",
  "dependencies": {
    "@headlessui/react": "^1.7.2",
    "@remix-run/react": "2.1.0",
    "@remix-run/server-runtime": "2.1.0",
    "@shopify/cli": "3.52.0",
    "@shopify/cli-hydrogen": "^6.1.0",
    "@shopify/hydrogen": "~2023.10.3",
    "@shopify/remix-oxygen": "^2.0.2",
    "clsx": "^1.2.1",
    "cross-env": "^7.0.3",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "isbot": "^3.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intersection-observer": "^9.4.1",
    "react-use": "^17.4.0",
    "schema-dts": "^1.1.0",
    "tiny-invariant": "^1.2.0",
    "typographic-base": "^1.0.4",
    "js-cookie": "3.0.5"
  },
  "devDependencies": {
    "@playwright/test": "^1.40.1",
    "@remix-run/dev": "2.1.0",
    "@remix-run/eslint-config": "2.1.0",
    "@shopify/eslint-plugin": "^42.0.1",
    "@shopify/oxygen-workers-types": "^4.0.0",
    "@shopify/prettier-config": "^1.1.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "@total-typescript/ts-reset": "^0.4.2",
    "@types/eslint": "^8.4.10",
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.2.7",
    "cross-env": "^7.0.3",
    "eslint": "^8.20.0",
    "eslint-plugin-hydrogen": "0.12.2",
    "postcss": "^8.4.21",
    "postcss-import": "^15.1.0",
    "postcss-preset-env": "^8.2.0",
    "prettier": "3.2.4",
    "rimraf": "^3.0.2",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.2.2",
    "postcss-nesting": "11.2.2",
    "prettier-plugin-tailwindcss": "0.5.11",
    "react-icons": "5.0.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Obviously need to be able to publish so would appreciate any help.

Thanks, Dan.

blittle commented 7 months ago

Hi Dan, the package.json file I don't think determines what version of Node is run within the action runner. Instead look inside your Github workflow yml file. For example, our workflow says the node version should come from .nvmrc

danabdn commented 7 months ago

Hi Dan, the package.json file I don't think determines what version of Node is run within the action runner. Instead look inside your Github workflow yml file. For example, our workflow says the node version should come from .nvmrc

You're right @blittle - there is some sort of weird yml file thing with node 16 and yarn inside. But I have not the first idea how to edit such a document to e.g. use npm instead of yarn. Is there a way to via Shopify e.g. CLI to get this updated or do I need to learn about these files? How do I do it so I don't break the Oxygen server?

Do you know where on the Shopify (Hydrogen) website there exists documentation on this topic? I can't seem to find any which might suggest I shouldn't be touching it.

So - not sure if bug i.e. it should be automatically updated based on current package.json environment, that I need to run a safe CLI command to refresh or that everyone who uses Hydrogen at some point will be forced to start editing this file to make sure up to date e.g. expected version of node

Maybe I'll just upgrade the node version and see if that fixes things. Would be great if it used npm instead of yarn though.

Confusedly yours, Dan.

danabdn commented 7 months ago

Thanks again @blittle. Between your example and some help from a popular AI tool, it's now working.

To resolve...

  1. Changed the version of node from 16 to 18 (to match the one hydrogen uses). I'll take a look at nvmrc at a later date once I've obviously learned some more about CI & GitHub.
  2. To edit the yml file (in my case to move from a very old version of yarn to npm), this can be found in your project under the folder .github\workflows (easy to miss - I didn't realise it was even in my project). Update to use npm (ask ChatGPT to do this for you while checking the current version - edit sensibly). If you get an error about npm build, add npm run build instead.
  3. In GitHub Actions you can see your action success (or failure) results which gives details of any issues. Good error messages make it easy to diagnose issues.

Some documentation does exist and can be found here.

Action needed? Maybe consider adding to a troubleshooting page (add to failing oxygen deployments section) e.g. my project doesn't publish. Then describe how to access Github actions, check errors and give example of node version as a change. Perhaps with reasons why someone may wish to edit this file at all e.g. if it can do something helpful in common scenarios or might need to be updated periodically and if so what's likely needing to be updated.

Thanks, Dan.