使用Shopify CLI构建应用时出现ES模块目录导入不支持错误

背景 #

• 2023年11月6日，应用构建并运行完全正常
• 今日未修改任何代码，执行yarn run build时触发错误
• 怀疑@shopify/cli引入了破坏性变更

执行命令 #

yarn run build
yarn run v1.22.22
$ shopify hydrogen build

错误信息 #

Directory import 'C:\Users\erics\Documents\GitHub\formatted\node_modules\vite' is not supported resolving ES modules imported from C:\Users\erics\Documents\GitHub\formatted\node_modules\@shopify\cli\dist\chunk-JRECCYJM.js
Did you mean to import C:/Users/erics/Documents/GitHub/formatted/node_modules/vite/dist/node/index.js?

To investigate the issue, examine this stack trace:
  at Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Users\erics\Documents\GitHub\formatted\node_modules\vite' is not supported resolving ES modules imported from C:\Users\erics\Documents\GitHub\formatted\node_modules\
  at new NodeError (node:internal/errors:405)
  at finalizeResolution (node:internal/modules/esm/resolve:321)
  at moduleResolve (node:internal/modules/esm/resolve:980)
  at defaultResolve (node:internal/modules/esm/resolve:1206)
  at defaultResolve (node:internal/modules/esm/loader:404)
  at resolve (node:internal/modules/esm/loader:373)
  at getModuleJob (node:internal/modules/esm/loader:250)
  at import (node:internal/modules/esm/loader:336)
  at importModuleDynamically (node:internal/modules/esm/translators:143)
  at importModuleDynamicallyCallback (node:internal/modules/esm/utils:176)

复现方式 #

可通过Shopify Hydrogen示例模板（v1.x-2022-07分支下的demo-store模板）复现该问题。

环境信息 #

• Yarn v1.22.22
• Node v18.20.4

配置文件 #

jsconfig.json #

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["dom", "dom.iterable", "scripthost", "es2020"],
    "jsx": "react",
    "types": ["vite/client"]
  },
  "exclude": ["node_modules", "dist"],
  "include": ["**/*.js", "**/*.jsx"]
}

vite.config.js #

import {defineConfig} from 'vite';
import hydrogen from '@shopify/hydrogen/plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [hydrogen()],
  optimizeDeps: {include: ['@headlessui/react', 'cookies-next']},
  test: {
    globals: true,
    testTimeout: 10000,
    hookTimeout: 10000,
  },
});

问题诉求 #

我的应用与该模板结构非常相似，解决模板的构建问题即可解决我的问题。已尝试调整vite和Node版本，但无效，怀疑需要锁定某个依赖的旧版本，寻求解决方案。

补充：报错涉及的chunk代码片段 #

return {
  workPromise: Promise.all([
    mergePackageJson(await getAssetsDir("tailwind"), rootDirectory),
    copyAssets("tailwind", assetMap, rootDirectory),
    getCodeFormatOptions(rootDirectory).then(
      (formatConfig) => Promise.all([
        replaceRootLinks(appDirectory, formatConfig, {
          name: "tailwindCss",
          path: `${tailwindCssPath}?url`,
          isDefault: !0
        }),
        injectVitePlugin(rootDirectory, formatConfig, {
          name: "tailwindcss",
          path: "@tailwindcss/vite",
          isDefault: !0
        })
      ])
    )
  ]),
  generatedAssets: Object.values(assetMap),
  needsInstallDeps: !0
};

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