Browser vite example fails to run

[haydenyoung]

The vite example does not run. It errors with big number literal errors.

https://github.com/ipfs-examples/js-ipfs-examples/tree/master/examples/browser-vite

> example-browser-vide@1.0.0 serve
> vite dev --port 8888


  VITE v3.0.8  ready in 140 ms

  ➜  Local:   http://localhost:8888/
  ➜  Network: use --host to expose
✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/ipfs-core/src/ipns/publisher.js:193:20:
      193 │     let seqNumber = 0n
          ╵                     ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/codecs/int64.js:12:40:
      12 │     return signed.decode(buf, offset) | 0n;
         ╵                                         ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:3:14:
      3 │ const LIMIT = 0x7fn;
        ╵               ~~~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:8:24:
      8 │         for (; value >= 0x80n; i++) {
        ╵                         ~~~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:9:22:
      9 │             value >>= 7n;
        ╵                       ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:18:22:
      18 │             value >>= 7n;
         ╵                       ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:28:20:
      28 │         if (value < 0n) {
         ╵                     ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:34:20:
      34 │         if (value < 0n) {
         ╵                     ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:46:60:
      46 │ ...signed.encodingLength(value >= 0 ? value * 2n : value * -2n - 1n);
         ╵                                               ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:46:74:
      46 │ ...signed.encodingLength(value >= 0 ? value * 2n : value * -2n - 1n);
         ╵                                                             ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/big-varint.js:46:79:
      46 │ ...signed.encodingLength(value >= 0 ? value * 2n : value * -2n - 1n);
         ╵                                                                  ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/long-bits.js:10:69:
      10 │ ...    return BigInt(this.lo >>> 0) + (BigInt(this.hi >>> 0) << 32n);
         ╵                                                                 ~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/long-bits.js:18:49:
      18 │             return -(BigInt(lo) + (BigInt(hi) << 32n));
         ╵                                                  ~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/long-bits.js:20:65:
      20 │ ...    return BigInt(this.lo >>> 0) + (BigInt(this.hi >>> 0) << 32n);
         ╵                                                                 ~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/long-bits.js:48:22:
      48 │         if (value === 0n) {
         ╵                       ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/long-bits.js:55:33:
      55 │         let hi = Number(value >> 32n) | 0;
         ╵                                  ~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/protons-runtime/dist/src/utils/long-bits.js:56:47:
      56 │         let lo = Number(value - (BigInt(hi) << 32n)) | 0;
         ╵                                                ~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/ipns/dist/src/selector.js:17:41:
      17 │         const aSeq = a.entry.sequence ?? 0n;
         ╵                                          ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/ipns/dist/src/selector.js:18:41:
      18 │         const bSeq = b.entry.sequence ?? 0n;
         ╵                                          ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/ipns/dist/src/utils.js:108:38:
      108 │         sequence: message.sequence ?? 0n,
          ╵                                       ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/libp2p/dist/src/metrics/stats.js:14:26:
      14 │             dataReceived: 0n,
         ╵                           ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/libp2p/dist/src/metrics/stats.js:15:22:
      15 │             dataSent: 0n
         ╵                       ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/libp2p/dist/src/metrics/stats.js:29:30:
      29 │             this.stats[key] = 0n;
         ╵                               ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/libp2p/dist/src/metrics/stats.js:169:34:
      169 │             n = this.stats[key] = 0n;
          ╵                                   ~~

/home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:1624
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 24 errors:
node_modules/ipfs-core/src/ipns/publisher.js:193:20: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)
node_modules/ipns/dist/src/selector.js:17:41: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)
node_modules/ipns/dist/src/selector.js:18:41: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)
node_modules/ipns/dist/src/utils.js:108:38: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)
node_modules/libp2p/dist/src/metrics/stats.js:14:26: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)
...
    at failureErrorWithLog (/home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:1624:15)
    at /home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:1266:28
    at runOnEndCallbacks (/home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:1046:63)
    at buildResponseToResult (/home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:1264:7)
    at /home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:1377:14
    at /home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:678:9
    at handleIncomingPacket (/home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:775:9)
    at Socket.readFromStdout (/home/haydenyoung/Development/scratch/js-ipfs-examples/examples/browser-vite/node_modules/esbuild/lib/main.js:644:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 20,
        file: 'node_modules/ipfs-core/src/ipns/publisher.js',
        length: 2,
        line: 193,
        lineText: '    let seqNumber = 0n',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 41,
        file: 'node_modules/ipns/dist/src/selector.js',
        length: 2,
        line: 17,
        lineText: '        const aSeq = a.entry.sequence ?? 0n;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 41,
        file: 'node_modules/ipns/dist/src/selector.js',
        length: 2,
        line: 18,
        lineText: '        const bSeq = b.entry.sequence ?? 0n;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 38,
        file: 'node_modules/ipns/dist/src/utils.js',
        length: 2,
        line: 108,
        lineText: '        sequence: message.sequence ?? 0n,',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 26,
        file: 'node_modules/libp2p/dist/src/metrics/stats.js',
        length: 2,
        line: 14,
        lineText: '            dataReceived: 0n,',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 22,
        file: 'node_modules/libp2p/dist/src/metrics/stats.js',
        length: 2,
        line: 15,
        lineText: '            dataSent: 0n',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 30,
        file: 'node_modules/libp2p/dist/src/metrics/stats.js',
        length: 2,
        line: 29,
        lineText: '            this.stats[key] = 0n;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 34,
        file: 'node_modules/libp2p/dist/src/metrics/stats.js',
        length: 2,
        line: 169,
        lineText: '            n = this.stats[key] = 0n;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 40,
        file: 'node_modules/protons-runtime/dist/src/codecs/int64.js',
        length: 2,
        line: 12,
        lineText: '    return signed.decode(buf, offset) | 0n;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 14,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 5,
        line: 3,
        lineText: 'const LIMIT = 0x7fn;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 24,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 5,
        line: 8,
        lineText: '        for (; value >= 0x80n; i++) {',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 22,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 2,
        line: 9,
        lineText: '            value >>= 7n;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 22,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 2,
        line: 18,
        lineText: '            value >>= 7n;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 20,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 2,
        line: 28,
        lineText: '        if (value < 0n) {',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 20,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 2,
        line: 34,
        lineText: '        if (value < 0n) {',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 60,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 2,
        line: 46,
        lineText: '        return unsigned.encodingLength(value >= 0 ? value * 2n : value * -2n - 1n);',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 74,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 2,
        line: 46,
        lineText: '        return unsigned.encodingLength(value >= 0 ? value * 2n : value * -2n - 1n);',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 79,
        file: 'node_modules/protons-runtime/dist/src/utils/big-varint.js',
        length: 2,
        line: 46,
        lineText: '        return unsigned.encodingLength(value >= 0 ? value * 2n : value * -2n - 1n);',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 69,
        file: 'node_modules/protons-runtime/dist/src/utils/long-bits.js',
        length: 3,
        line: 10,
        lineText: '            return BigInt(this.lo >>> 0) + (BigInt(this.hi >>> 0) << 32n);',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 49,
        file: 'node_modules/protons-runtime/dist/src/utils/long-bits.js',
        length: 3,
        line: 18,
        lineText: '            return -(BigInt(lo) + (BigInt(hi) << 32n));',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 65,
        file: 'node_modules/protons-runtime/dist/src/utils/long-bits.js',
        length: 3,
        line: 20,
        lineText: '        return BigInt(this.lo >>> 0) + (BigInt(this.hi >>> 0) << 32n);',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 22,
        file: 'node_modules/protons-runtime/dist/src/utils/long-bits.js',
        length: 2,
        line: 48,
        lineText: '        if (value === 0n) {',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 33,
        file: 'node_modules/protons-runtime/dist/src/utils/long-bits.js',
        length: 3,
        line: 55,
        lineText: '        let hi = Number(value >> 32n) | 0;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 47,
        file: 'node_modules/protons-runtime/dist/src/utils/long-bits.js',
        length: 3,
        line: 56,
        lineText: '        let lo = Number(value - (BigInt(hi) << 32n)) | 0;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)'
    }
  ],
  warnings: []

[haydenyoung]

To fix the big number issue, add support for bigint to vite.config.js:

  optimizeDeps: {
    esbuildOptions: {
      supported: {
        bigint: true
      },
      define: {
        'process.env.NODE_DEBUG': 'false',
        'global': 'globalThis'
      }
    }
  }

Unfortunately, however, this will only fix the immediate problem. If you want to implement anything beyond the basic index.js file (I.e. use vue files), you will have to implement the vite vue plugin, but this results in more errors:

Add vite vue plugin for handling vue files to vite.config.js:

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],

Start the app:

npm run dev

Loading results in a blank page and the error:

browser-external:util:9 Uncaught Error: Module "util" has been externalized for browser compatibility. Cannot access "util.inherits" in client code.
    at Object.get (browser-external:util:9:13)
    at node_modules/levelup/lib/levelup.js (levelup.js:4:18)
    at __require2 (chunk-ZQVQAL53.js?v=7e1ee517:19:50)
    at node_modules/level-packager/level-packager.js (level-packager.js:3:17)
    at __require2 (chunk-ZQVQAL53.js?v=7e1ee517:19:50)
    at node_modules/level/browser.js (browser.js:1:18)
    at __require2 (chunk-ZQVQAL53.js?v=7e1ee517:19:50)
    at index.js:10:19

[haydenyoung]

Potential fix #450.

Is more documentation required about some of the configuration required for specific frameworks such Vue?