Incompatibility with SSR/static site builders [gatsby]

Context

colyseus.js does not work with Gatsby. Upon trying to build, the build will fail.

The most curious thing is, this happens even by just importing the Client class, without actually instantiating or executing any colyseus.js code…

import { Client } from "colyseus.js"
...
const client = Client;  // inside React render function, executes at runtime

These two lines will cause the build to fail. The second line is there only to prevent the import from being left out by tree-shaking, it merely assigns a reference to the class.

ERROR #98123  WEBPACK
Generating SSR bundle failed
Can't import the named export 'globalAgent' from non EcmaScript module (only default export is available)
File: node_modules/httpie/dist/index.mjs

ERROR #98123  WEBPACK
Generating SSR bundle failed
Can't import the named export 'parse' from non EcmaScript module (only default export is available)
File: node_modules/httpie/dist/index.mjs

ERROR #98123  WEBPACK
Generating SSR bundle failed
Can't import the named export 'request' from non EcmaScript module (only default export is available)
File: node_modules/httpie/dist/index.mjs

ERROR #98123  WEBPACK
Generating SSR bundle failed
Can't import the named export 'resolve' from non EcmaScript module (only default export is available)
File: node_modules/httpie/dist/index.mjs

not finished Building static HTML for pages - 1.532s

Reproduction

This is a minimal Gatsby non-typescript starter, with colyseus.js as a dependency, and a single import and reference to the Client class on the main page (index.js).

Workaround

It’s possible to patch the WebPack config to resolve colyseus.js as null during SSR, as described in Gatsby’s docs.

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /colyseus\.js/, // crashes build on import
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

This fixes the error caused by importing during SSR, but will still include the library in the final browser bundle, benefitting from intelligent pre-fetching, static builds, etc. The only catch is that any colyseus-related code (such as accessing the Client class) must be used in useEffect hooks which defer to browser execution.

I know that Colyseus is not designed for SSR etc… But I moved to Gatsby to overcome some brick wall limitations of the Create-React-App, after getting frustrated by long custom WebPack configs, and parcel failing miserably.

[lukeed]

This error message shows that the Node.js version of httpie is being loaded. The ESM format is being understood just fine, but it can’t find the exports from http or path because those modules don’t exist.

The quick fix is to configure Gatsby so that the “browser” entry is resolved with priority, or to add an alias directly to the httpie file if you don’t want “browser” entries globally for some reason.

Colyseus can also directly import the browser version of httpie if it doesn’t intend on being universal.

[endel]

I believe this has been fixed on the latest version! Feel free to re-open if this is still breaking for you!