Directory import is not supported resolving ES modules

[thobson]

🐛 Bug report

Firstly, apologies but I'm not sure if this is an fp-ts issue or a vite/webpack/sveltekit issue but I'd be grateful for any pointers ...

Current Behavior

I'm importing using this syntax:

import { pipe } from "fp-ts/function";

When running vite dev everything works fine, however after building and running the svelte kit app I get this error:

Directory import 'node_modules/fp-ts/function' is not supported resolving ES modules imported from .svelte-kit/output/server/entries/pages/_page.svelte.js

Additional context

I can work around the issue by importing like this:

import { pipe } from "fp-ts/es6/function";

However this then raises an error during vite dev

.pnpm/[email protected]/node_modules/fp-ts/es6/function.js:17
export var getBooleanAlgebra = function (B) {
^^^^^^

SyntaxError: Unexpected token 'export'

Your environment

Software	Version(s)
fp-ts	2.16.1
TypeScript	5.2.2
vite	4.5.0

[thobson]

Quick update:

importing from lib seems to resolve the issue, but if I'm honest I don't understand why 😄

import { pipe } from "fp-ts/lib/function";

I'll leave the ticket here in case someone else runs into the same problem

[ninsy]

Same happened on my local machine, directly using fp-ts. Used npm version is 10.2.4 and I've set "type": "module" within package.json.

"Fix" from @thobson comment appears to work

[samhh]

For anyone wondering, the fp-ts ecosystem of libraries don't currently support ESM, instead only ES6 and CJS. When you explicitly import from fp-ts/lib/* you're effectively specifying that you want to import CJS, which works because ESM can generally import CJS but not ES6. If you're using a bundler you'll want to rewrite those imports back to fp-ts/es6/* to avoid bundle bloat.

[jderochervlk]

I recently hit this issue and I think I might have a fix.

Please hold...

[jderochervlk]

Ok, in order to fix this issue the /es6/ output would need to be updated and changes would need to be made to the package.json file.

In the package.json the existing fields for main, module, and typings, would need to be removed and replaced with the exports field for each module, like this:

  "exports": {
    "./Option": {
      "import": "./es6/Option.js",
      "require": "./lib/Option.js",
      "types": "./lib/Option.d.ts"
    }
  },

And files inside the es6 folder would need to include the file extensions for all imports, like this:

import { getApplicativeMonoid } from './Applicative.js';
import { apFirst as apFirst_, apS as apS_, apSecond as apSecond_, getApplySemigroup as getApplySemigroup_ } from './Apply.js';
import * as chainable from './Chain.js';

[jderochervlk]

Since this is just using tsc as the compiler you would need to write the source files with the file extension. TypeScript can enforce this and make sure modules can be resolved if you set "moduleResolution": "NodeNext" in the main tsconfig.json file.

// this
import { foo } from './lib' // Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './lib.js'?

// would have to become this
import { add } from './lib.js'