Aurelia-dialog 2.0.0-rc.5 error


#1

I updated aurelia packages and now i get an error in aurelia-dialog. Any ideas?

ERROR in ./node_modules/aurelia-dialog/dist/native-modules/dialog-configuration.js 7:38
Module parse failed: Unexpected token (7:38)
You may need an appropriate loader to handle this file type.
| var defaultRenderer = DialogRenderer;
| var resources = {
>     'ux-dialog': function () { return import('./resources/ux-dialog').then(function (m) { return m.UxDialog; }); },
|     'ux-dialog-header': function () { return import('./resources/ux-dialog-header').then(function (m) { return m.UxDialogHeader; }); },
|     'ux-dialog-body': function () { return import('./resources/ux-dialog-body').then(function (m) { return m.UxDialogBody; }); },
 @ ./node_modules/aurelia-dialog/dist/native-modules/aurelia-dialog.js 1:0-61 4:21-40 14:0-39 14:0-39
 @ ./src/main.ts
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

#2

This version is exactly the same with version 2.0.0-rc.3, as you can see from this https://github.com/aurelia/dialog/blob/aca7b41687a57d432c5b9114cf65519e20b8404a/dist/native-modules/dialog-configuration.js

So if you are having an error, I assume you are using an earlier version? May I know what version did you upgrade from?


#3

For your error, it appears you are using webpack, so I’m not sure why it’s unable to trace those dependencies. Are you using TypeScript or JavaScript? Can you try add those lines in your webpack plugins config:

new ModuleDependenciesPlugin({
  'aurelia-dialog': [
    './resources/ux-dialog',
    './resources/ux-dialog-body',
    './resources/ux-dialog-header',
    './resources/ux-dialog-footer',
    './resources/attach-focus',
  ]
})

#4

Adding that didn’t work. Rolling back to 1.1.0 does fix it though. Something with the 2.x version and webpack.

thanks


#5

It seems there is an issue with webpack 4.29 (latest version, what i guess you were using) https://github.com/webpack/webpack/issues/8656

So can you help try the above suggestion with webpack version 4.28 let post the result here?
Thanks!


#6

Hi, I had the same issue as @pwelter34, and pinning down webpack with "webpack": "~4.28.0" in my package.json helped. Until the issue is fixed in 4.29.x, this will do. Thanks for the help! BTW, I am using the latest aurelia-dialog 2.0.0-rc.5 (as of this writing)


#7

Awesome, thanks for confirming. It worked for me as well


#8

@StrahilKazlachev may I understand why we are using explicitly esm import() here? Instead of using aurelia-loader loadModule() which normalizes those things?

const resources: { [key: string]: () => Promise<any> } = {
  'ux-dialog': () => import('./resources/ux-dialog').then(m => m.UxDialog),
  'ux-dialog-header': () => import('./resources/ux-dialog-header').then(m => m.UxDialogHeader),
  'ux-dialog-body': () => import('./resources/ux-dialog-body').then(m => m.UxDialogBody),
  'ux-dialog-footer': () => import('./resources/ux-dialog-footer').then(m => m.UxDialogFooter),
  'attach-focus': () => import('./resources/attach-focus').then(m => m.AttachFocus)
};

#9

I think doing that would require configuration, while employing native import API would allow us to cope better with bundlers, which is general direction it has been


#10

aurelia-dialog is in an Aurelia app which has bootstrapped correct loader-default/loader-webpack. I thought there is nothing needed for aurelia-dialog to use loadModule() ?


#11

When using Webpacm, string passed to loadModule will not be naturally understood as a dependency, but import(). Thats why its working atm. For requirejs, it would work as is because of its module preservation nature, so it will be able to figure out what to load from an almost random module loading call like loadModule


#12

All the efforts of module loading were just to avoid PLATFORM.moduleName in globalResources call ? :slight_smile:


#13

The way we load those resources is a bit different:

  config.useDefaultResources()

Completely have no idea what those private modules are to do .moduleName :laughing:


#14

@huochunpeng aurelia-dialog provides some default resources - heading, body, footer, etc. It also has a config API whether to “include” them or not. For versions 1.x, including beta and rc ones, that just meant not to register those as global resources. When not used, excluding them from bundles was not straightforward IMHO. My intention of using import() was to make them properly optional, without using some custom solutions. Here is the PR and the feedback it got before merging, hence 2.x being rc.


#15

Thank you for your suggestion! It worked to me!