Uncaught ReferenceError: require is not defined

[l1x]

Environment

• Package version(s):
  "@blueprintjs/core": "4.0.0-beta.10",
  "react": "^17.0.2",
  "react-dom": "^17.0.2"

• Operating System: MacOS

• Browser name and version: Chrome

Code Sandbox

Link to a minimal repro: https://github.com/DataDeft/web-debug

Steps to reproduce

Clone repo, yarn install, yarn build, yarn serve, open the link and watch the blank page.

Actual behavior

It seems when using Vite as opposed to Webpack this problem surfaces. I do not know enough of frontend development to be able to investigate myself.

Uncaught ReferenceError: require is not defined
at vendor.75daa434.js:64

Expected behavior

Run without error.

Possible solution

Not sure.

[adidahiya]

That's surprising; we ship esm modules (see the /lib/esm/ folder in the built NPM package) and Vite should support those. It looks like similar issues / questions have been raised with Vite, like vitejs/vite#3409. You can probably work around this issue using vite-plugin-commonjs.

[adidahiya]

Looking a bit more closely, though, it seems like these lines may be causing the problem:

blueprint/packages/icons/src/iconSvgPaths.ts

Lines 23 to 24 in 54cb93f

	export const IconSvgPaths16 = require("./generated/16px/paths") as Record<PascalCase<IconName>, string[]>;
	export const IconSvgPaths20 = require("./generated/20px/paths") as Record<PascalCase<IconName>, string[]>;

Those are the only places we ship code referencing require(). I should be able to swap those back to use import statements instead...

[l1x]

Thanks @adidahiya! I am trying exactly that right now. :)

[l1x]

Confirmed. Your change (that you linked above) is causing this. When I move back to version 3.51.3 it works because it uses still the old import ( as opposed to require).

[adidahiya]

fixed in v4 by #5108

[l1x]

Thanks a lot @adidahiya !