search

aurelia / bootstrapper-webpack

A custom bootstrapper for using Webpack with Aurelia
MIT License
8 stars 6 forks source link

TypeError: customConfig.configure is not a function #2

Closed Zensavona closed 8 years ago

Zensavona commented 8 years ago

Hi guys,

I've come across an issue while using this bootstrapper, here's the error I'm getting in the browser console while running with npm run dev:

TypeError: customConfig.configure is not a function
    at eval (webpack:///./~/aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js?:60:27)

I did a bit of digging and found that on line 58-60 of aurelia-bootstrapper-webpack/dist/commonjs/aurelia-bootstrapper-webpack.js exists the following code. I did a bit of console.logging and I've added some comments indicating the values being passed into here which produce this error.

  // configModuleId === 'main'
  return loader.loadModule(configModuleId).then(function (customConfig) {
      // customConfig === {}
      return customConfig.configure(aurelia);
    });

Why this is happening, I'm not exactly sure, but my main.js looks like this:

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

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

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation')
    .plugin('aurelia-dialog')
    .plugin('aurelia-flux')
    .feature('resources');

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

I can strip it back to the following and still reproduce the error:

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

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

bootstrap(function(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

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

Any ideas?

Vheissu commented 8 years ago

I am experiencing the same issue as you. I am using the enhance feature and thought this was the reason. Evidently not. The fix I found was to add in a simple check to see if the configure method exists. When I put a breakpoint in, I can see it is trying to call configure on an empty object {}

Vheissu commented 8 years ago

Try this PR: https://github.com/aurelia/bootstrapper-webpack/pull/4 - it fixes the issue for me.

Vheissu commented 8 years ago

@Zensavona After speaking with @EisenbergEffect this appears to be a misunderstanding of the difference between Webpack and the standard Skeleton. If you use Webpack, you don't need an aurelia-app="main" attribute as you specify the main entry point inside of your Webpack configuration. After removing the aurelia-app attribute, the issue went away.

Vheissu commented 8 years ago

@EisenbergEffect This can be closed.

veikkoeeva commented 8 years ago

It looks like the WebPack skeletons at https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-webpack/index.html have <body aurelia-app="main"> defined. It looks like I'm running to this problem in my little demo at https://github.com/veikkoeeva/AureliaDemo/tree/master/src/AureliaDemo.FrontEnd and I'm a tad loss what would be the right configuration.

niieani commented 8 years ago

@veikkoeeva Yeah, the new skeletons don't need you to use the bootstrapper manually, it works with the aurelia-app just as the JSPM skeletons.

Sigfried commented 8 years ago

I have no idea what I'm doing (first attempt using aurelia), but I'm getting this same error message. I'm trying to use https://github.com/code-chris/aurelia-knockout with a new aurelia-cli project. The instructions with aurelia-knockout are not clear to me, but this is what I'm trying:

I cp -r .../aurelia-knockout/dist/es2015 into .../src/aurelia-knockout in my new app. Then (with au run --watch) I get Error: ENOENT: no such file or directory, open .../src/knockout.js. So then I put a copy of knockout.min.js in .../src, and then au run doesn't complain anymore, but the browser console gives me the vendor-bundle.js:3394 TypeError: customConfig.configure is not a function error.

I can log this as an issue with aurelia-knockout, but I ended up here first from googling the error message.

EisenbergEffect commented 8 years ago

I would definitely ask a question on the aurelia-knockout plugin Github. I'm not sure how they put that plugin together. How they did that would probably affect your app's configuration. I can tell you that knockout shouldn't go in the src folder. Instead, put in in scripts or use npm to install it. In your CLI app's aurelia.json file you will need to add it as a dependency so you can map the name knockout to the knockout.min.js file.

digitalheir commented 7 years ago

I don't understand why this issue is closed?

skeleton-esnext-webpack still gives this error out of the box and provides a poor onboarding experience for Aurelia + webpack. The one with Gulp does work.

EisenbergEffect commented 7 years ago

@niieani Can you comment on this? Is this a breaking change in Weback's code again?

digitalheir commented 7 years ago

Oops, I'm in the wrong repo. My issue was with the navigation skeleton release at https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.1 . I think this is the one. Excuse me.

niieani commented 7 years ago

@EisenbergEffect yeah, it's breaking change in Webpack, basically we need to lock the webpack-dev-server too (we only locked 'webpack' before). We discussed it with @Vheissu already.

EisenbergEffect commented 7 years ago

Is that in a PR?

niieani commented 7 years ago

I'll adjust the PR to use locked webpack versions so we don't get these sort of problems in the future. But I'm working on a fix for old skeletons now.

EisenbergEffect commented 7 years ago

Cool. Thanks!

niieani commented 7 years ago

Fixes pushed to master https://github.com/aurelia/skeleton-navigation/commit/cb30c757f22e359519968410f2fdac1cc7386ce7.