I'm making a module that I would like to be available in the browser and Node. It relies on performance, which is giving me trouble with Webpack and the perf_hooks module in Node. No matter what I do I can only get it where it works in one or the other, but not both.

Below are most of the things I've tried. My question is, how do I configure Webpack to require perf_hooks in node, but use the built in performance global when in the browser?

Here is my base Webpack config:

const path = require('path');

module.exports = {
  entry: './src/UpdateLoop.js',
  mode: 'development',
  output: {
    library: 'UpdateLoop',
    libraryTarget: 'umd',
    path: path.resolve(__dirname, 'dist'),
    filename: 'updateloop.js',
    globalObject: 'this',
  },
};

Code thats giving me trouble:

const { performance } = require('perf_hooks');

This errors in webpack with:

Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\Users\joe.jankowiak\projects\update-loop\src\node_modules doesn't exist or is not a directory

I've seen suggestions for 'fs' to do the following:

// configuration.node has an unknown property 'perf_hooks'
  node: {
    perf_hooks: false,
  },

// configuration has an unknown property 'browser'.
  browser: {
    perf_hooks: false,
  },

I then saw people recommending using 'resolve':

// Compiles, but complains performance doesn't exist in node or browser.
resolve: {
  fallback: {
    perf_hooks: false,
  }
},

// Works in browser but doesn't work in node. Node complains about using performance before its defined:
performance = performance || require('perf_hooks').performance;

// Doesn't work in either
const performance = performance || require('perf_hooks').performance;

// Trying to check if its node, but with resolve its making perf_hooks null in node
if(typeof __webpack_require__ === 'function') {
  global.performance = require('perf_hooks').performance;
}