socket.io-client.js: Cannot access 'XMLHttpRequest' before initialization

[tomnil]

Hi.

Using Snowpack with with socket.io-client + react renders an exception, but running it with traditional React works fine. The bug might be in socket.io:s code, but I don't think so. Note, there are information how to workaround the problem at the end (for now).

Steps to reproduce

1. npx create-snowpack-app new-dir --template @snowpack/app-template-react-typescript
2. cd new-dir
3. npm install socket.io-client
4. npm start
5. View the result (all ok)
6. Replace app.tsx contents with:

import React from 'react';
import * as socketio from "socket.io-client";

const App = () => {

  const [response, setResponse] = React.useState("");

  React.useEffect(() => {
    const socket = socketio.io("http://localhost:3005");
    // @ts-ignore (bad practice, this is for reproducing a bug only)
    socket.on("FromAPI", data => {
      setResponse(data);
    });
  }, []);

  return (
    <p>
      It's <time dateTime={response}>{response}</time>
    </p>
  );
};

export default App 

7. Save. The following errors are displayed:

Unhandled Runtime Error
Uncaught ReferenceError: Cannot access 'XMLHttpRequest' before initialization

Source
http://localhost:8081/web_modules/socket.io-client.js [:2528:26]
ReferenceError: Cannot access 'XMLHttpRequest' before initialization
    at http://localhost:8081/web_modules/socket.io-client.js:2528:26
    at http://localhost:8081/web_modules/socket.io-client.js:2531:3

Workaround

Looking into \.cache\snowpack\development\socket.io-client.js it's this line that fails. I cannot find this line in the socket.io-client code.

const XMLHttpRequest = XMLHttpRequest;

...and removing the line resolves the error.

/T

[r6203]

Seems to be related to #62?

As a workaround importing like this works: import io from "socket.io-client/dist/socket.io.js"
Original comment here: #62 (comment)

[stephanedemotte]

Get the same error with vitejs

I simply call import io from 'socket.io-client' and boom error

Uncaught ReferenceError: Cannot access 'XMLHttpRequest' before initialization

I've tried import io from "socket.io-client/dist/socket.io.js"
But got

Uncaught SyntaxError: The requested module '/@modules/socket.io-client/dist/socket.io.js' does not provide an export named 'default'

[tomnil]

As a workaround importing like this works: import io from "socket.io-client/dist/socket.io.js"
Original comment here: #62 (comment)

Stephanie, I can confirm this workaround works fine. Thanks a lot! /T