ts-invariant 'cant resolve imported dependency process/browser' -- conflict with webpack 5 typical polyfill

[disarticulate]

this package appears to conflict with a seemingly standard polyfill in webpack5:

        cfg.resolve.alias = {
          ...cfg.resolve.alias,
          process: 'process/browser',
        }

        cfg.plugins = [
          ...cfg.plugins,
          new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
            process: 'process/browser',
          }),
        ]

resulting in this error:

/node_modules/@apollo/client/node_modules/ts-invariant/process/index.js
Module not found: Can't resolve imported dependency "process/browser"
Did you forget to install it? You can run: yarn add process/browser

eg, https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined

Not sure how process is working in this instance, but a likely fix is just to rename the folder for import.

It compiles without the plugin/alias, but then throws in other packages because process is not available.

[luckyrobot]

same issue

Uniswap/web3-react#423

[luckyrobot]

found solution, adding fullySpecified to false

/* config-overrides.js */
const webpack = require('webpack')

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {}
  Object.assign(fallback, {
    util: require.resolve('util/'),
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    buffer: require.resolve('buffer'),
    assert: require.resolve('assert'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify'),
    url: require.resolve('url'),
  })
  config.plugins.push(
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
  )
  config.module.rules = [
    ...config.module.rules,
    {
      test: /\.m?js/,
      resolve: {
        fullySpecified: false,
      },
    },
  ]
  config.resolve.fallback = fallback
  config.ignoreWarnings = [/Failed to parse source map/]
  return config
}

[disarticulate]

@luckyrobot Thanks. This appears to work but it seems like such a monkey patch for this library.

[benjamn]

@disarticulate What version of ts-invariant are you using?

It seems like webpack is injecting an import for process/browser that does not exist in the ts-invariant code.

[disarticulate]

looks like @apollo-client @ 3.6.2 installs ts-variant @ 0.10.2

@benjamn

[ravenflores]

found solution, adding fullySpecified to false

/* config-overrides.js */
const webpack = require('webpack')

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {}
  Object.assign(fallback, {
    util: require.resolve('util/'),
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    buffer: require.resolve('buffer'),
    assert: require.resolve('assert'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify'),
    url: require.resolve('url'),
  })
  config.plugins.push(
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
  )
  config.module.rules = [
    ...config.module.rules,
    {
      test: /\.m?js/,
      resolve: {
        fullySpecified: false,
      },
    },
  ]
  config.resolve.fallback = fallback
  config.ignoreWarnings = [/Failed to parse source map/]
  return config
}

thanks bro

[AumyF]

I avoided the problem by replacing process/browser with process: 'process/browser.js'

[jheavejimenez]

thanks bro