#Uncaught TypeError: The specifier “socket.io-client” was a bare specifier, but was not remapped [..]

8 messages · Page 1 of 1 (latest)

harsh vessel
#

Hi, I'm struggling a lot with an error that I can find very little information on.
I get the error at runtime, on the frontend of my app, and the full error is:
Uncaught TypeError: The specifier “socket.io-client” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

It's not specific to socket.io-client, as when I comment out everything related to it, the same thing happens with the next external module, and then the next, and so on.
The import happens in a script that is included in an ejs file, at src/public/sylloapp/app.js:
import { io } from "socket.io-client";

My package.json has:
"type": "module".

My tsconfig.json:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "esnext",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "lib": ["es2021", "dom"],
        "noImplicitAny": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
        }
        
    },
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
}

I also have a gulpfile.js with the same compiler options specified.
I've tried to use nodenext as moduleResolution. I've tried adding the module in "paths", like so: "socket.io-client": ["node_modules/socket.io-client/dist/socket.io.js"]. I've tried just about anything I can think of and find. I'm confident the package is installed, including the @types, and that the path is correct. It's perhaps worth noting the express server is running https, and I'm testing it on localhost. If anyone can think of solutions, please let me know!

ornate isle
tidal ermine
#

@harsh vessel You should probably not use native modules on the web; use a bundler

harsh vessel
#

@tidal ermine Aah, I've seen recommendations to use webpack, but I've also heard it can be "hell". What would you recommend? I would like to keep using my gulpfile, if possible

tidal ermine
#

Gulp is fine, but it's still not supposed to emit any import/export statements

#

And I'm not quite as faimilar with gulp as a front end bundler

harsh vessel
harsh vessel
#

Webpack seems to work fine, thanks @tidal ermine