Webpack support

[martijnboland]

Currently, aurelia-kendoui-bridge cannot be used from npm because the reference to the main file is missing. There should be an entry in package.json like:

  "main": "dist/commonjs/index.js"

With this addition, the package can be used with webpack.

[JeroenVinke]

@martijnboland will do, but what will webpack do with globalResource calls? We use it here and it typically contains an array of relative paths such as ./button/button etc

[adriatic]

Does this mean how you managed to run the KendoUI bridge with webpack tooling? What is the answer to

what will webpack do with globalResource calls?

Most importantly - who is not in charge if this issue if you (@jeroenvinke) did not try to run bridge with webpack?

[JeroenVinke]

@adriatic just released 0.6.1 with this change. So someone has to test this out with the webpack skeleton

[adriatic]

Just a suggestion : try the run the released version of https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-es2016-webpack first (not a version from the master branch this one is made ready for Babel 6 and I do not know whether that code might have any impact on your testing)

Once you see how nice that runs with Webpack - it should be easy to apply this experience on the KendoUI bridge build with webpack.

Doing this, having a peek at https://github.com/aurelia/skeleton-navigation/issues/344 might be of value.

If you get the webpack version of skeleton kendo to work - it should live here https://github.com/aurelia-ui-toolkits/kendoui-templates-repository

Please stuff your findings here in this comment series

[JeroenVinke]

@martijnboland Just tried it out with the main property in package.json. I'm now getting these errors:

These are calls from aurelia.globalResources() in the plugin by the way.

If we can fix those errors then atleast our wrappers should be loading. Getting kendo to work with webpack may need extra configuration as well: http://docs.telerik.com/kendo-ui/third-party/webpack

Used these commands:

npm install https://github.com/telerik/kendo-ui-core/archive/2016.1.226.tar.gz
npm install aurelia-kendoui-bridge --save <--- without --save, it will not be in package.json and webpack won't find it

[martijnboland]

@JeroenVinke this is also what I experienced, and for this scenario I've added the includeSubmodules option to the webpack-plugin, https://github.com/aurelia/webpack-plugin/pull/5

With this new option, your plugins section in the webpack config must be something like:

plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: 'aurelia-kendoui-bridge' }
      ]
    }),
    new webpack.ProvidePlugin({
      jQuery: 'jquery'
    })
  ],

This will bundle all submodules in aurelia-kendoui-bridge. To filter the modules, it's possible to only include the ones you need with a regex:

      includeSubModules: [
        { moduleId: 'aurelia-kendoui-bridge', include: /(autocomplete|combobox|datetimepicker|window)/ }
      ]

But, when restricting the submodules, you should also restrict loading the plugins:

aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', (kendo) => kendo.kendoAutoComplete().kendoCombobox().kendoDateTimePicker().kendoWindow);

[JeroenVinke]

@martijnboland thanks for the detailed response!

[martijnboland]

With the latest version of the aurelia-webpack-plugin it's possible to use aurelia-kendo-ui-bridge.

A working example can be found at https://github.com/martijnboland/skeleton-navigation/tree/kendoui-bridge/skeleton-es2016-webpack (autocomplete tab).

Note: there is a bug on Windows where nested submodules are resolved incorrectly because of a backslash in the path. The PR that fixes this issue is sent (https://github.com/aurelia/webpack-plugin/pull/7), but not included in the latest release.

[martijnboland]

Well, the PR is merged and the example should now also work properly on Windows

[adriatic]

@martijnboland - you are becoming a hero (at least in our Aurelia-UI-Toolkits group). Being able to use Webpack in our daily life gives a tremendous boost in our daily productivity.

Thank you again.

[hwaastad]

@JeroenVinke , Do you have a recommendation on how to solve css in a submodule? Currently I'm trying to use the materialize-bridge and the navbar component: By following the includesubmodules strategy:

Uncaught (in promise) Error: Failed loading required CSS file: aurelia-materialize-bridge/navbar/navbar.css at fixupCSSUrls (webpack:///./~/aurelia-templating-resources/dist/commonjs/css-resource.js?:28:11) at eval (webpack:///./~/aurelia-templating-resources/dist/commonjs/css-resource.js?:63:14)fixupCSSUrls @ css-resource.js:28(anonymous function) @ css-resource.js:63

/hw

[JeroenVinke]

@hwaastad Sorry, I have no (real) experience with webpack (yet). I would recommend to create an issue here

[hwaastad]

@JeroenVinke , thanks, I've made an issue.

br hw

[ggrimbert]

Hi,

I tried the solutions you exposed, but it still don't work.

I have the following config :

/*eslint-disable no-var*/

var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var ProvidePlugin = require('webpack/lib/ProvidePlugin');

module.exports = {
  devServer: {
    host: 'localhost',
    port: 3000
  },
  entry: {
    main: [
      './src/main'
    ]
  },
  resolve: {
    root: [
      path.resolve('./src'),
      path.resolve('./node_modules/jquery/dist/jquery.min.js'),
      path.resolve('../kendo-code')
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  plugins: [
//    new AureliaWebpackPlugin(),
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: 'aurelia-kendoui-bridge' },
        { moduleId: "aurelia-i18n" },
        { moduleId: "aurelia-dialog" }
      ]
    }),
    new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new ProvidePlugin({
      Promise: 'bluebird'
    })
  ],
  module: {
    loaders: [
      { test: /pnotify.*\.js$/, loader: "imports?define=>false,global=>window" },
      { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy'] } },
      { test: /\.css?$/, loader: 'style!css' },
      { test: /\.html$/, loader: 'html' },
      { test: /\.(png|gif|jpg)$/, loader: 'url?limit=8192' },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&minetype=application/font-woff2' },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file' }
    ]
  }
};

the project kendo-core in the resolve part is the path to my kendo.min.js. I had to add jquery juste before of the file won't load. After webpack, i get the following result :

Unhandled rejection Error: Cannot find module "aurelia-kendoui-bridge/common/template-compiler"
    at webpackMissingModule (http://ggrimbert:1337/1.bundle.js:63649:90)
    at Object.<anonymous> (http://ggrimbert:1337/1.bundle.js:63649:214)
    at Object.<anonymous> (http://ggrimbert:1337/1.bundle.js:64046:31)
    at __webpack_require__ (http://ggrimbert:1337/bundle.js:48:30)
    at webpackContext (http://ggrimbert:1337/1.bundle.js:935:10)
    at http://ggrimbert:1337/bundle.js:7317:50
    at Function.requireEnsure [as e] (http://ggrimbert:1337/bundle.js:62:29)
    at http://ggrimbert:1337/bundle.js:7316:32
    at WebpackLoader._import (http://ggrimbert:1337/bundle.js:7311:13)
    at http://ggrimbert:1337/bundle.js:7367:17
From previous event:
    at WebpackLoader.loadModule (http://ggrimbert:1337/bundle.js:7365:13)
    at WebpackLoader.loadAllModules (http://ggrimbert:1337/bundle.js:7351:24)
    at ViewEngine.importViewResources (http://ggrimbert:1337/bundle.js:10676:25)
    at http://ggrimbert:1337/bundle.js:28903:24
From previous event:
    at loadResources (http://ggrimbert:1337/bundle.js:28894:8)
    at http://ggrimbert:1337/bundle.js:28971:15
    at next (http://ggrimbert:1337/bundle.js:28851:31)
    at runTasks (http://ggrimbert:1337/bundle.js:28857:11)
    at http://ggrimbert:1337/bundle.js:29132:17
From previous event:
    at http://ggrimbert:1337/bundle.js:29131:22
From previous event:
    at FrameworkConfiguration.apply (http://ggrimbert:1337/bundle.js:29117:43)
    at Aurelia.start (http://ggrimbert:1337/bundle.js:28746:22)
    at http://ggrimbert:1337/bundle.js:168:12
    at http://ggrimbert:1337/bundle.js:273:13
    at Array.<anonymous> (http://ggrimbert:1337/bundle.js:202:20)
    at http://ggrimbert:1337/bundle.js:263:28
From previous event:
    at http://ggrimbert:1337/bundle.js:255:45
From previous event:
    at run (http://ggrimbert:1337/bundle.js:250:25)
    at Object.<anonymous> (http://ggrimbert:1337/bundle.js:277:2)
    at Object.2 (http://ggrimbert:1337/bundle.js:278:31)
    at __webpack_require__ (http://ggrimbert:1337/bundle.js:48:30)
    at Object.1 (http://ggrimbert:1337/bundle.js:109:36)
    at __webpack_require__ (http://ggrimbert:1337/bundle.js:48:30)
    at Object.0 (http://ggrimbert:1337/bundle.js:99:19)
    at __webpack_require__ (http://ggrimbert:1337/bundle.js:48:30)
    at 0 (http://ggrimbert:1337/bundle.js:91:18)
    at http://ggrimbert:1337/bundle.js:94:10

[adriatic]

@ggrimbert - the problem was initially (and still remains the same) that unlike jspm / systemjs, webpack does not know how to resolve "implicit" dependencies. The "aurelia-kendoui-bridge/common/template-compiler" is one of KendoUI bridge "internal modules". Having to specifically define all modules in Webpack's resolve section is not practical

[ghost]

@adriatic I have a kendoGrid working in my app right now with Webpack and I didn't need to define all modules in the configuration. I have something like this:

module.exports = {
  root:[
      path.resolve('./'),
      path.resolve('./third-party/kendo/js')
  ],
  ...
  plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: 'aurelia-kendoui-bridge', include: /(grid|template)/ }
      ]
    })
  ]
}

And in my main.ts:

.plugin('aurelia-kendoui-bridge', (kendo) => {
   kendo.kendoGrid().kendoTemplateSupport();
})

[adriatic]

This sounds almost too good to be true - where almost is the operative word. Let me see if I can get it to work, using your information.

the folder third-party located at the root of your project is the equivalent of our vendors folder, right?

[ghost]

Yep, third-party = vendors. I think I dont forget anything but I'm almost sure that is all I needed to make it work...

[adriatic]

Well, Alex - I am still having the same problem - described below:

DEBUG [templating] importing resources for aurelia-kendoui-bridge/autocomplete/autocomplete.html Array[0]
aurelia-logging-console.js:60 INFO [aurelia] Aurelia Started
aurelia-logging-console.js:50 DEBUG [templating] importing resources for app.html Array[4]0: "nav-bar.html"1: "bootstrap/dist/css/bootstrap.css!"2: "kendo-ui/styles/kendo.common.min.css!"3: "kendo-ui/styles/kendo.bootstrap.min.css!"length: 4__proto__: Array[0]
aurelia-loader-webpack.js:87 Uncaught (in promise) TypeError: Cannot read property 'fetch' of undefined
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:87:52)
    at WebpackLoader._import (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:84:12)
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:140:16)
    at WebpackLoader.loadModule (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:138:12)
    at WebpackLoader.loadAllModules (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:124:23)
    at ViewEngine.importViewResources (webpack:///./~/aurelia-templating/dist/commonjs/aurelia-templating.js?:2650:24)
    at ViewEngine.loadTemplateResources (webpack:///./~/aurelia-templating/dist/commonjs/aurelia-templating.js?:2620:17)
    at eval (webpack:///./~/aurelia-templating/dist/commonjs/aurelia-templating.js?:2589:38)
aurelia-loader-webpack.js:87 Uncaught (in promise) TypeError: Cannot read property 'fetch' of undefined(…)
aurelia-loader-webpack.js:87 Uncaught (in promise) TypeError: Cannot read property 'fetch' of undefined(…)

Since my webpack configuration is the same as you just suggested, it is quite possible that I incorrectly diagnosed my problem as a webpack issue. Would you be so kind to run colne and run this app (https://github.com/aurelia-ui-toolkits/kendoui-templates-repository/tree/master/skeleton-es2016-webpack-kendo-core), please?

[charlespockert]

Nik, remove the exclamation marks from the end of the CSS imports, webpack expects the name of the loader to come before the !

I've got this all working fine with webpack and typescript, I'll jump in the Gitter tomorrow if you are still around and still struggling, need to get back into js, been away for far too long! On 23 Apr 2016 00:06, "Nikolaj Ivancic" notifications@github.com wrote:

Well, Alex - I am still having the same problem - described below:

DEBUG [templating] importing resources for aurelia-kendoui-bridge/autocomplete/autocomplete.html Array[0] aurelia-logging-console.js:60 INFO [aurelia] Aurelia Started aurelia-logging-console.js:50 DEBUG [templating] importing resources for app.html Array[4]0: "nav-bar.html"1: "bootstrap/dist/css/bootstrap.css!"2: "kendo-ui/styles/kendo.common.min.css!"3: "kendo-ui/styles/kendo.bootstrap.min.css!"length: 4proto: Array[0] aurelia-loader-webpack.js:87 Uncaught (in promise) TypeError: Cannot read property 'fetch' of undefined at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:87:52) at WebpackLoader._import (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:84:12) at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:140:16) at WebpackLoader.loadModule (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:138:12) at WebpackLoader.loadAllModules (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:124:23) at ViewEngine.importViewResources (webpack:///./~/aurelia-templating/dist/commonjs/aurelia-templating.js?:2650:24) at ViewEngine.loadTemplateResources (webpack:///./~/aurelia-templating/dist/commonjs/aurelia-templating.js?:2620:17) at eval (webpack:///./~/aurelia-templating/dist/commonjs/aurelia-templating.js?:2589:38) aurelia-loader-webpack.js:87 Uncaught (in promise) TypeError: Cannot read property 'fetch' of undefined(…) aurelia-loader-webpack.js:87 Uncaught (in promise) TypeError: Cannot read property 'fetch' of undefined(…)

Since my webpack configuration is the same as you just suggested, it is quite possible that I incorrectly diagnosed my problem as a webpack issue. Would you be so kind to run the app that I attached here as a zip file?

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge/issues/428#issuecomment-213619547

[adriatic]

@charlespockert - there is a good chance that my problem was different from what I used to reason that webpack "does not work" with plugins which have dependencies.

As it is getting late and my brain is failing, let's pick it up from this point: not knowing what you meant by saying

remove the exclamation marks from the end of the CSS imports

I changed my main.js to be:

import {bootstrap} from 'aurelia-bootstrapper-webpack';

// import '../node_modules/bootstrap/dist/css/bootstrap.css';
// import '../node_modules/font-awesome/css/font-awesome.css';
// import '../styles/styles.css';

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', (kendo) => kendo.kendoAutoComplete().kendoButton);

  aurelia.start().then(() => aurelia.setRoot('app', document.body));
});

as this is the only file with the pattern *,css!.

running the app (npm run dev) results with

DEBUG [aurelia] Configured plugin aurelia-kendoui-bridge.
aurelia-logging-console.js:50 DEBUG [templating] importing resources for aurelia-kendoui-bridge/autocomplete/autocomplete.html []
aurelia-logging-console.js:60 INFO [aurelia] Aurelia Started
aurelia-logging-console.js:50 DEBUG [templating] importing resources for app.html ["nav-bar.html", "bootstrap/dist/css/bootstrap.css", "kendo-ui/styles/kendo.common.min.css", "kendo-ui/styles/kendo.bootstrap.min.css"]
aurelia-logging-console.js:50 DEBUG [templating] importing resources for nav-bar.html []
css-resource.js:28 Uncaught (in promise) Error: Failed loading required CSS file: bootstrap/dist/css/bootstrap.css
    at fixupCSSUrls (webpack:///./~/aurelia-templating-resources/dist/commonjs/css-resource.js?:28:11)
    at eval (webpack:///./~/aurelia-templating-resources/dist/commonjs/css-resource.js?:63:14)fixupCSSUrls @ css-resource.js:28(anonymous function) @ css-resource.js:63
client:22 [WDS] Hot Module Replacement enabled.

which is a completely different beast :-)

Rather than playing such ping-pong, please try to run this app yourself and show me how it works. If it does, you will be a hero and I will be a fool, by making incorrect conclusion and stopping the whole webpack movement in Aurelia :-(

[ghost]

I think I had a similar problem. The way the paths work in webpack and jspm seems different. Try instead of bootstrap/css/..., to change it to '../node_modules/bootstrap/css...' I had to do that to avoid those errors. About the first one, are you including autocomplete both in webpack.config and in your main?

[lynsei]

I encountered similar

[lynsei]

I've been creating these crazy buildpacks in various configurations of kendo/aurelia/ts/webpack/jspm/etc

https://labs.stackfork.com:2003/dockistry-contributors/cho/blob/master/dockistry.example.aurelia.forking.md

Hoping to get it all figured out so I can add it as part of Dockistry Project https://github.com/forktheweb/dockistry

[lynsei]

it would be nice to have webpack with aurelia-kendo, that's for sure. but if not I found a comparable jspm solution for prodution envs.

[JeroenVinke]

@charlespockert you'd be a hero if you could help with the above issues :smile:

[charlespockert]

@JeroenVinke @adriatic well, everything appears to be working here:

Here are all the important moving parts:

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": false
  },
  "filesGlob": [
    "./src/**/*.ts",
    "./node_modules/aurelia-*/dist/aurelia-*.d.ts",
    "./typings/browser.d.ts"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "atom": {
    "rewriteTsconfig": true
  }
}

webpack.config.js

/*eslint-disable no-var*/

var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var webpack = require('webpack');

module.exports = {
    root: [
        path.resolve('./'),
        path.resolve('./third-party/kendo/js')
    ],
    resolve: {
        extensions: ['', '.js', '.ts'],
        modulesDirectories: ['node_modules', './third-party/kendo/js']
    },
    devServer: {
        host: 'localhost',
        port: 3000
    },
    entry: {
        main: [
          './src/main'
        ]
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js'
    },
    plugins: [
      new AureliaWebpackPlugin({
          includeSubModules: [
              { moduleId: 'aurelia-kendoui-bridge', include: /(grid|template)/ }
          ]
      }),
      new webpack.ProvidePlugin({
          jQuery: 'jquery',
          $: 'jquery'
      })
    ],
    module: {
        loaders: [
          { test: /\.ts$/, loader: 'ts-loader' },
          { test: /\.css?$/, loader: 'style!css' },
          { test: /\.html$/, loader: 'raw' },
          { test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
          { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff2' },
          { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
          { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
        ]
    }
};

main.ts

import {Aurelia} from 'aurelia-framework';
import {bootstrap} from 'aurelia-bootstrapper-webpack';

import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/font-awesome/css/font-awesome.css';
import '../styles/styles.css';
import '../third-party/kendo/styles/kendo.common.min.css';
import '../third-party/kendo/styles/kendo.bootstrap.min.css';

bootstrap((aurelia: Aurelia): void => {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-kendoui-bridge', (kendo) => {
            kendo.kendoGrid().kendoTemplateSupport();
        });

    aurelia.start().then(() => aurelia.setRoot('app', document.body));
});

Don't think there's anything else that needs doing - my files are in third-party folder as @martijnboland has it

The bit that didn't work immediately was loading the grid because I didn't have a resolve path for modules

This part in webpack.config.js:

    resolve: {
        extensions: ['', '.js', '.ts'],
        modulesDirectories: ['node_modules', './third-party/kendo/js'] // <---- here
    },

That allows webpack to attempt to resolve modules in directories outside of node_modules (which is the default)

The defaults are actually [node_modules', 'web_modules']`

I don't have a web_modules dir so I didn't bother with that one (I assume that's for whatever package manager sticks things in web_modules - maybe webpack itself?)

[ghost]

Yep, that' what I have in my solution.

[adriatic]

Clearly - @charlespockert and @avizcaino-newuibcn made an impact as I managed to advance my situation, but not completely. At one point, making changes like a blind chicken, I god to a point where autocomplete sample almost worked (missed its "local" .css file). As I continued to peek into differences between your code and what I have - I lost the "almost working" version and got something very weird.

Is it possible that your code works because it is typescript and mine is not?

Here is my current situation:

I updated my webpack.config.js (as it seems that some of my original definitions for additional loaders were incorrect) - so that I have this (note that I removed the typescript loader as I am not using typescript in my project.

/*eslint-disable no-var*/

var path = require('path');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var webpack = require('webpack');

module.exports = {
  devServer: {
    host: 'localhost',
    port: 4000
  },
  entry: {
    main: [
      './src/main'
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  root: [
    path.resolve('./src'),
    path.resolve('./vendors/js')
  ],
  resolve: {
    extensions: ['', '.js', '.ts'],
    modulesDirectories: ['node_modules', './vendors/js']
  },
  plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        { moduleId: 'aurelia-kendoui-bridge', include: /(autocomplete|button)/ }
      ]
    }),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery'
    })
  ],
  module: {
    loaders: [
      { test: /\.css?$/, loader: 'style!css' },
      { test: /\.html$/, loader: 'raw' },
      { test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff2' },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
    ]
  }
};

My main.js is now:

javascript import {Aurelia} from 'aurelia-framework'; import {bootstrap} from 'aurelia-bootstrapper-webpack';

import '../node_modules/bootstrap/dist/css/bootstrap.css'; import '../node_modules/font-awesome/css/font-awesome.css'; import '../styles/styles.css';

bootstrap(function(aurelia) { aurelia.use .standardConfiguration() .developmentLogging() .plugin('aurelia-kendoui-bridge', (kendo) => kendo.kendoAutoComplete().kendoButton);

aurelia.start().then(() => aurelia.setRoot('app', document.body)); });

finally `npm run dev` results with (completely puzzling)

HMR] Waiting for update signal from WDS... main.js:1 Uncaught SyntaxError: Unexpected token import(anonymous function) @ bundle.js:1042webpack_require__ @ bundle.js:556fn @ bundle.js:87(anonymous function) @ multi_main:3(anonymous function) @ bundle.js:586webpack_require__ @ bundle.js:556(anonymous function) @ bundle.js:579(anonymous function) @ bundle.js:582 client:22 [WDS] Hot Module Replacement enabled.

The error refers to : `import {Aurelia} from 'aurelia-framework';` ???

**Any clues, anyone?**

[ghost]

This seems a problem with javascript itself, try to use babel to encode your javascript code. I'll try to copy my config later.

[ghost]

This is my webpack configuration for the loaders:

module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: babelOptions.commonjs() },
      { test: /\.css?$/, loader: 'style!css' },
      { test: /\.html$/, loader: 'raw' },
      { test: /\.(png|gif|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
      { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.woff(\?[a-z0-9]+)?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9])?$/, loader: 'file-loader' },
      { test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/, loader: 'file-loader' }
    ]
  }

And babel-options.js:

var path = require('path');

exports.base = function() {
  return {
    filename: '',
    filenameRelative: '',
    sourceMap: false,
    sourceRoot: '',
    moduleIds: false,
    moduleRoot: path.resolve('src').replace(/\\/g, '/'),
    comments: false,
    compact: false,
    code:true,
    presets: [ 'es2015-loose', 'stage-1'],
    plugins: [
      'syntax-flow',
      'transform-decorators-legacy',
      'transform-flow-strip-types'
    ]
  };
};

exports.commonjs = function() {
  var options = exports.base();
  options.plugins.push('transform-es2015-modules-commonjs');
  return options;
};

I adapted this Aurelia's solution to webpack and it is working for me.

My solution is a bit different since I'm using Typescript to code, target in tsconfig equal to es6 (since I'm using async/await, it is easier to debug it in es6) and later I'm transpiling es6 code to es5 since Safari/iOS does not support es6 yet...

[adriatic]

I know of many examples where using webpack instead of jspm/systemjs works fine - my issue is to of course to be able to use webpack for our KendoUI bridge. Both you and @charlespockert are using Typescript as the development language - while our app is written in "straight" ES6; there might be some minute detail where the settings for webpack need to be different than yours (note my use of the word "might").

My primary focus is on writing Aurelia applications that might be of use to parts of Aurelia Community, so this "change something and try again" webpack experimentation is non-productive for me, despite the fact that I might an inch away from a good set of settings. So, I will wait until someone with a real understanding of Webpack defiines them

[lynsei]

I've had a similar webpack-typescript-kendo experience based on what you verify with your straight-foward es6 implementation vs how other skeletons are built. I've had widely "dependent" success using the webpack-dev-server depending largely on configuration, and not with the whole kendo suite. I'll let you know if I make more progress on this front cause perhaps I may have something to contribute

[adriatic]

if I make more progress on this front cause perhaps I may have something to contribute

That would be terrific @forktheweb - please come back with your additional experience even if you do not make a major breakthrough as we might reach the critical mass together, nevertheless.

[lynsei]

also, I dunno if this would be helpful to your testing of kendo functionality (since it can use public apis quite easily) but I'm almost finished with a developer toolkit for arc->strongloop->rethinkdb-> using aurelia-webpack-typescript among other frameworks and it helps to automate the creation of local test environments on windows. video-gif example .... I don't yet have a mac or linux version but it's in the works. I wonder what you guys are writing your current CLI with & if automation like this might be useful for aurelia/ who to talk with about that? I was considering making the whole thing a go binary using cobra/spf13.

[adriatic]

I wonder what you guys are writing your current CLI with & if automation like this might be useful for aurelia/ who to talk with about that?

It's unlikely that you meeting me is a random event as you found the best person to talk about CLI - perhaps with exception of Rob Eisenberg, Aurelia designer and project owner. However, Rob is a lot more conservative, as his role is orders of magnitude more important; he is responsible to all of us on Aurelia core team and Aurelia Community tasked by keeping the whole thing even keeled :-)

I checked your bio, became properly impressed of course, mostly by combined width and depth of your aggregated area of interest. So, I saw your thoughts on Aurelia and will continue this message with the assumption that you care to help make Aurelia a big success. If so that is the point where we meet sharing the same aspiration.

As I am about to leave town (returning early next week) I have only a few more minutes to be a little bit more specific with respect to the plans for our two teams *Aurelia-UI-Toolkits" and "Aurelia-Tools". From the first, I will mention our most advanced project - Aurelia-KendoUI bridge, which I believe you are already using. So I will also assume that you aware of the bridge catalog application as well.

It's our second project (Aurelia Tools) that is a potential for working together on a lot more modern approach to application construction and structure maintenance, tasks that are typically done by CLI type of tools.

Lastly, I work very closely with Rob Eisenberg, how is aware of all of my plans and helps with ensuring to stay on course.

[lynsei]

That's fantastic that you're the person to talk to about this then! I greatly appreciate your kind comments, and I'll go ahead and reaffirm that I definitely think Aurelia is the future for E2E & would love to become a contributor or even part of your core team in the future. I've been watching/following primarily, and since my expertise is largely focused on virtualization/portability, I've just been developing tools & strategy alongside you guys in the hopes we might connect. So in any capacity that we might talk more on the subject, feel free to contact me at /stunts at gmail dot com/ and we can do a call/ webex to discuss the CLI more in-depth. It's my firm belief that Rob & your team have assembled the best & most intuitive approach to e2e development and I'm sure I could be of help with many fullstack/ provider specific considerations.

Cheers!

[adriatic]

To ensure that we do not start with any chance for a misunderstanding of any kind: Rob is the creator of Aurelia framework which is being created by his core team of 14 developers dispersed around the world.

I noted Aurelia when it was shyly announced as a pre-alpha code and recognized its potential that same moment. Since then, I took a leave of absence from my own company and have spent all of my time leading various efforts in the first "concentric ring" around the framework, which (framework) was almost completely isolated from other development tools. I was lucky to find several finest contributors (mostly form Europe) for the "bridge" projects, that are critical to enable Aurelia application developers (KendoUI bridge has well over 3000 downloads in the couple of months since it was first released as a pre-alpha).

While Rob stays managing the framework design and development, my activities in the "outer ring" plan for a lot of expansion, starting with a visual tool for Aurelia applications configuration management in coordination with jspm author (Guy Bedford), several extensions for Visual Studio and Visual Studio Code, which should make Aurelia developers feel at home using Microsoft development tools. The CLI component enhancements which take form of a "Visual CLI" - where the command line editor is replaced by a "screen editor" and stays available for subsequent configuration management as a part of the Aurelia project is a part of these MS extensions as well as a standalone Aurelia application.

As the circle in the center and the next concentric ring have to have well defined overlap, I am working with Rob who is my friend and collaborator.

[lynsei]

Cool! that's good information to know :) ... I too work independently, ... more recently I'm fixated on becoming an advocate for OSS mutliplatform tooling (part of your outer ring, methinks), as there appears to be a universal need for such technology. [Thus the concept behind Dockistry repositories]. I think the concept of portable (docker/ npm/ git) repositories could offer a major benefit for developers to be able to quickly find the right tool for the job and to be able to compare various stack strategies/ toolkits at once without finding/forking/testing from github. In any event, I'm open to any input you might have in that regard and of course my underlying motivation is to contribute to the Aurelia open source community so if there's any area I could focus such efforts, particularly in the CLI, lmk.

Right now I've taken the skeletons you currently have and I've been applying them in docker-composed containers with various setups of tooling on different platforms in anticipation of releasing repositories for both dev/prod environments as docker-composed, rancher-ready YAML (and with a custom CLI for instant deploys).

Here are some of my notes on various configurations I've been playing with: (excuse the dust)

• various e2e setups using aurelia generators, electron, and skels
• a more refined list of current stacks with aurelia for dev & prod

Perhaps single-click deploys like this could benefit to Aurelia if we offered them for various database configurations (i.e.- Citus/Postgre, Mysql/Aurora, Rethink, Mongo, etc.) in the future as attachment dockers and/or CLI options for direct setup? And certainly offering docker images of the releases could be of some benefit as you move closer to a stable release candidate? I can easily automate the building of such stuff ... and even SSL containers with reverse proxy.

Hope that's not thinking too far out of the realm? :)

[JeroenVinke]

Got it running, continuing in https://github.com/aurelia-ui-toolkits/aurelia-kendoui-bridge/issues/567