Aurelia-dialog 2.0.0-rc.5 error

Help Requests
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
1 Like
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

1 Like
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)

1 Like
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)
};
1 Like
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() ?

1 Like
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:

1 Like
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.

2 Likes
15

Thank you for your suggestion! It worked to me!

1 Like
16

I am using Typescript and Aurelia-Dialog 2.0.0-rc.5 and webpack 4.30. and was getting the error that started this thread

changing to “webpack”: “~4.28.0” in my package.json

and doing an npm install – solved it

thanks!

17

I downgraded webpack to 4.28.4 to fix this.

However later my multiple entry points caused runtime error " Uncaught TypeError: Cannot read property ‘call’ of undefined"
To fix this I had to update webpack above 4.30.0 as per discussed in https://github.com/webpack/webpack/issues/8996.

As I was forced to upgrade webpack I had to fix the acorn references using dedupe - one of the alternate fixes listed here https://github.com/webpack/webpack/issues/8656#issuecomment-456713191

1 Like
18

Ugh, thanks for the info. It’s a bit messy now.

19

@pwelter34

  • remove your node_modules folder
  • delete package-lock.json
  • use webpack 4.28.0
1 Like
20

Just updated to the latest bits (“aurelia-dialog”: “^2.0.0-rc.6”,“aurelia-cli”: “^1.0.0”,) and this fix no longer works. Any ideas on how to move past the following error:

ERROR in ./node_modules/aurelia-dialog/dist/native-modules/aurelia-dialog.js 19:29
Module parse failed: Unexpected token (19:29)
You may need an appropriate loader to handle this file type.
| 
| var RENDERRERS = {
>     ux: function () { return import('./ux-dialog-renderer.js').then(function (m) { return m.DialogRenderer; }); },
|     native: function () { return import('./native-dialog-renderer.js').then(function (m) { return m.NativeDialogRenderer; }); }
| };
 @ ./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

image
image.png1502×196 7.48 KB

1 Like