Loading a custom feature fails

[bsrdjan]

I have aurelia feature residing in a folder at the same level as /src and try to load it using webpack but no luck yet. Here the configuration and the console error

Folder Structure

\src
\framework\index.js
index.html
main.js

framework/index.js

export function configure(aurelia) {
  aurelia.globalResources('./inputs/ui-button');
}

main.js

/*eslint-disable no-var,no-unused-vars*/
var Promise = require('bluebird'); // Promise polyfill for IE11
Promise.config({
  warnings: true,
  longStackTraces: true,
  cancellation: false,
  monitoring: false
});

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

import 'bootstrap-webpack';
import 'font-awesome-webpack';
import './styles/styles.css';

bootstrap(function (aurelia) {
  aurelia.use
      .standardConfiguration()
      .developmentLogging()
      //.feature('framework')
      .plugin('aurelia-validatejs')
      .plugin('aurelia-dialog', config => {
        config.useDefaults();
        config.settings.lock = true;
        config.settings.centerHorizontalOnly = false;
        config.settings.startingZIndex = 5;
      });

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

webpack.config.js

/*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,
    historyApiFallback: {
      index: '/'
    }
  },
  entry: {
    main: [
      './main'
    ]
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  plugins: [
    new AureliaWebpackPlugin({
      includeSubModules: [
        {moduleId: 'framework' },
        {moduleId: 'aurelia-dialog'},
        {moduleId: 'aurelia-validatejs'},
      ],
      contextMap: {
        'framework': 'framework/index.js'
      }
    }),
    new ProvidePlugin({
      Promise: 'bluebird',
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery' // this doesn't expose jQuery property for window, but expose it to every module
    })
  ],
  resolve: {
    //root: [path.resolve('./framework'), path.resolve('./src')],
    root: path.resolve('./'),
    alias: {
      "framework": "../framework"
    }
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules|local_packages/,
        query: {presets: ['es2015-loose', 'stage-1'], plugins: ['transform-decorators-legacy']}
      },
      {test: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'raw'},
      {test: /\.css$/, exclude: /aurelia-dialog\/dist\/commonjs\/dialog\.css/, loader: 'style!css'},
      {test: /\.less$/, loader: "style!css!less"},
      {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&mimetype=application/font-woff2'},
      {test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file'}
    ]
  }
};

The framework is bundled:

  [309] ./framework/index.js 153 bytes {1} [built]
  [310] ./framework/inputs/ui-button.js 4.44 kB {1} [built]
  [311] ./framework/inputs/ui-button.html 532 bytes {1} [built]

and the console error occurs:

Unhandled rejection Error: Cannot find module './framework/index'.
    at eval (webpack:///./src_^\.\/.*$?:173:41)
    at webpackContextResolve (webpack:///./src_^\.\/.*$?:173:89)
    at webpackContext (webpack:///./src_^\.\/.*$?:170:29)
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:104:50)
    at http://localhost:3000/bundle.js:136:24
    at Function.requireEnsure [as e] (http://localhost:3000/bundle.js:597:29)
    at Function.ensure [as e] (http://localhost:3000/bundle.js:134:33)
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:103:31)
    at WebpackLoader._import (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:98:12)
    at eval (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:154:16)
From previous event:
    at WebpackLoader.loadModule (webpack:///./~/aurelia-loader-webpack/dist/commonjs/aurelia-loader-webpack.js?:152:12)
    at _loadPlugin (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:279:19)
    at eval (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:272:14)
From previous event:
    at loadPlugin (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:271:73)
    at next (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:528:18)
From previous event:
    at next (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:528:54)
    at eval (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:535:14)
From previous event:
    at FrameworkConfiguration.apply (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:521:42)
    at Aurelia.start (webpack:///./~/aurelia-framework/dist/commonjs/aurelia-framework.js?:150:21)
    at eval (webpack:///./main.js?:28:11)
    at eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:96:12)
    at Array.eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:25:19)
    at eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:86:27)
From previous event:
    at eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:78:44)
From previous event:
    at run (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:73:24)
    at Object.eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:100:1)
    at eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:101:30)
    at Object.<anonymous> (http://localhost:3000/bundle.js:1180:2)
    at __webpack_require__ (http://localhost:3000/bundle.js:583:30)
    at fn (http://localhost:3000/bundle.js:107:20)
    at eval (webpack:///./main.js?:3:35)
    at Object.<anonymous> (http://localhost:3000/bundle.js:1174:2)
    at __webpack_require__ (http://localhost:3000/bundle.js:583:30)
    at fn (http://localhost:3000/bundle.js:107:20)
    at eval (webpack:///multi_main?:3:18)
    at Object.<anonymous> (http://localhost:3000/bundle.js:636:2)
    at __webpack_require__ (http://localhost:3000/bundle.js:583:30)
    at http://localhost:3000/bundle.js:629:37
    at http://localhost:3000/bundle.js:632:10

[bsrdjan]

If I replace the .feature('framework') with .plugin('framework'), in the main.js, it works :)

[niieani]

@bsrdjan so can I close this?

[bsrdjan]

Yes, of course.

[indfnzo]

I'm not much into the Aurelia source, but isn't it an anti-pattern to be using .plugin on webpack and .feature for every other platform supported by Aurelia? What exactly is the difference when you use .plugin vs. .feature?

Side note: can we have some sort of glossary about what exactly terms like "feature", "plugin", "component", "element", etc mean and how each should be used?

[jods4]

@jemhuntr This is an old issue with the 1.x version of the webpack plugin. 2.x is a big rewrite and this doesn't apply.

plugin and feature are similar but have slightly different use cases. Aurelia hub talks about them starting here. I'm quoting:

The main difference is that a "feature" is provided internally by your application, while a plugin is installed from a 3rd party source through your package manager.

Both work with the new webpack plugin:

.plugin(PLATFORM.moduleName('best-datagrid-ever'));
.feature(PLATFORM.moduleName('my-controls/index'));

One important thing to notice is that .feature API design was not working well with webpack, so it was modified in Aurelia 1.1.0 to accept an explicit /index that was implicit before. This is mandatory when working with webpack, as pointed out in the wiki. BTW if you work with webpack and Aurelia the wiki is a good read.

All of this (plugin, feature with /index, PLATFORM.moduleName) works equally whether you use webpack or another build system.

[indfnzo]

Great, thanks!

I didn't know the bit about the /index being explicitly required on Webpack.

And thanks for pointing me out to the wiki :) I though the Aurelia hub was the only source of documentation in Aurelia.