Node.js + Typescript + Webpack = Module not found

Question

I'm new with Webpack, Node.js and Typescript and I'm having trouble configuring my dev enviroment.

When running webpack to compile my src/server.ts to generate the /server/bundle.js I'm getting this error:

ERROR in ./src/server.ts
Module not found: Error: Can't resolve 'hapi' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/src'
 @ ./src/server.ts 3:11-26

The architecture of the project is:

The src/server.ts:

import * as Hapi from 'hapi';

const server = new Hapi.Server();

The webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/server.ts',
  output: {
    filename: './server/bundle.js'
  },
  resolve: {
    extensions: ['.ts'],
    modules: [
      path.resolve('src'),
      path.resolve('node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /.ts$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  }
};

The package.json:

{
  "name": "nodang-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "webpack --progress --watch",
    "serve": "node-dev server/bundle.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/hapi": "^16.0.0",
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.0.8",
    "tsd": "^0.6.5",
    "typescript": "^2.2.1",
    "webpack": "^2.2.1"
  }
}

OBS: It's webpack 2

UPDATE

After installing hapi and adding .js to webpack's resolve extentions and node as webpack's target I'm getting this erros with hapi modules:

ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
 @ ./~/hapi/lib/server.js 5:15-32
 @ ./~/hapi/lib/index.js
 @ ./src/server.ts

ERROR in ./~/hapi/lib/server.js
Module not found: Error: Can't resolve 'catbox-memory' in '/Volumes/Dados/giovane/dev/studio-hikari/nodang/nodang-api/node_modules/hapi/lib'
 @ ./~/hapi/lib/server.js 6:21-45
 @ ./~/hapi/lib/index.js
 @ ./src/server.ts

could you show your package.json file?

Hoang Hiep
– Hoang Hiep

2017-03-03 12:37:19 +00:00
Commented Mar 3, 2017 at 12:37 — Hoang Hiep
– Hoang Hiep, Commented Mar 3, 2017 at 12:37
@AnyName just added

Giovane
– Giovane

2017-03-03 12:42:25 +00:00
Commented Mar 3, 2017 at 12:42 — Giovane
– Giovane, Commented Mar 3, 2017 at 12:42
test: /\.ts$/, may be you would escape the .

Jai
– Jai

2017-03-03 12:46:13 +00:00
Commented Mar 3, 2017 at 12:46 — Jai
– Jai, Commented Mar 3, 2017 at 12:46
@Jai did it, same thing

Giovane
– Giovane

2017-03-03 12:47:28 +00:00
Commented Mar 3, 2017 at 12:47 — Giovane
– Giovane, Commented Mar 3, 2017 at 12:47
import * as Hapi from '@types/hapi';

paqash
– paqash

2017-03-03 12:48:19 +00:00
Commented Mar 3, 2017 at 12:48 — paqash
– paqash, Commented Mar 3, 2017 at 12:48

Michael Jungo · Accepted Answer · 2017-03-03 14:18:52Z

8

You did not install hapi. @types/hapi are just the type definitions that TypeScript uses for the library, but not the actual library itself. So you need to add hapi as well:

npm install --save hapi

Once you've installed it, the module can be found, although you'll get a new error that ./server could not be resolved in hapi/lib/index.js and that's because you configure resolve.extensions to only include .ts, but the library makes use of Node automatically resolving .js when leaving off the extension. So you also need to include .js in the extensions:

extensions: ['.ts', '.js'],

After also resolving this issue, you'll be faced with another one, namely that Node built-in modules like fs can't be resolved. By default webpack builds for the web, so the Node built-in modules are not available. But you can change that by setting the target option in your webpack config to node:

target: 'node'

Edit

You're having trouble with other node_modules because you only use the top level node_modules, instead you want to always fall back to the regular module resolution of node_modules, so the resolve.modules should look like this:

modules: [
  path.resolve('src'),
  'node_modules'
]

edited Mar 3, 2017 at 14:18

answered Mar 3, 2017 at 13:52

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

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

5 Comments

Hoang Hiep Over a year ago

Great answer! I would like to ask a question. Is there any practical reason for using webpack targeting node.js? Thanks

Michael Jungo Over a year ago

I guess the main reason is to have a production build that only includes what is necessary (which can be optimised) and all you need to run the app, is the bundle (and Node of course), without having to install any dependencies.

Giovane Over a year ago

Great, now it's compiling hapi. But I got new errors from hapi modules.

Michael Jungo Over a year ago

I edited the answer to resolve that issue. I didn't have that issue because I'm using Yarn and it installs those dependencies to the top level as opposed to what npm does.

Giovane Over a year ago

Man, you're my hero! Everything is working fine! I just had to remove the "typeRoots": ["node_modules"] I put on the tsconfig.json.

Collectives™ on Stack Overflow

Node.js + Typescript + Webpack = Module not found

OBS: It's webpack 2

UPDATE

1 Answer 1

Edit

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

OBS: It's webpack 2

UPDATE

1 Answer 1

Edit

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related