ERR_UNSUPPORTED_DIR_IMPORT node_modules/@atlaskit/pragmatic-drag-and-drop/combine' is not supported

[Blankeos]

This only happens when I statically build my Vike app for a static host.

I know Vike is a lesser known framework so I'm not sure if it's a Vike issue or just a bundling issue on pragmatic-drag-and-drop.

Repro: Blankeos/car-finance-calculator#2

1. bun install
2. bun run build
3. You should get this error:

vike v0.4.210 pre-rendering HTML...
Error: Directory import '/Users/carlo/Desktop/Projects/car-finance-calculator/node_modules/@atlaskit/pragmatic-drag-and-drop/combine' is not supported resolving ES modules imported from /Users/carlo/Desktop/Projects/car-finance-calculator/dist/server/entries/src_pages_index.mjs
Did you mean to import "@atlaskit/pragmatic-drag-and-drop/dist/cjs/entry-point/combine.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:259:11)
    at moduleResolve (node:internal/modules/esm/resolve:933:10)
    at defaultResolve (node:internal/modules/esm/resolve:1169:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:542:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:510:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:239:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:96:40)
    at link (node:internal/modules/esm/module_job:95:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/carlo/Desktop/Projects/car-finance-calculator/node_modules/@atlaskit/pragmatic-drag-and-drop/combine

---

This only happens when vite.config.ts has:

export default defineConfig({
   plugins: [
      // I need this so that it creates an index.html since I deploy to Cloudflare pages or Netlify.
      vike({ prerender: true }), 
   ]
});

It doesn't happen when:

export default defineConfig({
   plugins: [
      vike(),
   ]
});

Any idea why this is happening?

[Blankeos]

Apparently there's a similar issue when it's SvelteKit (which is also on top of Vite). #107

[Blankeos]

Alright this is what worked for me :D

// vite.config.ts

// Vite
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const root = resolve(__dirname, ".");

export default defineConfig({
  plugins: [
    // ...
    vike({ prerender: true }), // Not important
    vikeSolid(), // Not important
  ],
  resolve: {
    alias: [
      { find: "@", replacement: resolve(root, "src") }, // Not important
      {
        find: "@atlaskit/pragmatic-drag-and-drop",
        replacement: resolve(
          root,
          "./node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point"
        ),
      },
    ],
  },
});