# @fluentui/babel-preset-global-context

> Babel preset that transforms createContext calls to use global context shims

Latest version **9.0.0-beta.96** (published 2025-11-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/babel-preset-global-context
pnpm add @fluentui/babel-preset-global-context
yarn add @fluentui/babel-preset-global-context
bun add @fluentui/babel-preset-global-context
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.0.0-beta.96 |
| Published | 2025-11-04 |
| First published | 2022-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 77.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20322 |
| Maintainers | chrisdholt, miroslavstastny, levithomason, uifabricteam, uifrnbot, layershifter, justslone, microsoft1es, sopranopillow |

## Links

- npm: https://www.npmjs.com/package/@fluentui/babel-preset-global-context
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/babel-preset-global-context

## Dependencies (8)

- [find-up](https://npm.io/package/find-up.md) ^5.0.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.10.4
- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@emotion/hash](https://npm.io/package/@emotion/hash.md) ^0.8.0
- [@babel/template](https://npm.io/package/@babel/template.md) ^7.12.13
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.12.13
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.12.13
- [@babel/helper-plugin-utils](https://npm.io/package/@babel/helper-plugin-utils.md) ^7.12.13

## Recent versions

- 9.0.0-beta.96 (latest) — 2025-11-04
- 9.0.0-beta.96-experimental.cli-api.20261014-b2aafc2be8.0 (experimental) — 2026-10-14
- 0.0.0-nightly-20251104-0407.1 (nightly) — 2025-11-04
- 9.0.0-beta.96-experimental.cli-api.20261005-c300f4320f.0 — 2026-10-05
- 9.0.0-beta.96-experimental.rc-analyzer.20260924-86e4c3bca3.0 — 2026-09-24
- 9.0.0-beta.96-experimental.storybook-playground.20260924-c1fd27e789.0 — 2026-09-24
- 9.0.0-beta.96-experimental.rc-analyzer.20260903-9a3d24dfe0.0 — 2026-09-03
- 9.0.0-beta.96-experimental.rc-analyzer.20260903-792160a669.0 — 2026-09-03
- 9.0.0-beta.96-experimental.rc-analyzer.20260616-f0c9ca7bb3.0 — 2026-06-16
- 9.0.0-beta.96-experimental.rc-analyzer.20260615-daf0e4cdd9.0 — 2026-06-15
- 9.0.0-beta.96-experimental.rc-analyzer.20260612-ba28438c9d.0 — 2026-06-12
- 9.0.0-beta.96-experimental.rc-analyzer.20260612-3a21902a33.0 — 2026-06-12
- 9.0.0-beta.96-experimental.rc-analyzer.20260611-dfe1b6ed5e.0 — 2026-06-11
- 9.0.0-beta.96-experimental.rc-analyzer.20260611-77250c9fde.0 — 2026-06-11
- 9.0.0-beta.96-experimental.rc-analyzer.20260611-1857d68b06.0 — 2026-06-11
- … 910 more at https://npm.io/package/@fluentui/babel-preset-global-context/versions

## README

# @fluentui/babel-preset-global-context

**Babel Preset Global Context for [Fluent UI React](https://react.fluentui.dev)**

Babel preset that transforms createContext calls to use global context shims

## Install

```bash
yarn add --dev @fluentui/babel-preset-global-context
# or
npm install --dev @fluentui/babel-preset-global-context
```

## When to use it?

This preset is mainly inteded for application developers to target specific libraries that use React context
and suffer from the context duplication problem. React contexts are not real singletons and are scoped by module
level. This can cause problems when the context is duplicated in node_modules.

This is a known issue that is by design according to [facebook/react#13346](https://github.com/facebook/react/issues/13346)
that is illustrated in the below example.

```tsx
// my-context-package
import * as React from 'react';

export const MyContext = React.createContext({ foo: 'foo' });

// provider.ts

// node_modules/my-context-package/lib/index.js
import { MyContext } from 'my-context-package';

function Provider({ children }) {
  const ctx = { foo: 'bar' };

  // 1. Instantiate context with value foo='bar'
  return <MyContext.Provider value={ctx}>{children}</MyContext.Provider>;
}

// consumer.ts

// node_modules/nested-dep/node_modules/my-context-package/lib/index.js
import * as React from 'react';
import { MyContext } from 'my-context-package';

function Consumer() {
  // 2. Consume the 'same' context from different module
  const ctx = React.useContext(MyContext);

  // 3. ⚠️ Actual value would be the default 'foo'
  return <div>{ctx.foo}</div>;
}
```

> ⚠️ The recommended solution to the above problem is to make sure that the affected dependency
> only exists once in node_modules. You can do this by upgrading your dependencies or using [resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/).

This library should only be used as a workaround in the cases where it might not be feasible to deduplicate `node_modules`.

## Usage

Install the shims for `createContext` that will this Babel preset will use to replace original `React.createContext`
calls.

```bash
yarn add @fluentui/global-context
# or
npm install @fluentui/global-context
```

We recommend using this preset with [Webpack](https://webpack.js.org/) and [babel-loader](https://www.npmjs.com/package/babel-loader)
while scoping the transforms to the affected packages.

```js
// weboack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js|tsx|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@fluentui/babel-preset-global-context']],
          },
        },
        // Targets all @fluentui scoped packages and replaces `createContext` calls with global context
        // Can be setup for other packages
        // /node_modules\/(<packageName>|<pacakgeName>)\/*/
        include: [/node_modules\/@fluentui\/*/],
      },
      {
        test: /\.(ts|tsx)$/i,
        use: ['ts-loader'],
        exclude: ['/node_modules/'],
      },
    ],
  },
};
```

---
_Source: https://npm.io/package/@fluentui/babel-preset-global-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._