!bind and !module procude errors

[christophmayrhofer]

I am unable to use css modules in my repo: https://github.com/christophmayrhofer/cloudcam-client

When I add only !module or !bind to my css require I get the following error:

TypeError: Cannot read property 'fetch' of undefined at Promise.then._this2.modulesBeingLoaded.(anonymous function) (http://localhost:8080/scripts/aurelia.bundle.js:27001:60) at WebpackLoader._import (http://localhost:8080/scripts/aurelia.bundle.js:26998:18) at WebpackLoader.loadModule (http://localhost:8080/scripts/aurelia.bundle.js:27056:17) at WebpackLoader.loadAllModules (http://localhost:8080/scripts/aurelia.bundle.js:27043:23) at ViewEngine.importViewResources (http://localhost:8080/scripts/aurelia.bundle.js:4062:24) at ViewEngine.loadTemplateResources (http://localhost:8080/scripts/aurelia.bundle.js:4032:17) at http://localhost:8080/scripts/aurelia.bundle.js:3980:39

When I add !module!bind I get Cannot find module './bind'

And for !bind!module I get Cannot find module './module'

Here is my aurelia initializer:

export async function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-binding-loader')
    .plugin('aurelia-css-modules-loader');

  await aurelia.start();
  aurelia.setRoot('app');
}

and the webpack.config.js

const webpack = require('webpack');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const JavaScriptObfuscator = require('webpack-obfuscator');
const AureliaWebpackPlugin = require('aurelia-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const isProductionBuild = process.argv.indexOf('-p') !== -1;

const plugins = [
  new ProgressBarPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.optimize.CommonsChunkPlugin({ name: ['aurelia'] }),
  new AureliaWebpackPlugin(),
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html',
  }),
];

if (isProductionBuild) {
  const obfuscator = new JavaScriptObfuscator({
    compact: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 0.75,
    debugProtection: true,
    debugProtectionInterval: true,
    disableConsoleOutput: true,
    reservedNames: [],
    rotateStringArray: true,
    seed: 0,
    selfDefending: true,
    sourceMap: true,
    sourceMapBaseUrl: '',
    sourceMapFileName: '',
    sourceMapMode: 'separate',
    stringArray: true,
    stringArrayEncoding: true,
    stringArrayThreshold: 0.8,
    unicodeEscapeSequence: true,
  });

  plugins.push(new webpack.optimize.UglifyJsPlugin());
  plugins.push(obfuscator);
}

module.exports = {
  entry: {
    app: ['./src/index'],
    aurelia: [
      'aurelia-bootstrapper-webpack',
      'aurelia-polyfills',
      'aurelia-pal',
      'aurelia-pal-browser',
      'aurelia-binding',
      'aurelia-dependency-injection',
      'aurelia-event-aggregator',
      'aurelia-framework',
      'aurelia-history',
      'aurelia-history-browser',
      'aurelia-hot-module-reload',
      '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-router',
      'aurelia-templating-resources',
    ],
  },
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'scripts/[name].bundle.js',
    sourceMapFilename: 'scripts/[name].bundle.js.map',
  },
  module: {
    rules: [
      {
        test: /\.p?css$/,
        include: /src/,
        use: [
          'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader',
        ],
      },
      {
        test: /\.jsx?$/,
        include: /src/,
        use: [
          'babel-loader',
          'eslint-loader',
        ],
      },
      {
        test: /\.html$/,
        include: /src/,
        exclude: [path.join(__dirname, 'index.html')],
        use: 'html-loader',
      },
    ],
  },
  plugins,
  devServer: {
    port: 8080,
    contentBase: path.join(__dirname, 'build'),
    hot: false,
    inline: true,
  },
};

[bryanrsmith]

This plugin was renamed some time back, and it looks like your project is trying to load the plugin using both names... Could you first remove .plugin('aurelia-css-modules-loader'); from your config, and make sure you've got aurelia-binding-loader installed with your package manager, and not aurelia-css-modules-loader?

[bryanrsmith]

Let me know if there's something else I can answer.