@fluentui/babel-preset-global-context

Babel Preset Global Context for Fluent UI React

Babel preset that transforms createContext calls to use global context shims

Install

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 that is illustrated in the below example.

// 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.

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.

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

We recommend using this preset with Webpack and babel-loader while scoping the transforms to the affected packages.

// 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/'],
      },
    ],
  },
};