esbuild not handling some exports

[gavindoughtie]

My code:

import { GraphQLClient } from "graphql-request";

Works fine with a straight-up esbuild but using the web dev server in watch mode I get:

Uncaught SyntaxError: The requested module '/__wds-outside-root__/1/node_modules/graphql-request/dist/index.js' does not provide an export named 'GraphQLClient'

Inspecting the file in my node_modules I definitely see:

exports.GraphQLClient = GraphQLClient;

graphql-request compiles with commonjs modules

Suggestions on what to tweak in the web dev server config? Here it is:

import { esbuildPlugin } from "@web/dev-server-esbuild";
import { hmrPlugin } from '@web/dev-server-hmr';

export default {
  rootDir: "src",
  appIndex: "index.html",
  watch: true,
  debug: true,
  esbuildTarget: "auto",
  plugins: [
    hmrPlugin(),
    esbuildPlugin({
      ts: true,
      tsx: true,
      jsxFactory: "h",
      jsxFragment: "Fragment",
      outdir: 'dist',
      target: 'esnext',
      platform: 'browser'
    }),
  ],
};

[LarsDenBakker]

The esbuild plugin uses the esbuild single file transform API, not the bundler. For module loading the browser module loader is used. The correct syntax to export in the browser in export { GraphQLClient }, the module you're importing is using commonjs which is for node js.

[Westbrook]

With the single file transform API being leveraged here, would a user also be able to add wrapped rollup plug-ins to work in a module transform here? Not fun to do the module transforms differently in the two contexts, but if it were possible that way, then at least the pages would run.

Another alternative, would be to run esbuild first/watched. I've seen some great write ups about keeping the watch process nice and fast recently...