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

[stolinski]

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.

[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 #1455 (comment) instead

[mrmartineau]

Thanks @stolinski for the fix here. I haven't needed to use patch-package in many years...

Do we know why this package has issues with global and the others do not?

[mrmartineau]

FYI it is worth noting that @stolinski's patch above works, but when I used it the patch kept on being applied every time yarn or yarn install etc was being used, resulting in something like this:

let global = globalThis
let global = globalThis
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';

This is because patch-package needs an idempotent patch (see this comment for more info).

The patch below works as expected:

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 @@
 import React, { Fragment, Component } from 'react';
+let global = globalThis
 import { TransitionMotion, spring } from 'react-motion';
 import { defsPropTypes, noop, withTheme, withDimensions, withMotion, getAccessorFor, getLabelGenerator, bindDefs, LegacyContainer, CartesianMarkers, SvgWrapper, getRelativeCursor, isCursorInRect, ResponsiveWrapper } from '@nivo/core';

[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]

@mrmartineau yeah this is a much better solution than PatchPackage.

[wyze]

This is fixed in the latest version v0.70.1.

[armgit5]

I'm working with WalletConnect running on react with vite. After fixing global is not defined I got Buffer is not defined issue after that. Found @esbuild-plugins/node-globals-polyfill over stackoverflow that helps me fix both of the issues

[mzaatar]

@armgit5 could you provide us with an example? thanks

[armgit5]

@mzaatar here is an example of global and Buffer is not defined error. For buffer you have to add in 2 places 1. inside of NodeGlobalsPolyfillPlugin for running dev and 2. add nodePolyfills inside of rollupOptions for running production build. Additionally if you get require is not defined then you can look into transformMixedEsModules as well... hope that helps 😃

import NodeGlobalsPolyfillPlugin from "@esbuild-plugins/node-globals-polyfill";
import nodePolyfills from 'rollup-plugin-node-polyfills';

export default defineConfig({
  optimizeDeps: {
      esbuildOptions: {
        // Fix global is not defined error
        define: {
          global: "globalThis",
        },
        plugins: [
          // Without this, npm run dev will output Buffer or process is not defined error
          NodeGlobalsPolyfillPlugin({
            buffer: true,
          }),
        ],
      },
    },
  build: {
      rollupOptions: {
        plugins: [
          /**
           * Fix Buffer is not defined error for running production build
           * https://www.npmjs.com/package/rollup-plugin-node-polyfills
           */
          nodePolyfills()
        ],
    },

    /**
     * Fix require is not defined error
     * https://github.com/wobsoriano/v-dashboard/issues/20
     * https://github.com/originjs/vite-plugins/issues/9
     */
    commonjsOptions: {
      transformMixedEsModules: true,
    },
 }
})

[RemixJazzCode]

I solved problem. Nice work !