Only named exports may use 'export type'

[Velmoren]

Describe the bug

My settings: Angular 13 "tslib": "^2.0.0", "typescript": "~4.6.4" "@fancyapps/ui": "^5.0.28",

Error: node_modules/@fancyapps/ui/types/Carousel/Carousel.d.ts:6:1 - error TS1383: Only named exports may use 'export type'.

6 export type * from "./plugins/index";

Error: node_modules/@fancyapps/ui/types/Carousel/plugins/index.d.ts:2:1 - error TS1383: Only named exports may use 'export type'.

2 export type * from "./Dots/Dots";

Error: node_modules/@fancyapps/ui/types/Carousel/plugins/index.d.ts:3:1 - error TS1383: Only named exports may use 'export type'.

3 export type * from "./Navigation/Navigation";

Error: node_modules/@fancyapps/ui/types/Carousel/plugins/index.d.ts:4:1 - error TS1383: Only named exports may use 'export type'.

4 export type * from "./Sync/Sync";

Error: node_modules/@fancyapps/ui/types/Fancybox/Fancybox.d.ts:5:1 - error TS1383: Only named exports may use 'export type'.

5 export type * from "./plugins/index";

Error: node_modules/@fancyapps/ui/types/Fancybox/plugins/index.d.ts:2:1 - error TS1383: Only named exports may use 'export type'.

2 export type * from "./Hash/Hash";

Error: node_modules/@fancyapps/ui/types/Fancybox/plugins/index.d.ts:3:1 - error TS1383: Only named exports may use 'export type'.

3 export type * from "./Images/Images";

Error: node_modules/@fancyapps/ui/types/Fancybox/plugins/index.d.ts:4:1 - error TS1383: Only named exports may use 'export type'.

4 export type * from "./Html/Html";

Error: node_modules/@fancyapps/ui/types/Fancybox/plugins/index.d.ts:5:1 - error TS1383: Only named exports may use 'export type'.

5 export type * from "./Slideshow/Slideshow";

Error: node_modules/@fancyapps/ui/types/Fancybox/plugins/index.d.ts:6:1 - error TS1383: Only named exports may use 'export type'.

6 export type * from "./Thumbs/Thumbs";

Error: node_modules/@fancyapps/ui/types/Fancybox/plugins/index.d.ts:7:1 - error TS1383: Only named exports may use 'export type'.

7 export type * from "./Toolbar/Toolbar";

Error: node_modules/@fancyapps/ui/types/Panzoom/Panzoom.d.ts:5:1 - error TS1383: Only named exports may use 'export type'.

5 export type * from "./plugins/index";

Error: node_modules/@fancyapps/ui/types/shared/Base/types.d.ts:4:116 - error TS2589: Type instantiation is excessively deep and possibly infinite.

4     [K in Extract<keyof O, string>]: O[K] extends Array<any> ? K : O[K] extends Record<string, unknown> ? `${K}` | `${K}.${DeepKeyOf<O[K]>}` : K;

Reproduction

1) install "@fancyapps/ui": "^5.0.28", 2) in component.ts import { Fancybox } from '@fancyapps/ui'; 3) npm start

Additional context

No response

[fancyapps]

Hi,

Thanks for the reporting, but I can't reproduce any of these issue, everything works perfectly fine to me. Even using different code playgrounds I see no issue: https://stackblitz.com/edit/react-ts-zfff59?file=App.tsx,Carousel.tsx,Fancybox.tsx https://codesandbox.io/s/autumn-thunder-b7ecz7?file=/src/Fancybox.tsx

So if you have any hints/ideas, I'd love to hear them.

Edit: I think the problem is that you are using an old version of TS. For example, see this TS issue: https://github.com/microsoft/TypeScript/issues/37238

[Velmoren]

Hello

That's right, but angulat 13 is not able to use higher TypeScript versions (max version 4.7). If exports are escaped // @ts-ignore everything works, but unfortunately I won’t be able to do this in the library. Need named exports

[Velmoren]

I think the https://stackblitz.com service ignores TS errors

[Velmoren]

Is it possible to add a separate version for Angular with escaped exports (at least) with the __betta prefix (for example)? Or you will have to wrap the library code in a separate library with a fix

[Velmoren]

This is how we managed to fix the export error

export * from './Dots/Dots'; 
export * from './Navigation/Navigation'; 
export * from './Sync/Sync';

instead

export type * from './Dots/Dots'; 
export type * from './Navigation/Navigation'; 
export type * from './Sync/Sync';

[AsbDaryaee]

Hi, I have kind of the same issue using Nuxt 3:

- Operating System: Linux
- Node Version:     v21.2.0
- Nuxt Version:     3.8.1
- CLI Version:      3.10.0
- Nitro Version:    2.7.2
- Package Manager:  pnpm@8.11.0
- Builder:          -
- User Config:      devtools, css, postcss, modules, colorMode, runtimeConfig, device, vite, vue, gtag, app
- Runtime Modules:  nuxt-schema-org@3.2.0, @nuxt/image@1.0.0, @pinia/nuxt@0.4.11, @vueuse/nuxt@10.6.1, @nuxtjs/device@3.1.1, nuxt-gtag@1.1.1, @nuxtjs/color-mode@3.3.2
- Build Modules:    -

And the error is:

SyntaxError: Named export 'Fancybox' not found. The requested module '@fancyapps/ui' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@fancyapps/ui';
const { Fancybox } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async setup (file:///src/server/chunks/app/server.mjs:21008:76)
    at async Object.callAsync (file:///src/server/chunks/app/server.mjs:91:16)
    at async applyPlugin (file:///src/server/chunks/app/server.mjs:18417:35)
    at async applyPlugins (file:///src/server/chunks/app/server.mjs:18437:7)
    at async createNuxtAppServer (file:///src/server/chunks/app/server.mjs:25003:7)
    at async Object.renderToString (file:///src/server/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19)
    at async file:///src/server/chunks/handlers/renderer.mjs:217:21

I followed the instruction in https://fancyapps.com/resources/integration/#vue

[fancyapps]

@AsbDaryaee Hi,

This is a misleading message - '@fancyapps/ui' is a CommonJS module - it is not a CommonJS module. And it works fine as you can clearly see in any demo you can find in the docs, therefore I have no idea how to help you.

Maybe try loading it directly, like this:

import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';

Working demo - https://stackblitz.com/edit/js-xue4qe?file=index.js

[AsbDaryaee]

@AsbDaryaee Hi,

This is a misleading message - '@fancyapps/ui' is a CommonJS module - it is not a CommonJS module. And it works fine as you can clearly see in any demo you can find in the docs, therefore I have no idea how to help you.

Maybe try loading it directly, like this:

import { Fancybox } from '@fancyapps/ui/dist/fancybox/fancybox.esm.js';

Working demo - https://stackblitz.com/edit/js-xue4qe?file=index.js

Many thanks for your attention, I tried this and it's working fine:

import * as fancy from "@fancyapps/ui";
const { Fancybox } = fancy;