Jaganathan Bantheswaran Jaganathan Bantheswaran - 1 month ago 26
TypeScript Question

Webpack: Unexpected token : in webpack.config.ts

I am trying to build an angular + typescript + webpack application. I used this as source and modified as per my requirement.

This is my webpack.config.ts:

const {
optimize: {
CommonsChunkPlugin,
DedupePlugin
}
} = require('webpack');

const { ConcatSource } = require('webpack-sources');
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
const AssetsPlugin = require('assets-webpack-plugin');
const path = require('path');
const fs = require('fs');

function root(__path = '.') {
return path.join(__dirname, __path);
}

// type definition for WebpackConfig is defined in webpack.d.ts
function webpackConfig(options: EnvOptions = {}): WebpackConfig {

const CONSTANTS = {
ENV: JSON.stringify(options.ENV),
PORT: 3000,
HOST: 'localhost',
HTTPS: false
};

const isProd = options.ENV.indexOf('prod') !== -1;

return {
cache: true,
devtool: 'source-map',
entry: {
main: './src/index'
},

output: {
path: root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
},

module: {
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader',
exclude: [/\.(spec|e2e|d)\.ts$/],
include: [root('../src')]
},
{ test: /\.json$/, loader: 'json-loader', include: [root('../src')] }
]
},


plugins: [
new AssetsPlugin({
path: root('dist'),
filename: 'webpack-assets.json',
prettyPrint: true
}),
new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
],
resolve: {
extensions: ['.ts', '.js', '.json']
},

node: {
global: true,
process: true,
Buffer: false,
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false,
clearTimeout: true,
setTimeout: true
}
};
}

// Export
module.exports = webpackConfig;


when i run
$> webpack --config webpack.config.ts
i am getting the following error.

$ webpack --config ./configs/webpack.config.ts
PathToProject\WebStorageManager\configs\webpack.config.ts:19
function webpackConfig(options: EnvOptions = {}): WebpackConfig {
^
SyntaxError: Unexpected token :
at Object.exports.runInThisContext (vm.js:76:16)


Do i miss some webpack configuration?

Answer

As far as I know, your webpack config has to be a javascript script, not typescript. If you would like to use typescript for your webpack config you would first need to compile the typescript file into a js file using the typescript compiler. Webpack is complaining because it can't parse your webpack.config.ts as valid javascript.

Apparently though, another option is to install npm install ts-node. Since webpack does internally use the interpret library it will automatically register the .ts extension for automatic transpile upon require. I believe this is how the angular2-seed repo you posted above is working.

Comments