import locale in SvelteKit/NodeJS

[faulander]

i tried the following combinations:

• import { de } from 'date-fns/locale/index.js'
• import { de } from 'date-fns/locale'
• import { de } from 'date-fns/esm/locale'
• import { de } from 'date-fns/esm/locale/index.js'

all of them bring this or a similar error:
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '.../node_modules/date-fns/locale/de' is not supported resolving ES modules imported from .../.svelte-kit/output/server/entries/pages/moral.svelte.js
How can i get this to work please?

[faulander]

seems i got it to work with:
import de from 'date-fns/locale/index.js'

[garytube]

I have the same problem. I'll give it a try

[junaga]

@faulander @garytube What node --version are you using? Mine is v16.15.0, I got the same error

[ocavue]

TLDR, this is because Node.js doesn't allow a package to provide both CommonJS and ESM build under the same extension (.js) without "type": "module" in package.json. Here is a detailed explanation: https://github.com/sheremet-va/dual-packaging

I created a PR to fix this issue: #3099

[ZerdoX-x]

due to lack of esm support from date-fns it's now completely unusable with dynamic locale imports
you just can't import date-fns' locale on-fly

[vadimpopa]

@ZerdoX-x for me it works:

import('date-fns/locale/sv/index').then((locale)=>{});

[productdevbook]

esm problem

// m.mjs
import format from 'date-fns/esm/format/index.js'

console.log(format(new Date(), 'yyyy-MM-dd'))

(node:19584) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/private/tmp/date-fns-play/node_modules/date-fns/esm/format/index.js:1
import isValid from "../isValid/index.js";

[gterras]

Works fine without TS complaining: import fr from 'date-fns/locale/fr/index'

[igrep]

In my environment (run directly on Node v18 after tsc), I had to make a .d.ts below for workaround:

declare module 'date-fns/locale/index.js' {
  import { ja } from 'date-fns/locale';
  export { ja }
}

Then, refer it when importing:

/// <reference types="path/to/date-fns-workaround.d.ts" />
import { ja } from 'date-fns/locale/index.js';

Make sure to add the directory path/to/ to "include" in the tsconfig.json.

[jamie-pate]

For this to properly be fixed you probably need to add "exports" in this package's package.json

    "exports": {
        "./*": "./*.js",
        "./locale/*": "./locale/*/*.js"
    },

https://nodejs.org/api/packages.html#packages_exports

otherwise you need --experimental-specifier-resolution=node (at least in node 16)

import enUS from 'date-fns/locale/en-US/index.js'; works as a workaround

[karlhorky]

@kossnocorp now that ESM support has been merged into main and will be released soon in v3, should this issue also be closed?

(it was marked as one of the issues that #3099 was going to close)

[abdullohmirzayev]

package.json
"exports": { "./*": "./*.js", "./locale/*": "./locale/*/*.js" },

example.tsx

import enUS from 'date-fns/locale/en-US/index.js' import tr from 'date-fns/locale/tr/index.js' import uz from 'date-fns/locale/uz/index.js' import ru from 'date-fns/locale/ru/index.js'