Failed import of js-big-decimal library

[NiloCK]

Describe the bug

I am importing and using popular js bigdecimal library: https://www.npmjs.com/package/js-big-decimal

yarn dev succeeds (no errors), but the page fails at runtime because it has bundled the wrong file from js-big-decimal. The bundled file is from dist/node/..., where it should be from dist/web/....

Also filed with js-big-decimal: royNiladri/js-big-decimal#98.

Reproduction

https://github.com/NiloCK/vite-bigdecimal-import-reproduction

Steps to reproduce

From readme of linked repository:

Steps taken in this repo:

• yarn create vite
  • react
  • Typescript + SWC
• yarn add js-big-decimal
• add bigDecimal import to App.tsx (see App.tsx, lines 5, 8, and 27)
• yarn dev

Site does not render.

System Info

-

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
  • I don't have expertise to determine this inside any predictable time box. Checkbox was required.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

The bundled file is from dist/node/..., where it should be from dist/web/....

js-big-decimal doesn't declare exports/browser field and therefore Vite resolves the package with main field that points to dist/node/....

You can specify the actual file instead.

import "js-big-decimal/dist/web/js-big-decimal.js"

Although, It doesn't work because js-big-decimal doesn't support ESM.

Closing as it's working as intended.

[NiloCK]

Thanks for the prompt & informative response @sapphi-red.

One follow up question: you debugged this pretty quickly as "shouldn't work". Could the bundler do the same debugging and print a warning or error?

One follow up piece of context: this import works correctly inside the same project when the rendering is done by storybook. The storybook runner uses a vite builder. It feels a bit off that it (somehow) succeeds in the storybook context, but not during a dev preview or build.

Steps (from linked repo) (or pull current commit of linked repo):

• npx storybook@latest init
• yes to eslint migrate
• add minimal App.jsx story App.stories.ts

import type { Meta, StoryObj } from "@storybook/react";

import App from "./App";

const meta = {
  title: "App",
  component: App,
  tags: ["autodocs"],
  argTypes: {
    backgroundColor: { control: "color" },
  },
} satisfies Meta<typeof App>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {},
};

• yarn storybook

Produces the following, where the rendered count has been converted to a formatted js-big-decimal.

[sapphi-red]

Could the bundler do the same debugging and print a warning or error?

No. Because it depends on the package's content whether it needs a browser/exports field.

this import works correctly inside the same project when the rendering is done by storybook

I don't know much about storybook, but I guess storybook polyfills Node.js's behavior in some cases.

[NiloCK]

Thanks again for the feedback. Will address on the target package.