1

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.

2Can
  • 33
  • 5
  • It seems you're on an older version of `socket.io-client`. Version 4.3.0 added esm builds. https://github.com/socketio/socket.io-client/releases/tag/4.3.0 Can you try with a newer version? – Augustine Kim Mar 14 '23 at 20:30

2 Answers2

2

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.

Christian
  • 3,503
  • 1
  • 26
  • 47
0

If you're using Rollup-Plugin, you can try using this module https://www.npmjs.com/package/@rollup/plugin-commonjs and simply call commonjs() before you bundle the other files. Worth a try.

Vincentius Daniel
  • 138
  • 1
  • 9