[SOLVED] Aurelia-notify in webpack production

Help Requests
1

This might be a bug or some missing config but I’m trying to include aurelia-notify and am providing a custom viewModel via config like this

import { Toast } from 'resources/elements/toast/toast';

export const notifyConfig = (settings: any) => {
  settings.timeout = 5000;
  settings.viewModel = Toast;
  settings.containerSelector = '#notifications';
};

It works fine in development but in production it fails to find the viewModel which make me thing I need to do some additional webpack config I’m missing.

2

where do the settings go?
looks like unused variable.
might get dropped from face of the earth.
I bet if you add

return settings

it’ll work out fine

3

Here’s an abbreviated version of main, where is gets included

import { notifyConfig } from 'app/config/notify-config';
import { Aurelia } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';

export async function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-notify'), notifyConfig);

I don’t think that part is the problem, that’s how I use it in a non-webpack build.

4

I see that in docs yeah…
well whatever uglify does to that is reasonable… you have a function with sideeffects…
concealed state modification

from the module point of view it does nothing so it is optimized away (-:

I’d look at ways to prevent that outside of scope of aurelia

Actually uglify does not remove this

function notifyConfig  (settings)  {
  settings.timeout = 5000;
  settings.viewModel = Toast;
  settings.containerSelector = '#notifications';
};

got transformed into

function notifyConfig(settings){settings.timeout=5e3;settings.viewModel=Toast;settings.containerSelector="#notifications"}

What does the minification for you?
can you search for your function in produced output?

5

Pass… just a standard Webpack 4 CLI build, I haven’t dug into how it does it. I’ll try including it directly rather than via a separate file to rule that out.

6

Yeah like plugin docs say… with inline anonymous function

7

Yep, I prefer to have my config separate, but it if it doesn’t work then I’ll have to inline it :slight_smile:

It is included which leads me back to the path…

u=function(e){e.timeout=5e3,e.viewModel=s,e.containerSelector="#notifications"}
8

what if you change how you call it to ?

.plugin(PLATFORM.moduleName('aurelia-notify'), (e)=>notifyConfig(e));
9

Worth a try, inlining it didn’t help, seems it isn’t including the view model.

Although I can find it in the minified bundle, so maybe more accurately it’s not locating it.

Edit: No joy either :confused:

10

Got it finally… the viewModel clearly needs more moduleName magic. I really hope this PR stops this BS.

import { PLATFORM } from 'aurelia-pal';

export const notifyConfig = (settings: any) => {
  settings.timeout = 5000;
  settings.viewModel = PLATFORM.moduleName('resources/elements/toast/toast');
  settings.containerSelector = '#notifications';
};
1 Like
11

Man… who knew that toast is a custom element…
of course it needs moduleName