Setup a typescript library for usage in nodejs, browser and other typescript projects

Question

I'm writing a library that needs to run in nodejs, and in the browser (imported via script tag).
I want to use typescript to write it, because it's convenient, also I want to use webpack, because at some point I may have other contents or styles to associate to it.
So far, I've succeded in making the library available to node and to the browser, but somehow, I can't simply import it in another typescript project and use the fact that it's a typescript library.

This is how my tsconfig.json look:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es6",
    "outDir": "ts/",
    "strict": true
  }
}

and this is my webpack.config.js:

const path = require('path');

// PLATFORMS
var variants = [
  {
    target: "web",
    filename: "index.browser.js"
  },
  {
    target: "node",
    filename: "index.node.js"
  },
];

// CONFIG
var configGenerator = function (target, filename) {
  return {
    entry: './src/index.ts',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    target: target, // "web" is default
    output: {
      library: "myWebpackTypescriptLib",
      libraryTarget: "umd",
      filename: filename,
      path: path.resolve(__dirname, 'dist')
    }
  };
};

// MAP PLATFORMS WITH CONFIGS
module.exports = variants.map(function(variant){
  return configGenerator(variant.target, variant.filename)
})

From another typescript project, I tried to import it like this:

import myWebpackTypescriptLib from "myWebpackTypescriptLib";

But with this import, in my text editor, I wouldn't have access to typescript definitions, and at runtime I got the following error: ReferenceError: require is not defined.

I also tried the followings, hoping I may have better results:

import * as myWebpackTypescriptLib from "myWebpackTypescriptLib/src/index"
import * as myWebpackTypescriptLib from "myWebpackTypescriptLib/dist/ts/index.d"

With those, I succeded in getting the typescript definition, but not to have a running code.

I tried various configurations of module and target in compiler, but somehow, the present one gave me the best results. At least two on three of the things I'm trying to do work.
I've followed many different tutorials on how to achieve similar thing, but I never got to have those three elements working. I must still be missing something.
Any idea?

EDIT:
This is how my directory structure look like:

All the code is located in "/src/" directory, and webpack creates versions for browser and node in "/dist/".
The file /src/index.ts imports codes from other files in additionals, plugins, utilities, it looks like this:

// UTILITIES
export * from "./utilities/someUtility";

// ADDITIONALS
export { someModule } from "./additionals/someModule";

let test = 10;
let echo = (a:any) => {
  return a;
}

export default test;
export { echo };

All the import and export are properly set, since everything is rendered well by webpack for the browser and node.

The kind of import to use depends on how the features of your package are export-ed. You should update your question with examples of how you are doing that. For example, export default will allow your first try to work. But see this great advice. — Daniel Earwicker
@DanielEarwicker Thank you for your comment. I don't think the problem has to do with import or export though, I think everything is properly set on that side, especially since webpack doesn't have any issue producing it's outputs for the browser and node. The problem seem more in the setup of the whole library, but I don't really understand yet where it is. — chateau

chateau chateau · Accepted Answer · 2018-07-05T17:06:30

So I finally succeeded to make it work.
I was missing a proper declaration of my types in the library's package.json, this is how it look now, and it works :)

{
  "name": "myWebpackTypescriptLib",
  "version": "0.0.1",
  "description": "A webpack typescript library, usable in browser, node and other typescript projects.",
  "main": "dist/index.node.js",
  "types": "dist/ts/index.d.ts", // <---- this here was not properly set, it gives access to the typescript definitions when importing from other typescripts files
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development --progress --config webpack.config.js",
    "prod": "webpack --mode=production --progress --config webpack.config.js"
  },
  ...
}

Setup a typescript library for usage in nodejs, browser and other typescript projects

1 Answers