Missing "./package.json" export in "d3-scale" package (and others)

[techniq]

Describe the bug

After upgrading my LayerChart visualization component library to SvelteKit 1.0.0-next.202 which includes Vite 2.7, I now receive a bunch of the following errors on startup for many d3 packages (d3-scale, d3-shape, d3-array, d3-time)...

12:29:01 PM [vite] Internal server error: Missing "./package.json" export in "d3-scale" package
  Plugin: vite:import-analysis
  File: /home/projects/sveltekit-gw2gco/node_modules/layercake/src/settings/defaultScales.js
      at bail (/home/projects/sveltekit-gw2gco/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:29925:8)
      at resolve (/home/projects/sveltekit-gw2gco/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:29978:7)
      at resolveExports (/home/projects/sveltekit-gw2gco/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:30625:12)
      at resolveDeepImport (/home/projects/sveltekit-gw2gco/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:30641:26)
      at tryNodeResolve (/home/projects/sveltekit-gw2gco/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:30424:20)
      at viteResolve (/home/projects/sveltekit-gw2gco/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67443:26)
      at Function.eval [as _resolveFilename] (/home/projects/sveltekit-gw2gco/node_modules/vite/dist/node/chunks/dep-7817f5b4.js:67459:20)
      at Function.requireRelative.resolve (/home/projects/sveltekit-gw2gco/node_modules/require-relative/index.js:30:17)
      at resolveViaPackageJsonSvelte (file:///home/projects/sveltekit-gw2gco/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1160:55)
      at Context.resolveId (file:///home/projects/sveltekit-gw2gco/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1491:26)

What's very perplexing is I didn't have this issue last night and even deployed multiple times via Vercel without any issues.

Based on the error, it seems like the proper fix would be to update all d3 packages (ex. d3-scale) and add ./package.json to exports, although I'm not sure I'm up for PR'ing 50+ packages and how long it would take to get reviewed / merged / released. I also want to make sure its truly required as well :).

I'm also having trouble limiting the example below LayerChart (installing / importing either LayerCake (which LayerChart is built upon) or d3-scale does not throw the error. LayerChart also uses my svelte-ux component library which has some d3 references so I don't know if it's a transitive issue.

---

While writing this I just realized svelte-ux has the same issue, and is similar that it worked last night and deployed to Vercel multiple times.

Reproduction

Here are 2 StackBlitz reproductions for each project:

• svelte-ux
• LayerChart

Logs

No response

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 263.47 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Edge: 96.0.1054.57
    Firefox: 94.0.2
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.22 => 1.0.0-next.22 
    @sveltejs/kit: ^1.0.0-next.202 => 1.0.0-next.202 
    svelte: ^3.44.3 => 3.44.3

Severity

blocking an upgrade

Additional Information

Related?

• Usage latest version (4.0.0) with react native  d3/d3-scale#248 (comment)
• Package subpath './package.json' is not defined by "exports" react-native-community/cli#1168

Some related discussions with mhkeller in LayerCake (see referenced issues/PRs as well)

[techniq]

Interestingly... adding d3-array, d3-format, and d3-time to optimizeDeps to the svelte-ux example fixes it...

vite: {
  optimizeDeps: {
    include: [
      'd3-array',
      'd3-format',
      'd3-time',
    ],
  },
},

and adding d3-scale, d3-shape, d3-time, d3-array, and d3-format to the LayerChart example fixes it...

vite: {
  optimizeDeps: {
    include: [
      'd3-scale',
      'd3-shape',
      'd3-time',
      'd3-array',
      'd3-format'
    ],
  },
},

Each SvelteKit / Vite release I seem to always play the game of what to put in vite.optimizeDeps.include and/or vite.ssr.noExternal and what to take out. When I was working on the update last night, I know I was getting TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for ... that went away when I removed all the optimizeDeps, but maybe I should only not include the Svelte libraries (ex. LayerChart) and leave all the others there (especially d3).

Along with fixing the d3 issue, I know adding these always saves Vite from rediscovering dependencies, which sometimes takes a few passes on initial startup from a clean cache, or as you access a route with new dependencies.

[bluwy]

d3-scale and friends should already be added to optimizeDeps.include by default, it's weird that that fixes it, but good to know. There have been similar reports recently about the Missing "./package.json" export in "d3-scale" package error happening and it seems to be an issue from Vite 2.7.

[bluwy]

Some initial investigation. I'm able to reproduce them in the stackblitz repros, but when I clone locally and run it, it worked without errors (macos m1). I can find the offending code through the stack trace, but it should technically still be fine. Gonna deep dive this tomorrow.

Otherwise, the workaround vite-plugin-svelte can do is to use createRequire instead of require-relative, but I'm trying to see if it's a bug in Vite first.

[dimfeld]

In my project this appears to be fixed by upgrading to the just-released Vite 2.7.10. I'm guessing it was vitejs/vite#6306.

[jarda-svoboda]

I had the same problem with npm run dev – it started to work normally when I run build first..🙆‍♂️

UPDATE: as @dimfeld mentioned, this issue seems to be solved after the update..

[bluwy]

Ah that's really great news! This has been in my backlog for too long now. Closing this.