Cannot use multiple imports from TypeScript npm package

Question

I have a small TypeScript-based npm package with the following tsconfig.json:

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "declaration": true,
        "outDir": "./dist",
        "strict": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
    },
    "include": [
        "src/**/*"
    ]
}

In its src/index.ts, it exports two classes, one of them being the default:

import StateMachine from './StateMachine';
import Chunk from './Chunk';

exports.StateMachine = StateMachine;
exports.Chunk = Chunk;

export default StateMachine;

This gets compiled to the following file in dist/index.js:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const StateMachine_1 = __importDefault(require("./StateMachine"));
const Chunk_1 = __importDefault(require("./Chunk"));
exports.StateMachine = StateMachine_1.default;
exports.Chunk = Chunk_1.default;
exports.default = StateMachine_1.default;

Now, in another project, where I am also using TypeScript, I want to use both of these exported members. So I write:

import StateMachine, { Chunk } from '@foo/bar';

However, I get an error saying that “Module … has no exported member Chunk”. The default export however is found without issues. This is the tsconfig.json of the other project:

{
    "compilerOptions": {
        "jsx": "react",
        "target": "es5",
        "module": "esnext",
        "noEmitOnError": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "stripInternal": false,
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "strict": true,
        "noImplicitAny": true,
        "declaration": false,
        "useDefineForClassFields": true,
        "skipLibCheck": true,
    },
    "include": [
        "source",
        "webpack.config.js"
    ]
}

What am I doing wrong here?

slhck · Accepted Answer · 2020-04-23 12:18:25Z

1

The solution is rather simple. Do not manually set exports, but instead use the following in src/index.ts:

export { StateMachine, Chunk }

answered Apr 23, 2020 at 12:18

slhck

39.6k33 gold badges163 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot use multiple imports from TypeScript npm package

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related