Webpack and TypeScript: unable to enable module 'child_process' in node.d.ts

Question

I tried to get webpack, typescript and react.js working together awesome-typescript-loader , but I keep getting errors.

I am using the awesome typescript loader in version 0.3.0-rc.2 and webpack 1.8.9

This is my webpack.config.js:

module.exports = { entry: './ui/index.ts', output: { path: __dirname + '/build-ui', filename: 'app.js', publicPath: 'http://localhost:8090/assets' }, module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, { test: /\.ts$/, loader: 'awesome-typescript-loader' } ] }, resolve: { extensions: ['', '.js', '.jsx', '.ts'] } }; 

When I start the webpack dev server, and my index.ts looks like this:

 alert('hello'); 

It indicates the following error:

 ERROR in ./ui/index.ts /Users/..../typings/node/node.d.ts:29:12 Subsequent variable declarations must have the same type. Variable 'require' must be of type 'WebpackRequire', but here has type '{ (id: string): any; resolve(id: string): string; cache: any; extensions: any; main: any; }'. 

Same thing when I put in the reference path.

When I try to import React.js via import React = require('react'); , he indicates:

 ERROR in ./ui/index.ts Module build failed: Cannot resolve module 'child_process' in /..../typings/node Required in /..../typings/node/node.d.ts 

I copied the node.d.ts file from the bootloader repository, still no luck.

Has anyone been able to get this combination seamlessly? Or should I just use a different web packer? I would really like it to work with webpack.

Answer 1

All you are missing is the target: 'node' key.

This ensures that the environment you are targeting is Node.js, not a browser, and therefore ignores its own dependencies.

Final configuration:

 module.exports = { entry: './ui/index.ts', target: 'node', output: { path: __dirname + '/build-ui', filename: 'app.js', publicPath: 'http://localhost:8090/assets' }, module: { loaders: [ { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, { test: /\.ts$/, loader: 'awesome-typescript-loader' } ] }, resolve: { extensions: ['', '.js', '.jsx', '.ts'] } }; 

Answer 2

You can use another webpack TypeScript downloader . I know some of them have problems with the node file. There are also a couple starter kits that can help.

Disclaimer: I support ts-loader .

Answer 3

Try creating the tsconfig.json file.

For example, when you use awesome-typescript-loader , this should work:

 { "compilerOptions": { "target": "es5", "module": "commonjs", "emitDecoratorMetadata": true, "experimentalDecorators": true, "sourceMap": true, "noEmitHelpers": true }, "exclude": [ "node_modules" ], "awesomeTypescriptLoaderOptions": { "forkChecker": true }, "compileOnSave": false, "buildOnSave": false, "atom": { "rewriteTsconfig": false } }