Imports seem to be incorrect

[cortopy]

In the docs it says that all exports are named like:

import {
  hyphenate,
  hyphenateHTML,
  hyphenateHTMLSync,
  hyphenateSync
} from "hyphen/en";

but that doesn't work for me. I have to do:

import Hyphen from "hyphen/en";
const {
 hyphenate,
  hyphenateHTML,
  hyphenateHTMLSync,
  hyphenateSync
} = Hyphen;

It looks like all the name exports are exported inside the default export

[krisztianb]

Is that a TypeScript or JavaScript project?

This is working in one of my TypeScript projects:

import { hyphenateSync } from "hyphen/en-gb";

Looking at the code in the node_modules folder there is no default export specified.

[cortopy]

it's a typescript project with allowSyntheticDefaultImports enabled

[krisztianb]

Do you have the type definitions installed?

You might need to set the esModuleInterop flag to true.

[cortopy]

I already had esModuleInterop as true

I didn't know there were types, thanks for that.

However, installing them did not help either.

If I try to import from 'hyphen/en' typescript doesn't recognise it as a module. On top of that, the types only declare a default export for 'hyphenate' as a function, so it's impossible to import any named exports even from the main hyphenate module

I think having the types made the situation even worse

[krisztianb]

Well, it should be possible as you can see in the test written for the type definition: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/hyphen/hyphen-tests.ts

Can you share your project or at least your config files?

[cortopy]

got it! I was testing the types with the examples for the README, and it turns out that the English package was missing from the type definitions. I just added in the PR linked above

[cortopy]

actually I spoke too soon. The typings were missing, so at least that's done. Vscode doesn't complain any more but it still doesn't compile as the structure of the exports is still a named "default" object that contains all the functions

this is my tsconfig

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "ESNEXT",
    "lib": ["esnext", "dom", "dom.iterable"],
    "allowJs": false,
    "declaration": false,
    "declarationMap": false,
    "sourceMap": true,
    "importHelpers": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": false,
    "noImplicitReturns": true,
    "moduleResolution": "node",
    "baseUrl": "src",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "preserveSymlinks": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "allowUnusedLabels": true
  },
  "include": ["src", "types"],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "dist-storybook",
    "webpack",
    "jest",
    "**/*.spec.ts",
    "src/setupTests.ts",
    "src/styles",
    "config"
  ]
}

[krisztianb]

I found some time to look into this and created a small separate project which has your tsconfig.json file and the test file linked above as index.ts.

I executed the following commands in a command prompt:

1. npm init
2. npm install hyphen
3. npm install --save-dev @types/hyphen
4. npm install typescript

Then doing an npx tsc compiles without any errors and creates an index.js file.

[cortopy]

Must be something else on my side. I'll close this then and reopen if I can reproduce in a way that others can too. Thank you!