Webpack: Unexpected token : in webpack.config.ts

Question

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?

Daniel Tabuenca · Accepted Answer · 2016-10-30 09:38:08Z

4

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.

edited Oct 30, 2016 at 9:38

answered Oct 30, 2016 at 7:56

Daniel Tabuenca

13.7k3 gold badges40 silver badges43 bronze badges

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

5 Comments

Jagan Over a year ago

If that's the case, then how do i could build this project with webpack.config.ts file

Daniel Tabuenca Over a year ago

One way is to just run tsc manually and load the resulting .js file. I updated my answer to include another potential way using ts-node. This option is likely what you are looking for.

Jagan Over a year ago

That worked! Is there a doc which talks about your updated answer?

Daniel Tabuenca Over a year ago

No there is not. Took me a bit of digging through webpack source to figure it out.

Moustachiste Over a year ago

There is now webpack documentation regarding config files in typescript: webpack.js.org/configuration/configuration-languages/…

Collectives™ on Stack Overflow

Webpack: Unexpected token : in webpack.config.ts

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related