Not able to import bisector from @visx/vendor/d3-array

[johhorn]

I have a remix vite project, and when I try to use the Area example in my code, I get an export error:

[vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/app/routes/unit.$id/route.tsx"
|- /node_modules/@visx/vendor/esm/d3-array.js:8
export * from 'd3-array';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:305:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)

It seems to stem from the import { max, extent, bisector } from "@visx/vendor/d3-array"; import, as I have tested a different setup with my own data and no tooltip, and if I use the bisector function anywhere, the error occurs, but is not there if I do not use it. Do you have any d3 exports in this package that is not compatible with a remix vite setup?

The relevant dependencies I use in this case are:

    "@types/react": "^18.2.79",
    "@types/react-dom": "^18.2.25",
    "@remix-run/dev": "^2.8.1",
    "@remix-run/node": "^2.8.1",
    "@remix-run/react": "^2.8.1",
    "@remix-run/serve": "^2.8.1",
    "@visx/axis": "^3.10.1",
    "@visx/curve": "^3.3.0",
    "@visx/event": "^3.3.0",
    "@visx/gradient": "^3.3.0",
    "@visx/grid": "^3.5.0",
    "@visx/group": "^3.3.0",
    "@visx/marker": "^3.5.0",
    "@visx/mock-data": "^3.3.0",
    "@visx/scale": "^3.5.0",
    "@visx/shape": "^3.5.0",
    "@visx/tooltip": "^3.3.0",
    "@visx/vendor": "^3.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.4.5",
    "vite": "^5.2.10",
    "vite-tsconfig-paths": "^4.3.2"

I noticed that with the old remix server, it was possible to set serverDependenciesToBundle in the config file, and that might have worked with "@visx/vendor/d3-array", but I have not found a similar option for the vite server.

This is my vite.config.js:

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

installGlobals();

export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
  build: {
    target: "esnext",
  },
});

[stefanone91]

You could use the "ssr.noExternal" property inside vite.config.ts instead of "serverDependenciesToBundle".
For example:

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    noExternal: ["@visx/vendor"],
  },
});