Aurelia: Unable to find module with ID: my-app

Question

We are in the process of updating webpack to use version 4 (currently using 3.8.1), but we are stuck with this error:

Unable to find module with ID: my-app

This is the bootstrapping file:

bootstrap(async (aurelia: Aurelia) => {
  aurelia.use
      .standardConfiguration()
      .plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
        config.useDefaults();
        config.settings.startingZIndex = 2000;
      })
      .plugin(PLATFORM.moduleName('aurelia-validation'), config => {
        config.customValidator(AjvValidator);
      });

  if (debugMode) {
    aurelia.use.developmentLogging();
  }

  await aurelia.start();
  await aurelia.setRoot(PLATFORM.moduleName('my-app'), document.getElementById('root'));
});

The directory structure is

src -|
     |- ...directories (views, repositories, etc)
     |- bootstrap.ts
     |- my-app.html
     |- my-app.ts

If I try to make my-app a directory (with index.ts and index.html files), then error changes a bit:

Unable to find module with ID: my-app.html

I tried using getViewStrategy to point to the index.html but that did not work.

If in the bootstrap code, I change to PLATFORM.moduleName('my-app/index'), then the error becomes:

Unable to find module with ID: my-app/index

What would be the correct setup in that case?

Additional information:

• we are using aurelia-webpack-plugin@3.0.0 (latest version on NPM)
• this is the start command: webpack-dev-server --config webpack.dev.config.js, error also happens in build command

this is the base webpack config:

module.exports = (options) => ({
  context: path.resolve(__dirname, 'src'),
  mode: options.mode,
  entry: [
    'regenerator-runtime/runtime',
    'reflect-metadata',
    'babel-polyfill',
    'event-source-polyfill',
    `./scss/main-${options.product}.scss`,
    `./bootstrap-${options.product}.ts`
  ],
  output: Object.assign({
    sourceMapFilename: '[file].map'
  }, options.output),
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.tsx?$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => {
                return [
                  require('autoprefixer')({
                    browsers: ['> 5%', 'last 2 versions']
                  })
                ];
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'ts-loader']
      },
      {
        test: /\.html$/,
        use: options.product === PRODUCTS.styleguide.name ? ['raw-loader', 'highlightjs-loader'] : ['raw-loader']
      },
      {
        test: /\.(svg|png|ico)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {
              hash: 'sha512',
              digest: 'hex',
              name: options.imageNamePattern
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
              optipng: {
                optimizationLevel: 7
              },
              gifsicle: {
                interlaced: false
              },
              mozjpeg: {
                bypassOnDebug: true
              }
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  plugins: options.plugins.concat([
    new AureliaPlugin({aureliaApp: undefined}/* {aureliaApp: undefined, includeAll: 'src'} */),
    // To strip all locales except “en”
    new MomentLocalesPlugin(),
    new webpack.IgnorePlugin(/regenerator|nodent|js-beautify/, /ajv/),
    new webpack.ProvidePlugin({
      // make fetch available
      fetch: 'exports-loader?self.fetch!whatwg-fetch'
    }),
    // Always expose NODE_ENV to webpack, in order to use `process.env.NODE_ENV`
    // inside your code for any environment checks; UglifyJS will automatically
    // drop any unreachable code.
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]),
  resolve: {
    alias: {
      ajv: path.join(__dirname, 'node_modules', 'ajv', 'dist', 'ajv.bundle.js'),
      pikaday: path.join(__dirname, 'node_modules', 'pikaday', 'pikaday.js'),
      'moment-timezone': path.join(
        __dirname,
        'node_modules',
        'moment-timezone',
        'builds',
        'moment-timezone-with-data.js'
      ),
      'raven-js': path.join(
        __dirname,
        'node_modules',
        'raven-js',
        'dist',
        'raven.js'
      )
    },
    extensions: ['.ts', '.js', '.scss', '.html'],
    modules: [srcDir, 'node_modules']
  },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window
  performance: options.performance || {},
  optimization: {
    namedModules: true,
    splitChunks: {
      name: 'vendor',
      minChunks: 2
    }
  }
})

Answer 1

I had the same problem. For me it was because I installed the plugin locally, with npm install /path. After publishing the plugin, I was able to use it normally, as described in the documentation.

Answer 2

It feels like you are aliasing/configuring root/baseUrl in a way that webpack unable to resolve my-app? Can you look around to see if there is such config?