Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
johhorn opened this issue Apr 20, 2024 · 1 comment
Open

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

johhorn opened this issue Apr 20, 2024 · 1 comment

Comments

@johhorn
Copy link

johhorn commented Apr 20, 2024

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
Copy link

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"],
  },
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants