chrome throw ERR_HTTP2_PROTOCOL_ERROR

[haili042]

Describe the bug

When I run vite devServer, Chrome occasionally fails to load some js files. The error message is net::ERR_HTTP2_PROTOCOL_ERROR.
Then I re-run vite devServer and reload it, and it runs fine. But when I copied the url and opened it in a new tab, it broke again. This error only occurs in Chrome, FireFox is working fine.

I find some net log in chrome://net-internals/#events:

This is the gist of the error:
HTTP2_STREAM_ERROR
--> description = "Server reset stream."
--> net_error = "ERR_HTTP2_PROTOCOL_ERROR"
--> stream_id = 13571

Reproduction

export const getViteConfig = (): InlineConfig => {
  const packages = [];

  return {
    configFile: false,
    mode: 'development',
    publicDir: path.resolve(process.cwd(), '.temp/vite-static'),
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
      },
    },
    define: {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      __BUILDING_TOOL__: JSON.stringify('vite'),
      __DEV__: true,
      __DEBUG_INFO__: JSON.stringify(process.env.DEBUG_INFO || ''),
      __PRIVATE__: JSON.stringify(process.env.PRIVATE),
      __PRIVATE_VERSION__: JSON.stringify(process.env.PRIVATE_VERSION || ''),
    },
    resolve: {
      alias: packages.reduce(
        (prev, curr) => ({
          ...prev,
          [curr.packageJson?.name]: path.resolve(rootPath, curr.rootPath, 'src'),
        }),
        {
          '~antd/dist/antd.less': path.resolve(rootPath, 'node_modules/antd/dist/antd.less'),
          '~antd/lib/message/style/index.css': path.resolve(rootPath, 'node_modules/antd/lib/message/style/index.css'),
        },
      ),
      mainFields: ['main', 'module', 'jsnext:main', 'jsnext'],
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    },
    server: {
      https: true,
      port: 5001,
      hmr: {
        host: '127.0.0.1',
      },
    },
  };
};

// ...
const server = await createServer(getViteConfig());
await server.listen();

System Info

System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 21.06 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 92.0.4515.107
    Firefox: 90.0.2
    Safari: 13.1.2
  npmPackages:
    vite: ^2.4.3 => 2.4.3

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[prestonp]

We were able to resolve this following #3895 and adding maxSessionMemory: 100 to server.https in the vite config

[enochchau]

I resolved this by disabling http/2 in the dev server.
https://vitejs.dev/config/#server-https

Enable TLS + HTTP/2. Note this downgrades to TLS only when the server.proxy option is also used.

In vite.config.js:

  },
  server: {
    host: true,
    proxy: {
      'https://localhost:3000': 'https://localhost:3000'
    },
    https: true,
    port: 3000
  }
});

There may be an error between how chrome handles http/2 and how node.js has http/2 implemented.
https://bugs.chromium.org/p/chromium/issues/detail?id=1045328#c68

Chrome sets the fin bit of the final non-empty data packet to true, which apparently triggers a bug in the server. Other browsers instead send a separate empty data packet with the fin bit set to true at the end of the request body. Both are completely valid under the HTTP/2 spec.

[benatshippabo]

I resolved this by disabling http/2 in the dev server. https://vitejs.dev/config/#server-https

Enable TLS + HTTP/2. Note this downgrades to TLS only when the server.proxy option is also used.

In vite.config.js:

  },
  server: {
    host: true,
    proxy: {
      'https://localhost:3000': 'https://localhost:3000'
    },
    https: true,
    port: 3000
  }
});

There may be an error between how chrome handles http/2 and how node.js has http/2 implemented. https://bugs.chromium.org/p/chromium/issues/detail?id=1045328#c68

Chrome sets the fin bit of the final non-empty data packet to true, which apparently triggers a bug in the server. Other browsers instead send a separate empty data packet with the fin bit set to true at the end of the request body. Both are completely valid under the HTTP/2 spec.

It might not just be a chrome bug, I am able to somewhat consistently reproduce this on firefox as well

[johnnypea]

I have the same issue. But @benatshippabo solution works for me, thanks.

[bluwy]

Perhaps #6207 would fix this

[hybridherbst]

Also running into this issue, and pretty frequently. Seems to also happen not only when many modules are loaded, but simply when large files are served along the page (e.g. a 10-20MB GLB file or so).

The somewhat weird workaround of setting the proxy to localhost worked for me as well.

[timothyallan]

Yeah, we have a chunky FontAwesome module which seems to cause this to sporadically appear. At least, it's the first file to die in the dev tools log, then on refresh, all the others die as well.

Edit: using v2.9.12

[bluwy]

Seems like #6207 is merged into Vite 3 alpha. If y'all could test it out, I think it should fix the issue. Otherwise it also seems harmless enough to backport to Vite 2.9

[bluwy]

I'll pre-emptively close this per #4403 (comment)