Remix/Vite/EdgeDB: When using edgeql-js with tsx, imported modules are not resolved correctly.

[benrbowers]

Code

import e from '../dbschema/edgeql-js';

const insertCitizens = e.params({ citizens: e.json }, (params) => {
    return e.for(e.json_array_unpack(params.citizens), (citizen) => {
	    return e.insert(e.Citizen, {
		    name: e.cast(e.str, citizen.name),
		    identity: e.insert(e.ext.auth.LocalIdentity, {
			    issuer: e.cast(e.str, citizen.identity.issuer),
			    subject: e.cast(e.str, citizen.identity.subject),
			    modified_at: e.cast(e.datetime, new Date()),
		    }),
	    });
    });
});

>> yarn tsx seed/seed-citizens.ts

Error or desired behavior

"Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/ben/democracy-app/node_modules/edgedb/dist/reflection/index' imported from /home/ben/democracy-app/dbschema/edgeql-js/set.ts
Did you mean to import "edgedb/dist/reflection/index.js"?"

Manually changing all occurrences of import from "edgedb/dist/reflection/index" and import from "edgedb/dist/primitives/buffer" to import from "edgedb/dist/reflection/index.js" and import from "edgedb/dist/primitives/buffer.js" fixes the issue.

Versions

• OS: Ubuntu Jammy Jellyfish
• EdgeDB version: 5.3+cc878d8
• EdgeDB CLI version: 5.1.0+7c5764f
• edgedb-js version: 1.5.5
• @edgedb/generate version: 0.5.3
• TypeScript version: ^5.1.6
• Node version: 20.12.2

[scotttrinh]

What does your tsconfig.json look like for this project? You might need to set "moduleResolution": "bundler" (see https://www.typescriptlang.org/docs/handbook/modules/theory.html#module-resolution-for-bundlers-typescript-runtimes-and-nodejs-loaders for more details).

We have an open issue to rehaul the TS output to take into account all of the new module resolution modes supported by both TypeScript, alternative runtimes (like Deno and Bun), and bundlers, but in the meantime we can figure out what the right incantation for your own particular setup should be.

[benrbowers]

Default tsconfig from create-remix@latest:

{
	"include": [
		"**/*.ts",
		"**/*.tsx",
		"**/.server/**/*.ts",
		"**/.server/**/*.tsx",
		"**/.client/**/*.ts",
		"**/.client/**/*.tsx"
	],
	"compilerOptions": {
		"lib": ["DOM", "DOM.Iterable", "ES2022"],
		"types": ["@remix-run/node", "vite/client"],
		"isolatedModules": true,
		"esModuleInterop": true,
		"jsx": "react-jsx",
		"module": "ESNext",
		"moduleResolution": "Bundler",
		"resolveJsonModule": true,
		"target": "ES2022",
		"strict": true,
		"allowJs": true,
		"skipLibCheck": true,
		"forceConsistentCasingInFileNames": true,
		"baseUrl": ".",
		"paths": {
			"~/*": ["./app/*"]
		},

		// Vite takes care of building everything, not tsc.
		"noEmit": true
	}
}