从Typescript库导入的符号未定义

Question

I am developing a React/Redux application using Typescript. In order to simplify development, I want to create libraries for each "domain" or "feature" that will encapsulate specifics of the domain and expose an API to the top-level application.

So far I have created a library (in Typescript) named @foo/foo and a main application that depends on this library. The library has a toplevel index.ts file that looks like:

export * from "./services/Executor";
export * from "./services/Foo";
export * from "./services/Result";
export * from "./services/listFoo";

The file ./services/Executor.ts exports a bunch of functions like:

export const fetchFoo = ...

Then I created an application using create-react-app --script react-ts and in one of the actions file I do:

import { fetchFoo } from '@foo/foo';
...

But when I run the React application using npm run start , I got:

TypeError: fetchFoo is not a function

From my research on the web I assume I am messing up with modules import semantics: Both packages are configured (in tsconfig.json ) to be compiled to es6 with esModuleInterop: true . I tried changing modules field but to no avail.

What am I doing wrong?

Update : Here is some code demonstrating the problem: https://github.com/abailly/react-ts-import-module

Answer 1

You should reference your build output under the "main" key in your package.json and point to the main declaration file under the "types" key:

{
  ...
  "main": "build/index.js",
  "types": "build/index.d.ts",
  ...
}

CRAs tsc/webpack will look for a JS file when bundling. Imported modules are not transpiled by default (though this could be enabled, but since you build your lib separately this should not be necessary)

I hope that works (and helps if yes ;)