typescriptsocket.ionode-moduleslitsocket.io-client

Importing socket.io-client into Lit controller throws error "Requested module <name> does not provide an export named default"


I'm currently building a controller for a Lit web component with TypeScript and when I am importing socket.io-client ( import {io} from "socket.io-client" ), it compiles correctly and starts the dev server only to then throw the error Uncaught SyntaxError: The requested module './lib/receiver.js' does not provide an export named 'default' (at wrapper.mjs:2:8) in wrapper.mjs which is a file within the engine.io-client node module. My tsconfig.json looks like this:

{
    "compilerOptions": {
        "esModuleInterop": true,
        "allowJs": true,
        "target": "ES6",
        "module": "ES6",
        "lib": ["es2020", "DOM", "DOM.Iterable", "ES5"],
        "declaration": true,
        "declarationMap": true,
        "sourceMap": true,
        "inlineSources": true,
        "outDir": "./dist/",
        "rootDir": "./src",
        "strict": true,
        "noUnusedLocals": false,
        "noUnusedParameters": false,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "strictPropertyInitialization": false,
        "noImplicitOverride": true,
        "plugins": [
            {
                "name": "ts-lit-plugin",
                "strict": true
            }
        ]
    },
    "include": ["src/**/*.ts"],
    "exclude": []
}

wrapper.mjs looks like this (again, it's not made by me, just wanted to save time by not making you all search for it):

import createWebSocketStream from './lib/stream.js';
import Receiver from './lib/receiver.js';
import Sender from './lib/sender.js';
import WebSocket from './lib/websocket.js';
import WebSocketServer from './lib/websocket-server.js';

export { createWebSocketStream, Receiver, Sender, WebSocket, WebSocketServer };
export default WebSocket;

Looking into all the imported libs, they don't simply export but use module.export = "".

I have tried using the require syntax, but it then throws another error saying require is not defined and to rather use import.


Solution

  • If you are using @web/dev-server the solution is to use the importmapsplugin.

    In your web-dev-server config:

    import {importMapsPlugin} from '@web/dev-server-import-maps';
    
    ...
      plugins: [
        importMapsPlugin({
          inject: {
            importMap: {
              // import the already built version, because not every subdependency is an esm module, thus this path can change sometimes
              imports: {
                'socket.io-client':
                  '/__wds-outside-root__/1/node_modules/socket.io-client/dist/socket.io.esm.min.js',
              },
            },
          },
        }),
        esbuildPlugin({ts: true, target: 'es2020'}),
      ],
    ...
    

    I am using socket.io-client 4.5.4 with this solution.