Directory import is not supported resolving ES modules imported – using shopify cli

I am trying to run my application. Some context: Nov 6, 2023, the app built and ran perfectly fine Today, I have changed nothing, but returning to the app and running yarn run build throws this. I think @shopify/cli have introduced breaking changes or something 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) You can easily reproduce this by simply running their template. Yarn v1.22.22 Node v18.20.4 This is my 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"] } This is my vite config: 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, }, }); So basically if you make it buildable in their template, it will also work for me. My app is very similar to it. I've tried playing around with vite and node versions, but that didn't work. I suspect the fix involves forcing an older version of something, somewhere. But I'm not well-versed in plugins/building apps, so thought I'd try here. Thank you in advance for any advice! EDIT: The chunk in question (from the error) is in node_modules and contains this bit: 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 };

Comment (0)

You’ll be in good company