Shopify Hydrogen演示站点启动报错：SyntaxError: Unexpected token '??='

运行站点时出现以下错误：

9:35:23 PM [vite] Error when evaluating SSR module /node_modules/@shopify/hydrogen/dist/esnext/entry-server.js?v=dec8cd9a:
SyntaxError: Unexpected token '??='
    at new AsyncFunction (<anonymous>)

以下是项目的配置文件内容：

package.json #

{
  "description": "Demo store template for @shopify/hydrogen",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "shopify hydrogen dev",
    "build": "shopify hydrogen build",
    "preview": "shopify hydrogen preview",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
    "lint-ts": "tsc --noEmit",
    "test": "WATCH=true vitest",
    "test:ci": "yarn build -t node && vitest run"
  },
  "devDependencies": {
    "@shopify/cli": "3.7.1",
    "@shopify/cli-hydrogen": "3.7.1",
    "@shopify/prettier-config": "^1.1.2",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.2",
    "@types/react": "^18.0.14",
    "eslint": "^8.18.0",
    "eslint-plugin-hydrogen": "^0.12.2",
    "playwright": "^1.22.2",
    "postcss": "^8.4.14",
    "postcss-import": "^14.1.0",
    "postcss-preset-env": "^7.6.0",
    "prettier": "^2.3.2",
    "tailwindcss": "^3.0.24",
    "typescript": "^4.7.4",
    "vite": "^3.0.8",
    "vitest": "^0.15.2"
  },
  "prettier": "@shopify/prettier-config",
  "dependencies": {
    "@headlessui/react": "^1.6.4",
    "@heroicons/react": "^1.0.6",
    "@shopify/hydrogen": "^1.2.0",
    "clsx": "^1.1.1",
    "graphql-tag": "^2.12.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-use": "^17.4.0",
    "title": "^3.4.4",
    "typographic-base": "^1.0.4"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
    "jsx": "react-jsx",
    "types": ["vite/client", "vitest/globals"],
    "strict": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "paths": {
      "~/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["**/*.ts", "**/*.tsx"]
}

排查与解决建议 #

• 升级Node.js版本：??=是ES2021新增的语法，当前Node.js版本可能不支持。建议升级到v16.0.0及以上（Hydrogen官方推荐版本）。
• 调整TypeScript编译目标：将tsconfig中的target从es5改为es2020或es2021，确保编译配置兼容依赖的语法特性。
• 配置Vite强制转译Hydrogen：在vite.config.ts中添加SSR配置，让Vite转译node_modules中的Hydrogen代码：

  // vite.config.ts
  export default defineConfig({
    ssr: {
      noExternal: ['@shopify/hydrogen'],
    },
  });
  

• 更新Hydrogen依赖：当前使用的@shopify/hydrogen为v1.2.0，尝试升级到最新稳定版，修复可能存在的语法兼容问题。
• 清除依赖缓存重装：删除node_modules、package-lock.json/yarn.lock，重新执行npm install或yarn install，避免依赖缓存冲突。

内容的提问来源于stack exchange，提问作者user3182518