Skip to content

Browser field is possibly ignored #964

@hydroperx

Description

@hydroperx

I have published my library to the JSR registry instead of NPM, but I am having a weird warning when using it on a Vite bundled project:

[plugin vite:resolve] Module "node:fs" has been externalized for browser compatibility, imported by "C:/Users/Hydro/Repository Groups/Linux Metro/linuxmetro/desktop/node_modules/@hydroper/fluent/src/fsloader.nodejs.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin vite:resolve] Module "node:path" has been externalized for browser compatibility, imported by "C:/Users/Hydro/Repository Groups/Linux Metro/linuxmetro/desktop/node_modules/@hydroper/fluent/src/fsloader.nodejs.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
node_modules/@hydroper/fluent/src/fsloader.nodejs.js (12:22): "readFileSync" is not exported by "__vite-browser-external", imported by "node_modules/@hydroper/fluent/src/fsloader.nodejs.js".
node_modules/@hydroper/fluent/src/fsloader.nodejs.js (12:40): "resolve" is not exported by "__vite-browser-external", imported by "node_modules/@hydroper/fluent/src/fsloader.nodejs.js".

I am guessing that JSR is pre-bundling my @hydroper/fluent library and not looking into the browser field in package.json:

{
  "name": "@hydroper/fluent",
  "version": "1.1.0",
  "description": "Work with Fluent Project translation lists.",
  "main": "src/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "browser": {
    "src/fsloader.nodejs.ts": "src/fsloader.browser.ts"
  },
  "keywords": ["fluent", "fluent-project", "ftl"],
  "author": "hydroper",
  "license": "Apache-2.0",
  "dependencies": {
    "@fluent/bundle": "^0.18.0",
    "axios": "^1.3.6"
  },
  "devDependencies": {
    "@types/node": "^22.13.0"
  },
  "repository": "https://github.com/hydroperfox/fluent"
}

Notice the "browser" field. I'm thinking Vite and JSR aren't doing anything with it.

Here is the library's jsr.json:

{
  "name": "@hydroper/fluent",
  "version": "1.1.0",
  "exports": "./src/index.ts",
  "license": "Apache-2.0"
}

Here's my consumer project's vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    define: {
        "process.platform": JSON.stringify(process.platform),
        "process.env.IS_PREACT": JSON.stringify("true"),
    },
    build: {
        outDir: "../dist/desktop",
    },
});

To confirm, JSR removes the browser field from package.json when looking into node_modules:

{
  "name": "@jsr/hydroper__fluent",
  "version": "1.1.0",
  "homepage": "https://jsr.io/@hydroper/fluent",
  "type": "module",
  "dependencies": {
    "@fluent/bundle": "^0.18.0",
    "axios": "^1.3.6"
  },
  "exports": {
    ".": {
      "types": "./_dist/src/index.d.ts",
      "default": "./src/index.js"
    }
  },
  "_jsr_revision": 11
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    Status

    Needs Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions