CODEWITHSUNDEEP
typescript
JoeTidee
JoeTidee

Reputation: 26114

Typescript - export was not found

I have this Typescript file in module A:

// somefile.tsx
import { remAuto } from 'tidee-life-theme';

In module B, I have the index.js file export remAuto:

// index.js
import { remAuto } from './src/utils';
export default {
  remAuto,
};

However, when I build using Webpack I get this error:

WARNING in ./src/components/somefile.tsx 50:20-27 "export 'remAuto' was not found in 'module-b'

remAuto is clearly being exported and this worked prior to me trying to convert parts of module A to Typescript. What am I missing?

Upvotes: 2

Views: 7476

Answers (3)

ulidtko
ulidtko

Reputation: 15643

I also met this while reexporting a type:

import { toast, ToastContent, ToastOptions, Id as ToastId } from 'react-toastify';
export { ToastId };

Typescript understands that no problem; but webpack complains:

export 'Id' (reexported as 'ToastId') was not found in 'react-toastify' (possible exports: Bounce, Flip, Icons, Slide, ToastContainer, Zoom, collapseToast, cssTransition, toast, useToast, useToastContainer)

As the second comment in webpack#7378 kindly explained, this Id I'm importing is a TS interface i.e. a type. And types get erased when JS gets extracted from TS.

Hence, what helped in my case was to say export type:

import { toast, ToastContent, ToastOptions, Id as ToastId } from 'react-toastify';

export type { ToastId };

Upvotes: 0

Hamid
Hamid

Reputation: 897

In my case, I had an import like this

import { CategoryLayoutDisplayTypesEnum,MobileSettingsService} from 'src/app/modules/sales-channels';

It turned out that I should change it like this!

import { CategoryLayoutDisplayTypesEnum } from 'src/app/modules/sales-channels/data';
import { MobileSettingsService } from 'src/app/modules/sales-channels/data-access/services';

Upvotes: 0

zerkms
zerkms

Reputation: 255065

It should be a non-default export

export {
  remAuto,
};

Otherwise you should import a default then destructure it

import tideelifetheme from 'tidee-life-theme';
const { remAuto } = tideelifetheme;

Why:

Because the

export default {
  remAuto,
};

is read as: "export an object with remAuto property assigned to remAuto value".

While

import { remAuto } from 'tidee-life-theme';

is read as "import a named import with remAuto identifier" (and you don't have one).

To summarise: named exports and exporting an object by default are not interchangeable.

Upvotes: 4

Related Questions