chrome throw ERR_HTTP2_PROTOCOL_ERROR

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.

[ec965]

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.

[prestonp]

We were able to resolve this following https://github.com/vitejs/vite/pull/3895 and adding maxSessionMemory: 100 to server.https in the vite config