Module "fs" has been externalized for browser compatibility and cannot be accessed in client code.

[BrianHung]

Using xlsx in a project. In development, running into the following error:

Uncaught (in promise) Error: Module "fs" has been externalized for browser compatibility. Cannot access "fs.writeFileSync" in client code.

Within xlsx, it checks whether the environment is node or browser.

var _fs;
if(typeof require !== 'undefined') try { _fs = require('fs'); } catch(e) {}

However, vite during the dependency bundling step to convert commonjs to esm defines require, leading to the import of a proxied fs object that errors:

module.exports = Object.create(new Proxy({}, {
  get(_, key) {
    if (
      key !== '__esModule' &&
      key !== '__proto__' &&
      key !== 'constructor' &&
      key !== 'splice'
    ) {
      throw new Error(`Module "fs" has been externalized for browser compatibility. Cannot access "fs.${key}" in client code.`)
    }
  }
}))

Is there a way to configure vite to avoid defining require for just xlsx?

---

Found a hacky workaround

        { find: "xlsx", replacement: path.resolve(__dirname,  "../../node_modules/xlsx/xlsx.mjs") },

Is there a permanent solution either with vite or in xlsx?

[BrianHung]

Solved by updating xlsx to v18 which supports ESM via module: xlsx.mjs and exports fields.

[bogordesaincom]

how to using this?

[RushilJalal]

could you also include how to update xlsx to v18?

[aleczoeller]

npm install xlsx
Also:

// @deno-types="https://unpkg.com/xlsx/types/index.d.ts"
import * as XLSX from 'https://unpkg.com/xlsx/xlsx.mjs';

/* load the codepage support library for extended support with older formats  */
import * as cptable from 'https://unpkg.com/xlsx/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);