webpack not able to bundle files when tsc is

Question

I'm having some trouble getting webpack to build my files. it just spits a bunch of errors, all of the same form, saying:

ERROR in ./node_modules/typescript-rest/dist/server.js
Module not found: Error: Can't resolve 'typescript-ioc/es6' in '/Users/Jack/NODE/ts-rest-session/node_modules/typescript-rest/dist'

it seems like it's not loading node_modules correctly.

tsc and ts-node are both able to build/run the project fine. Here are my configs:

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "lib": ["es2015", "dom"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

webpack.config.js

module.exports = {
  entry: {
    server: './server.ts'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    modules: ["node_modules"]
    extensions: ['.tsx', '.ts', '.js', '.json']
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + 'dist'
  }
};

if anyone has any ideas I'm all ears! i've tried removing node_modules form the exclude of module.rules[0] in webpack.config.json.

Answer 1

If you want to resolve modules according to baseUrl and paths in your tsconfig.json then you can use the tsconfig-paths-webpack-plugin package. For details about this functionality, see the module resolution documentation.

This feature requires webpack 2.1+ and TypeScript 2.0+. Use the config below or check the package for more information on usage.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
...
    resolve: {
        plugins: [new TsconfigPathsPlugin({ /*configFile: "./path/to/tsconfig.json" */ })]
        }
...
}

https://github.com/TypeStrong/ts-loader/blob/master/README.md

---

EDIT

It seems you are trying to build something for node, by default webpack builds for the web. So you have to put the right target in your webpack.config. Also your are missing a "," inside of resolve and your output path should be something like path: __dirname + '/dist'

I tried to reproduce your problem, and this configuration works fine for me:

var nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'development',
  entry: './server.ts',
  // in order to ignore built-in modules like path, fs, etc. 
  target: 'node', 
  // in order to ignore all modules in node_modules folder
  externals: [nodeExternals()], 
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: 'source-map',

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: ['.ts', '.tsx', '.js', '.json']
  },

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
      },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      },
    ]
  },
};