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

[disarticulate]

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

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

[AumyF]

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

[luckyrobot]

same issue

Uniswap/web3-react#423

[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

[jheavejimenez]

thanks bro