Problem with manual bootstrapping

Help Requests
1

Hi everyone!

I’m trying to create a webpack application, which uses manual bootstrapping of aurelia. So I followed these instructions:
https://aurelia.io/docs/fundamentals/app-configuration-and-startup#manual-bootstrapping
(especially the part with “Manual Bootstrapping with Webpack”)

But it doesn’t work, there is only following error message at “npm start”:

> skeleton-esnext-webpack@1.0.0 start /<path>/aurelia-manual-bootstrapping-skeleton
> nps

nps is executing `default` : nps webpack
nps is executing `webpack` : nps webpack.server
nps is executing `webpack.server` : webpack-dev-server -d --inline --env.server
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from /<path>/aurelia-manual-bootstrapping-skeleton/dist
404s will fallback to /index.html
Hash: a6bc7bf2a21102dd1295
Version: webpack 3.3.0
Time: 3033ms
                                 Asset       Size  Chunks                    Chunk Names
  674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2    77.2 kB          [emitted]
 fee66e712a8a08eef5805a46892932ad.woff      98 kB          [emitted]
  b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]
  912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  [big]
    app.a6bc7bf2a21102dd1295.bundle.js    2.93 MB       0  [emitted]  [big]  app
 vendor.a6bc7bf2a21102dd1295.bundle.js     2.7 MB       1  [emitted]  [big]  vendor
                            index.html  730 bytes          [emitted]
                           favicon.ico    2.25 kB          [emitted]
   [2] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
  [24] ./node_modules/bluebird/js/browser/bluebird.js 64 bytes {0} {1} [built]
 [109] ./node_modules/aurelia-metadata/dist/native-modules/aurelia-metadata.js 6.94 kB {0} [built]
 [110] (webpack)-dev-server/client?http://localhost:8080 5.59 kB {0} {1} [built]
 [117] ./node_modules/strip-ansi/index.js 161 bytes {0} {1} [built]
 [119] (webpack)-dev-server/client/socket.js 856 bytes {0} {1} [built]
 [181] ./node_modules/aurelia-polyfills/dist/native-modules/aurelia-polyfills.js 24.8 kB {0} [built]
 [183] ./node_modules/jquery/dist/jquery.js 190 bytes {1} [built]
 [184] multi aurelia-webpack-plugin/dist/aurelia-entry aurelia-polyfills aurelia-loader-webpack (webpack)-dev-server/client?http://localhost:8080 src/main 76 bytes {0} [built]
 [185] ./node_modules/aurelia-webpack-plugin/dist/aurelia-entry.js 585 bytes {0} [built]
 [300] ./node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js 14.8 kB {0} [built]
 [301] (webpack)/buildin/harmony-module.js 596 bytes {0} [built]
 [302] multi (webpack)-dev-server/client?http://localhost:8080 bluebird jquery bootstrap 64 bytes {1} [built]
 [303] ./node_modules/expose-loader?jQuery!./node_modules/jquery/dist/jquery.js 61 bytes {1} [built]
 [305] ./node_modules/bootstrap/dist/js/bootstrap.js 122 kB {1} [built]
    + 293 hidden modules

ERROR in multi aurelia-webpack-plugin/dist/aurelia-entry aurelia-polyfills aurelia-loader-webpack (webpack)-dev-server/client?http://localhost:8080 src/main
Module not found: Error: Can't resolve 'src/main' in '/<path>/aurelia-manual-bootstrapping-skeleton'
 @ multi aurelia-webpack-plugin/dist/aurelia-entry aurelia-polyfills aurelia-loader-webpack (webpack)-dev-server/client?http://localhost:8080 src/main

ERROR in ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js
Module not found: Error: Can't resolve 'aurelia-loader-context' in '/<path>/aurelia-manual-bootstrapping-skeleton/node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules'
 @ ./node_modules/aurelia-bootstrapper-webpack/node_modules/aurelia-loader-webpack/dist/native-modules/aurelia-loader-webpack.js 134:23-64
 @ ./node_modules/aurelia-bootstrapper-webpack/dist/native-modules/aurelia-bootstrapper-webpack.js
 @ ./src/main.js
 @ ./node_modules/aurelia-webpack-plugin/dist/aurelia-entry.js
 @ multi aurelia-webpack-plugin/dist/aurelia-entry aurelia-polyfills aurelia-loader-webpack (webpack)-dev-server/client?http://localhost:8080 src/main
Child html-webpack-plugin for "index.html":
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./index.ejs 1.23 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Failed to compile.

Something about missing aurelia-loader-context. I cannot find such a package?!

To reproduce the problem, here is a complete repo, based on the latest aurelia-skeleton from github (webpack with esnext):

What I’ve changed:

  • Installed aurelia-bootstrapper-weback via npm install

  • webpack.config.js: app: ['src/main'],

  • src/main.js:

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

bootstrap(async aurelia => {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  await aurelia.start();
  aurelia.setRoot('app', document.body);
});

So what am I doing wrong?

Thx and best regards, Uwe

2

I think I’ve found the problem(s):

  • import {bootstrap} from 'aurelia-bootstrapper'; in main.js instead of import {bootstrap} from 'aurelia-bootstrapper-webpack'; (without -webpack)
  • in main.js, aurelia.setRoot(PLATFORM.moduleName('app'), document.body); (with PLATFORM.moduleName(…))
  • webpack.config.js: app: ['./src/main'], (with ./ … my mistake)
  • in main.js there is still a configure() method needed

There is a new branch fixed to show differences.

Perhaps the first two points can be transferred into the official documentation (https://aurelia.io/docs/fundamentals/app-configuration-and-startup#manual-bootstrapping)

Regards, Uwe

3 Likes