Cannot start project with latest configuration - npm run dev fails to launch

danabdn commented 1 month ago

What is the location of your example repository?

Private

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

Templates > Skeleton > Latest as of 15th April 2024 (package.json below)

What version of Remix are you using?

^2.8.0

Steps to Reproduce

My project was working fine.
Decided to update package.json (and relevant files) to latest found in Templates > Skeleton.
Attempt to execute "npm run dev".
Failed to run / start local web server with absolutely no error.
Cannot diagnose error because the command prompt is exiting and providing no error info. Like someone used a try catch next.
This project uses all of the latest configuration from the Skeleton > Template project
Have re-checked all local root files and updated the entry.client.tsx, entry.server.tsx and root.tsx
No errors in project

Package.json

{
  "name": "hydrogen",
  "private": true,
  "sideEffects": false,
  "version": "1.0.7",
  "type": "module",
  "scripts": {
    "build": "shopify hydrogen build --codegen",
    "dev": "shopify hydrogen dev --codegen",
    "preview": "npm run build && shopify hydrogen preview",
    "lint": "eslint --no-error-on-unmatched-pattern --ext .js,.ts,.jsx,.tsx .",
    "typecheck": "tsc --noEmit",
    "codegen": "shopify hydrogen codegen"
  },
  "browserslist": [
    "defaults"
  ],
  "prettier": "@shopify/prettier-config",
  "dependencies": {
    "@headlessui/react": "^1.7.2",
    "@headlessui/tailwindcss": "0.2.0",
    "@remix-run/react": "^2.8.0",
    "@remix-run/server-runtime": "^2.8.0",
    "@shopify/cli": "3.52.0",
    "@shopify/cli-hydrogen": "^8.0.0",
    "@shopify/hydrogen": "2024.4.0",
    "@shopify/remix-oxygen": "^2.0.4",
    "clsx": "^1.2.1",
    "cross-env": "^7.0.3",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "isbot": "^3.8.0",
    "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",
    "pdfmake": "0.2.10"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "5.0.2",
    "@playwright/test": "^1.40.1",
    "@remix-run/dev": "^2.8.0",
    "@remix-run/eslint-config": "^2.8.0",
    "@shopify/hydrogen-codegen": "^0.3.0",
    "@shopify/mini-oxygen": "^3.0.0",
    "@shopify/eslint-plugin": "^44.0.0",
    "@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",
    "@types/pdfmake": "0.2.9",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.3.1"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

Expected Behavior

Run the command "npm run dev"
Local server development environment runs
Click on the localhost:3000 link to view website locally

Actual Behavior

PROBLEM 1 - The web development server does not load - command exits with no error (or anything at all) and back to where you can type in the next command.

Running the npm run dev command (shown below), the terminal in VSCode just exits without displaying an error.

PS C:\GitHub\XXXX\hydrogen\hydrogen> npm run dev

hydrogen@1.0.7 dev shopify hydrogen dev --codegen

PS C:\GitHub\XXXX\hydrogen\hydrogen>

PROBLEM 2 - A new file is created called "vite.config.ts.timestamp-xxxx.mjs (where x is a timestamp).

The content of the vite config file that is automatically created (every time I run npm run dev) outputs the following...

// vite.config.ts
import { defineConfig } from "file:///C:/GitHub/XXX/hydrogen/hydrogen/node_modules/vite/dist/node/index.js";
import { hydrogen } from "file:///C:/GitHub/XXX/hydrogen/hydrogen/node_modules/@shopify/hydrogen/dist/vite/plugin.js";
import { oxygen } from "file:///C:/GitHub/XXX/hydrogen/hydrogen/node_modules/@shopify/mini-oxygen/dist/vite/plugin.js";
import { vitePlugin as remix } from "file:///C:/GitHub/XXX/hydrogen/hydrogen/node_modules/@remix-run/dev/dist/index.js";
import tsconfigPaths from "file:///C:/GitHub/XXX/hydrogen/hydrogen/node_modules/vite-tsconfig-paths/dist/index.mjs";
var vite_config_default = defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.preset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true
      }
    }),
    tsconfigPaths()
  ]
});
export {
  vite_config_default as default
};
// then a base64 mapping with no useful information inside.

I cannot view my website locally anymore. I cannot develop my app. When I tried to run npm run dev with debug attached, there is a small popup that shows "Debug adapter process has terminated unexpectedly".

cli-hydrogen is 8.0.0 (based on the version number - most likely to be the culprit). It should at least give an error e.g. where about it encountered the error.

Now cannot do anything on the project. Any help appreciated or possibly indicate how I diagnose this critical error.

PS I've really been enjoying developing my Hydrogen project!

Edit: Stack Overflow issue submitted here

wizardlyhel commented 1 month ago

@danabdn From the looks of it, I think your project may be missing some vite setup. Run h2 setup vite. Afterwards, make sure to run npm install (May need to clean out node_modules and/or package-lock.json)

blittle commented 1 month ago

I also recommend updating Hydrogen by using the h2 upgrade command.

danabdn commented 1 month ago

@danabdn From the looks of it, I think your project may be missing some vite setup. Run h2 setup vite. Afterwards, make sure to run npm install (May need to clean out node_modules and/or package-lock.json)

I deleted node_modules and package-lock.json, ran the setup vite command (result: This project already has a Vite config file) and then tried npm run dev again and nothing. Just exits with code 1. I.e. the CLI has crashed and is not reporting anything.

Problem still present - code 1 suggests it's a crash with the CLI.

danabdn commented 1 month ago

Okay - so I deduced there was a problem with the CLI (as above) and discovered that there was and upgrade available from v3.52.0 to v3.58.2. Now I get an actual error message...

Failed to load PostCSS config (searchPath: C:/GitHub/XXXX/hydrogen/hydrogen): [ReferenceError] module is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and 'C:\GitHub\XXXX\hydrogen\hydrogen\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. ReferenceError: module is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension and 'C:\GitHub\XXXX\hydrogen\hydrogen\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. at file:///C:/GitHub/XXXX/hydrogen/hydrogen/postcss.config.js:1:1 at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Guess I will review my package.json for any possible upgrades and look at the above error. Will let you know how I get on.

danabdn commented 1 month ago

Step forward - to resolve the above error, you can rename postcss.config.js to postcss.config.cjs (or possibly just delete the file). Reference - https://github.com/QwikDev/qwik/issues/836

The web development server text now appears in the CLI :-)

However, when launching the web dev server in a browser, the following message is displayed on black background with white text.

ReferenceError: exports is not defined

AND /graphiql results in the same error message.

ReferenceError: exports is not defined
    at C:/GitHub/XXXX/hydrogen/hydrogen/node_modules/typographic-base/index.es5.js:3:23
    at Object.runViteModule (GitHub/XXXX/hydrogen/hydrogen/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1171:17)
    at ViteRuntime.directRequest (GitHub/XXXX/hydrogen/hydrogen/node_modules/@shopify/mini-oxygen/dist/vite/worker-entry.js:1026:78)
...

frandiox commented 1 month ago

As mentioned by others, I would recommend reverting back to your original project, then do h2 upgrade to update dependencies plus h2 setup vite to start using Vite.

This last command already renames your postcss.config.js to postcss.config.cjs and it does the same for .eslintrc.js.

Otherwise, if you prefer to do it manually, here's what we do in the command to have a reference of what you need to change: https://github.com/Shopify/hydrogen/blob/main/packages/cli/src/commands/hydrogen/setup/vite.ts#L52

However, when launching the web dev server in a browser, the following message is displayed on black background with white text.

This is unrelated to the first issue. The problem here is that typographic-base uses CJS internally and you need to tell Vite to optimize it for ESM. You can see here how we do it in the demo-store: https://github.com/Shopify/hydrogen-demo-store/blob/main/vite.config.ts#L16

Shopify / hydrogen