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.
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.