ESM @nivo/bar 'global is not defined' - Vite

Describe/explain the bug

In an esm based Vite app importing via

import { ResponsiveBar } from '@nivo/bar'

produces error Uncaught ReferenceError: global is not defined

I’m guessing it’s related to line 713 of nivo-bar-.es.js pixelRatio: global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1 or a dependency of Nivo.

To Reproduce

Steps to reproduce the behavior:

1. Use esm
2. import { ResponsiveBar } from ‘@nivo/bar’
3. Use ResponsiveBar.

Expected behavior Component to render, like normal

Desktop (please complete the following information):

• OS: Mac OS
• Browser Any
• Version "@nivo/bar": "^0.67.0", "@nivo/core": "^0.67.0",

Additional context globalThis might be a better option? Not sure where this is being pulled from because the src files don’t include global, where the dist/ files do.

[mrmartineau]

FYI I found a slightly better way (IMO) to achieve the same thing from here. Now there’s no need for patch-package

Add this to your index.html file before your Vite <script> tag, e.g.

<script>var global = globalThis</script>
<script type="module" src="/src/app/main.tsx"></script>

<script>var global = window</script> might also work, but probably not in this case since this Nivo package uses global.window in its source code.

[stolinski]

If anyone would like a temporary work around. I’ve managed to get Nivo loading in esm with

https://github.com/ds300/patch-package

Using the following patch

diff --git a/node_modules/@nivo/bar/dist/nivo-bar.es.js b/node_modules/@nivo/bar/dist/nivo-bar.es.js
index dbaaaf3..4b2a83c 100644
--- a/node_modules/@nivo/bar/dist/nivo-bar.es.js
+++ b/node_modules/@nivo/bar/dist/nivo-bar.es.js
@@ -1,3 +1,4 @@
+let global = globalThis
 import React, { Fragment, Component } from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 import { defsPropTypes, noop, withTheme, withDimensions, withMotion, getAccessorFor, getLabelGenerator, bindDefs, LegacyContainer, CartesianMarkers, SvgWrapper, getRelativeCursor, isCursorInRect, ResponsiveWrapper } from '@nivo/core';

Def not a long term solution. But if you are using Nivo and ESM, this will at least get you running until the es.js build can be fixed.

Edit

Use https://github.com/plouc/nivo/issues/1455#issuecomment-815904731 instead