Typescript + Webpack + node_modules resolution

Question

I have a project that I'm working on - written in Typescript (2.4), bundled with Webpack (3.5), and some node dependencies. It has a Client and Server part to it, each in it's own subfolder. I soon realized that these share a lot of code, and added another top level 'shared' folder - and in both tsconfig.json files, I added:

...
"include": [
    "*.ts",
    "../shared/*.ts",
]
...

All of this worked great - but soon these shared files started having dependencies of their own. I figured that since the shared files are not really built on their own - the ownership of the dependencies would belong in the Server and Client directories. Something like this:

project
| server
|  | node_modules
|  |  |  @types
|  |  |  |  some-npm-library
|  |  |  some-npm-library
|  | main.ts
|  | SomeServerClass.ts   (inherits ../shared/BaseClass)
|  | tsconfig.json
|  | webpack.config.js
| client
|  | node_modules
|  |  |  @types
|  |  |  |  some-npm-library
|  |  |  some-npm-library
|  | main.ts
|  | SomeClientClass.ts   (inherits ../shared/BaseClass)
|  | tsconfig.json
|  | webpack.config.js
| shared
|  | BaseClass.ts    (Has an dependency on some npm thing)
|  | otherstuff.ts

When I run tsc - it compiles with no error. But webpack doesn't seem to ever find the node_modules dependencies, with an Error: Can't resolve 'some-npm-library'.

Client tsconfig.json:

{
    "compilerOptions": {
        "target": "es2017",
        "module": "commonjs",
        "baseUrl": "./",
        "sourceMap": true,
        "outDir": "./build",
        "typeRoots": ["./node_modules/@types"],
        "types": ["some-npm-library"],
        "lib": [ "es6", "dom", "es2017.object", "es2016.array.include" ]
    },
    "include": [
        "*.ts",
        "..shared/**.ts"
    ]
}

Client webpack.config.js

const path = require('path');

module.exports = {
    entry: "./main.ts",
    target: "web",
    output: {
        filename: "app.js",
        path: __dirname + "/bin"
    },
    watch: true,

    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".js", ".json"],                  
    },

    module: {
        rules: [
            { test: /\.ts$/, loader: "ts-loader" },    
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

Answer 1

What worked for me:

I figured out a solution - it may not work for other people in similar situations - but I used Webpack's Resolve.alias. By adding in a line like so:

alias: {
   'npm-library': path.resolve(__dirname, 'node_modules/npm-library/')
}

Which will make webpack look at import * from 'npm-library' and recognize it - despite that there is no npm library in that shared folder.

Also maybe try:

I also tried installing dependencies into the shared folder - rather than the client and server individually - the issue there was that I would have duplicate dependencies. But being careful to avoid that may work as well.

Answer 2

Using this webpack.config.ts file with proper file path:

var fs = require('fs');
var path = require('path');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function (x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  entry: './app/server.ts',
  mode: 'development',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'server.js',
  },
  resolve: {
    // Add '.ts' and '.tsx' as a resolvable extension.
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
  },

  module: {
    // loaders: [
    rules: [
      // All files with a '.ts' or '.tsx'
      // extension will be handled by 'ts-loader'
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
      },
    ],
  },
  target: 'node',
  externals: nodeModules,
};