Making NPM package available to ES6 and ECMAScript

Question

I'm making an NPM package in TypeScript, and wanted to know how I can make it available for ES and Node modules.

I've set it up with Rollup and a few configs:

rollup.config.js

export default {
    input: 'build/kimp.js', // built from TS
    output: [
        {
            file: 'dist/main/kimp.js',
            format: 'es',
            strict: false,
            name: 'module',
            banner: `#! /usr/bin/env node - Copyright 2020 Herbie Vine - Updated: ${new Date()}`
        },
        {
            file: 'dist/module/kimp.js',
            format: 'umd',
            strict: false,
            name: 'common',
            banner: `#! /usr/bin/env node - Copyright 2020 Herbie Vine - Updated: ${new Date()}`
        }
    ],
    plugins: [
        terser(),
        resolve(),
        json(),
        commonjs({
            include: 'node_modules/**'
        })
    ],
    external: [
        'crypto'
    ]
};

package.json

{
    "name": "kimp",
    "version": "1.0.0",
    "description": "Lightweight ID generator",
    "sideEffects": false,
    "main": "dist/main/kimp.js", // import() - es6
    "module": "dist/module/kimp.js", // require() - node
    "scripts": {
        "build": "tsc -p ./src/tsconfig.json",
        "rollup": "rollup -c"
    },
    "publishConfig": {
        "registry": "https://npm.pkg.github.com/"
    },
    "keywords": [...],
    "repository": {...},
    "author": "Herbie Vine",
    "license": "MIT",
    "bugs": {...},
    "homepage": "https://github.com/herbievine/kimp#readme",
    "devDependencies": {...}
}

I tried using it in an express app, but I get an error:

const { kimp } = require('kimp');
console.log(kimp)
------
C:\Users\**\kimp-ts\dist\main\kimp.js:3484
export { kimp };
^^^^^^

This is coming from the built version for es modules

basic gist on github

Am I wrong to believe that when node requires a package, it looks at the module key in package.json. Anyways I've been at it for hours, any help would mean a lot cheers

Ahmed Waleed · Accepted Answer · 2020-07-05T15:45:01.887

2

Using rollup you have compiled in to ESModules as you have specified format: 'es' in your rollup.config.js. Nodejs uses commonjs modules and require is supposed to import the commonjs module which it couldn't find there and hence you are getting error. Nodejs started shipping experimental support for ES modules starting node version 10. If you have greater than version node 10 you can just update your express server start script in package.json to allow the experimental modules support for instance: "start": "node --experimental-modules server.js".

Other approaches that can work depending on your liking or requirements:

Use the third party @std/esm to compile and use es modules as commonjs modules
Compile your library in commonjs modules via this rollup plugin

Edit: It seems the above code in question had issue in config and which fixed the issue, main and module entries in package.json were declared other way around and had to swap the entries to set them up correctly. Main should actually point to umd and module should point to es modules.

edited Jul 05 '20 at 15:45

answered Jul 05 '20 at 15:17

Ahmed Waleed

51
4

I given you a gist but for more details on the subject, you can also consult this [post](https://blog.logrocket.com/how-to-use-ecmascript-modules-with-node-js/) – Ahmed Waleed Jul 05 '20 at 15:19
Tried the flag and had a look at that post. Still however giving me an error :/. Is there any way I can point to my `dist/module` folder instead of it taking code from `dist/main`? – Herbie Vine Jul 05 '20 at 15:26
@HerbieVine after that flag, did you use `import {kimp} from 'kimp'`? – Ahmed Waleed Jul 05 '20 at 15:33
yes I did, and it gave me an error about using modules in node scripts – Herbie Vine Jul 05 '20 at 15:34
@HerbieVine it seems your main and module are declared other way around as well you need to swap the entries. Main should actually point to umd and module should point to es modules see this [answer](https://stackoverflow.com/a/47537198/8885100) as well for more info. – Ahmed Waleed Jul 05 '20 at 15:39

Making NPM package available to ES6 and ECMAScript

1 Answers1