Exception User-Unhandled using webpack.config.ts

[KerryRJ]

I am attempting to use @easywebpack in a webpack.config.ts file. I am able to build the bundles from Powershell using the webpack command. When trying to start the project from within VS, startup.cs fails with a User-Unhandled.

What am I missing?

Windows 10 -v 1607 Build 14393.693 Node -v 7.6.0 Npm -v 4.1.2 Yarn -v 0.21.3

package.json

{
  "aurelia": {
    "build": {
      "resources": [],
      "includeDependencies": "aurelia-*"
    }
  },
  "dependencies": {
    "aurelia-animator-css": "^1.0.1",
    "aurelia-bootstrapper-webpack": "^1.1.0",
    "aurelia-event-aggregator": "^1.0.1",
    "aurelia-fetch-client": "^1.1.1",
    "aurelia-framework": "^1.1.0",
    "aurelia-history-browser": "^1.0.0",
    "aurelia-loader-webpack": "^2.1.0",
    "aurelia-logging-console": "^1.0.0",
    "aurelia-pal": "^1.3.0",
    "aurelia-pal-browser": "^1.1.0",
    "aurelia-polyfills": "^1.2.0",
    "aurelia-route-recognizer": "^1.1.0",
    "aurelia-router": "^1.2.1",
    "aurelia-templating-binding": "^1.3.0",
    "aurelia-templating-resources": "^1.3.1",
    "aurelia-templating-router": "^1.1.0",
    "aurelia-ui-virtualization": "^1.0.0-beta.3.0.2",
    "aurelia-ux": "^0.1.15",
    "aurelia-validation": "^1.0.0",
    "bluebird": "^3.4.7",
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "global": "^4.3.1",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.1.1",
    "moment": "^2.17.1"
  },
  "description": "A utility to help you record your daily activity.",
  "devDependencies": {
    "@easy-webpack/config-aurelia": "^2.2.4",
    "@easy-webpack/config-common-chunks-simple": "^2.0.3",
    "@easy-webpack/config-copy-files": "^1.1.2",
    "@easy-webpack/config-css": "^4.0.2",
    "@easy-webpack/config-env-development": "^2.1.6",
    "@easy-webpack/config-env-production": "^3.0.0",
    "@easy-webpack/config-external-source-maps": "^3.1.0",
    "@easy-webpack/config-fonts-and-images": "^3.0.0",
    "@easy-webpack/config-generate-index-html": "^2.1.1",
    "@easy-webpack/config-global-bluebird": "^2.1.0",
    "@easy-webpack/config-global-jquery": "^2.1.1",
    "@easy-webpack/config-html": "^3.1.0",
    "@easy-webpack/config-json": "^3.1.0",
    "@easy-webpack/config-source-map-support": "^1.0.2",
    "@easy-webpack/config-test-coverage-istanbul": "^3.2.0",
    "@easy-webpack/config-typescript": "^5.1.0",
    "@easy-webpack/config-uglify": "^2.2.3",
    "@easy-webpack/core": "^2.0.1",
    "@types/bluebird": "^3.0.37",
    "@types/node": "^7.0.5",
    "@types/webpack": "^2.2.7",
    "aspnet-webpack": "^1.0.28",
    "aurelia-protractor-plugin": "^1.0.1",
    "concurrently": "^3.3.0",
    "cross-env": "^3.1.4",
    "del-cli": "^0.2.1",
    "electron": "^1.4.15",
    "protractor": "^5.1.1",
    "ts-node": "^2.1.0",
    "typescript": "^2.2.1",
    "wait-on": "^2.0.2",
    "webpack": "2.2.1",
    "webpack-hot-middleware": "^2.17.1"
  },
  "license": "UNLICENSED",
  "name": "test",
  "repository": {},
  "scripts": {
    "pretest": "del-cli \"test/coverage\"",
    "test": "cross-env NODE_ENV=test TS_NODE_PROJECT=tsconfig.tsnode.json TS_NODE_FAST=true ts-node ./node_modules/karma/bin/karma start test/karma.conf.js",
    "test:debug": "yarn test -- --single-run=false --debug",
    "webdriver:update": "cross-env ./node_modules/.bin/webdriver-manager update",
    "webdriver:start": "cross-env ./node_modules/.bin/webdriver-manager start",
    "pree2e": "yarn run webdriver:update -- --standalone",
    "e2e": "concurrently --success first --kill-others \"yarn run e2e:start-when-ready\" \"cross-env WEBPACK_PORT=19876 yarn start\"",
    "e2e:start-when-ready": "wait-on --timeout 120000 http-get://localhost:19876/index.html && yarn run e2e:start",
    "e2e:start": "cross-env ./node_modules/.bin/protractor test/protractor.conf.js",
    "e2e:live": "yarn run e2e:start -- --elementExplorer",
    "clean": "yarn cache clean && del-cli -f node_modules \"test/coverage\" \"../wwwroot/dist\"",
    "clean:dist": "del-cli -f \"../wwwroot/dist\"",
    "preclean:install": "yarn run clean",
    "clean:install": "yarn install",
    "preclean:start": "yarn run clean",
    "clean:start": "yarn start",
    "watch": "yarn run watch:dev",
    "watch:dev": "yarn run build:dev -- --watch",
    "watch:dev:hmr": "yarn run watch:dev -- --hot",
    "watch:test": "yarn run test -- --auto-watch --no-single-run",
    "watch:prod": "yarn run build:prod -- --watch",
    "build": "yarn run build:dev",
    "prebuild:dev": "yarn run clean:dist",
    "build:dev": "cross-env NODE_ENV=development yarn run webpack -- --progress --profile",
    "prebuild:prod": "yarn run clean:dist",
    "build:prod": "cross-env NODE_ENV=production yarn run webpack -- --progress --profile",
    "start": "yarn run server:dev",
    "server": "yarn run server:dev",
    "server:dev": "cross-env NODE_ENV=development yarn run webpack-dev-server -- --inline --progress --profile --watch",
    "server:dev:hmr": "yarn run server:dev -- --hot",
    "server:prod": "http-server \"../wwwroot/dist\" --cors",
    "webpack": "cross-env TS_NODE_PROJECT=tsconfig.tsnode.json TS_NODE_FAST=true ./node_modules/.bin/webpack",
    "webpack-dev-server": "cross-env TS_NODE_PROJECT=tsconfig.tsnode.json TS_NODE_FAST=true ./node_modules/.bin/webpack-dev-server"
  },
  "version": "0.0.1"
}

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2017", "dom" ],
    "module": "commonjs",
    "moduleResolution": "node",
    "skipDefaultLibCheck": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es2017"
  },
  "exclude": [ "bin", "node_modules" ]
}

tsconfig.tsnode.json

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "module": "commonjs"
  }
}

webpack.config.ts

/// <reference path="./node_modules/@types/node/index.d.ts" />
/**
 * To learn more about how to use Easy Webpack
 * Take a look at the README here: https://github.com/easy-webpack/core
 **/
import { generateConfig, get, stripMetadata, EasyWebpackConfig } from '@easy-webpack/core';
import * as path from 'path';

import * as envProd from '@easy-webpack/config-env-production';
import * as envDev from '@easy-webpack/config-env-development';
import * as aurelia from '@easy-webpack/config-aurelia';
import * as typescript from '@easy-webpack/config-typescript';
import * as html from '@easy-webpack/config-html';
import * as css from '@easy-webpack/config-css';
import * as fontAndImages from '@easy-webpack/config-fonts-and-images';
import * as globalBluebird from '@easy-webpack/config-global-bluebird';
import * as globalJquery from '@easy-webpack/config-global-jquery';
import * as generateIndexHtml from '@easy-webpack/config-generate-index-html';
import * as commonChunksOptimize from '@easy-webpack/config-common-chunks-simple';
import * as copyFiles from '@easy-webpack/config-copy-files';
import * as uglify from '@easy-webpack/config-uglify';
import * as generateCoverage from '@easy-webpack/config-test-coverage-istanbul';

const ENV: 'development' | 'production' | 'test' = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() || (process.env.NODE_ENV = 'development');

// basic configuration:
const title = 'Timescribe';
const baseUrl = '/';
const rootDir = path.resolve('');
const srcDir = path.resolve('src');
const outDir = path.resolve('../wwwroot/dist');

const coreBundles = {
    bootstrap: [
        'aurelia-bootstrapper-webpack',
        'aurelia-polyfills',
        'aurelia-pal',
        'aurelia-pal-browser',
        'bluebird'
    ],
    // these will be included in the 'aurelia' bundle (except for the above bootstrap packages)
    aurelia: [
        'aurelia-animator-css',
        'aurelia-binding',
        'aurelia-dependency-injection',
        'aurelia-event-aggregator',
        'aurelia-framework',
        'aurelia-history',
        'aurelia-history-browser',
        'aurelia-loader',
        'aurelia-loader-webpack',
        'aurelia-logging',
        'aurelia-logging-console',
        'aurelia-metadata',
        'aurelia-path',
        'aurelia-route-recognizer',
        'aurelia-router',
        'aurelia-task-queue',
        'aurelia-templating',
        'aurelia-templating-binding',
        'aurelia-templating-resources',
        'aurelia-templating-router',
        'aurelia-ui-virtualization',
        'aurelia-ux',
        'aurelia-validation'
    ]
};

/**
 * Main Webpack Configuration
 */
let config = generateConfig(
    {
        entry: {
            'app': ['boot' /* this is filled by the aurelia-webpack-plugin */],
            'aurelia-bootstrap': coreBundles.bootstrap,
            'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
        },
        output: {
            path: outDir
        }
    },

    /**
     * Don't be afraid, you can put bits of standard Webpack configuration here
     * (or at the end, after the last parameter, so it won't get overwritten by the presets)
     * Because that's all easy-webpack configs are - snippets of premade, maintained configuration parts!
     *
     * For Webpack docs, see: https://webpack.js.org/configuration/
     */

    ENV === 'test' || ENV === 'development' ?
        envDev(ENV !== 'test' ? {} : { devtool: 'inline-source-map' }) :
        envProd({ /* devtool: '...' */ }),

    aurelia({ root: rootDir, src: srcDir, title: title, baseUrl: baseUrl }),
    typescript(ENV !== 'test' ? {} : { options: { doTypeCheck: false, sourceMap: false, inlineSourceMap: true, inlineSources: true } }),
    html(),
    css({ filename: 'styles.css', allChunks: true, sourceMap: false }),
    fontAndImages(),
    globalBluebird(),
    globalJquery(),
    //globalRegenerator(),
    //generateIndexHtml({ minify: ENV === 'production' }),

    ...(ENV === 'production' || ENV === 'development' ? [
        commonChunksOptimize({ appChunkName: 'app', firstChunk: 'aurelia-bootstrap' }),
        copyFiles({ patterns: [{ from: 'favicon.ico', to: 'favicon.ico' }] })
    ] : [
            /* ENV === 'test' */
            generateCoverage({ options: { esModules: true } })
        ]),

    ENV === 'production' ?
        uglify({ debug: false, mangle: { except: ['cb', '__webpack_require__'] } }) : {}
);

module.exports = stripMetadata(config);

code in startup.cs

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
                    ProjectPath = env.ContentRootPath + "\\ClientApp",
                    ConfigFile = "webpack.config.ts",
                    HotModuleReplacement = false // Aurelia Webpack Plugin HMR currently has issues. Leave this set to false.
                });
            }

System.AggregateException occurred HResult=0x80131500 Message=One or more errors occurred. Source= StackTrace: at System.Threading.Tasks.Task.ThrowIfExceptional(Boolean includeTaskCanceledExceptions) at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification) at Microsoft.AspNetCore.Builder.WebpackDevMiddleware.UseWebpackDevMiddleware(IApplicationBuilder appBuilder, WebpackDevMiddlewareOptions options) at Timescribe.Startup.Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) in C:\Development\Iodrive\Timescribe\Startup.cs:line 45

Inner Exception 1: Exception: Call to Node module failed with error: C:\Development\Iodrive\Timescribe\ClientApp\webpack.config.ts:6 import { generateConfig, get, stripMetadata, EasyWebpackConfig } from '@easy-webpack/core'; ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:73:16) at Module._compile (module.js:543:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.require (module.js:498:17) at require (internal/module.js:20:19) at Object.requireNewCopy (C:\Development\Iodrive\Timescribe\ClientApp\node_modules\aspnet-webpack\RequireNewCopy.js:16:16) at createWebpackDevServer (C:\Development\Iodrive\Timescribe\ClientApp\node_modules\aspnet-webpack\WebpackDevMiddleware.js:169:48)

[SteveSandersonMS]

Since it's failing with Unexpected token import, it sounds like the version of Node you're running doesn't support ES6 import statements. I'm not sure how it could be working when you call it on the command line - perhaps you're running a different version of Node in that case.

I'll close this because it doesn't sound like an issue with any of the code here, but please let us know if you track this down and think it's because we're doing something wrong. Thanks!