search

aurelia / ux

A user experience framework with higher-level capabilities, designed to bring simplicity and elegance to building cross-device, rich experiences.
MIT License
368 stars 55 forks source link

ui-form: strange build issue #247

Closed qraynaud closed 4 years ago

qraynaud commented 4 years ago

I'm submitting a bug report

Please tell us about your environment:

Current behavior:

Using the latest base project generated by aurelia-cli (with small twinkering in the webapp config, mainly to change a little how style files are loaded), when I'm building my app, it's working great if I'm in dev env (using npm run build:dev).

But if I build it in production environment (using npm run build) and serve it directly (http-server dist), I get the following error in my console: Error: Unable to find module with ID: @aurelia-ux/form.html (I noticed immediately that it seems to miss a form/ folder in the module name).

I activated the debug log in production to get more details and here is what I see:

DEBUG [aurelia] Loading plugin aurelia-templating-binding. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin aurelia-templating-binding. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin aurelia-templating-resources. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin aurelia-templating-resources. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin aurelia-event-aggregator. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin aurelia-event-aggregator. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin aurelia-history-browser. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin aurelia-history-browser. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin aurelia-templating-router. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin aurelia-templating-router. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/button. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/button. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/card. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/card. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/checkbox. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/checkbox. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/core. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/core. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/form. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/form. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/input. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/input. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/list. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/list. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/icons. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/icons. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/grid. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/grid. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/select. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/select. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin @aurelia-ux/textarea. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin @aurelia-ux/textarea. aurelia-logging-console.js:15:31
DEBUG [aurelia] Loading plugin resources/index. aurelia-logging-console.js:15:31
DEBUG [aurelia] Configured plugin resources/index. aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/button/ux-button.html 
Array [ "@aurelia-ux/core/effects/paper-ripple.css", "@aurelia-ux/button/ux-button.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/card/ux-card.html 
Array [ "@aurelia-ux/card/ux-card.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/card/ux-card-header.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/card/ux-card-action-row.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/card/ux-card-content.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/card/ux-card-footer.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/card/ux-card-separator.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/checkbox/ux-checkbox.html 
Array [ "@aurelia-ux/core/effects/paper-ripple.css", "@aurelia-ux/checkbox/ux-checkbox.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/form/ux-form.html 
Array [ "@aurelia-ux/form/ux-form.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/form/ux-field.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/input/ux-input.html 
Array [ "@aurelia-ux/input/ux-input.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/list/ux-list.html 
Array [ "@aurelia-ux/list/ux-list.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/list/ux-list-item.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/icons/ux-icon.html 
Array [ "@aurelia-ux/icons/ux-icon.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/grid/ux-grid.html 
Array [ "@aurelia-ux/grid/ux-grid.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/grid/ux-grid-cell.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/select/ux-select.html 
Array [ "@aurelia-ux/core/effects/paper-ripple.css", "@aurelia-ux/select/ux-select.css" ]
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/select/ux-optgroup.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/select/ux-option.html 
Array []
aurelia-logging-console.js:15:31
DEBUG [templating] importing resources for @aurelia-ux/textarea/ux-textarea.html 
Array [ "@aurelia-ux/textarea/ux-textarea.css" ]
aurelia-logging-console.js:15:31
onmozfullscreenchange est obsolète. aurelia-metadata.js:65:24
onmozfullscreenerror est obsolète. aurelia-metadata.js:65:24
Error: Unable to find module with ID: @aurelia-ux/form.html aurelia-loader-webpack.js:197:34

I don't find the debug helping there. We don't know why this module was required. Even more disturbing is the fact that @aurelia-ux/form/ux-form.html seems to have been loaded properly before the bug happens.

Expected/desired behavior:

The app should work the same way whatever env we use for building it.

My app is currently open source, so if you want to check it out, here it is: https://heptapod.lsystems.fr/qraynaud/recipe-calculator

ben-girardet commented 4 years ago

Thanks @qraynaud for opening this issue. This is strange as you said.

I took a moment to find out more about this problem and could reproduce it with a clean install from aurelia-cli@1.3.0. Digging in the webpack.config.js file I found that it comes from the following line: 

devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',

You can replace by

devtool: 'cheap-module-eval-source-map',

To make it build successful but at the moment I don't know more than that. Will probably need help from someone who know more about building. Maybe @bigopon could point us in the right direction...

bigopon commented 4 years ago

I'll try to reproduce this soon. Thanks for creating this issue

bigopon commented 4 years ago

The issue you encountered with production build comes from this line https://github.com/aurelia/ux/blob/e223ca547856f5c199f3418170a4db2dad764f31/packages/form/src/index.ts#L13

In short, we use naming convention to help Aurelia determine the kind of resource (element/attribute/converter/etc...) a class is. In production build, however, webpack minify everything that is minify-able. This includes exports of modules that are not touched by PLATFORM.moduleName or something equivalent deoptimization in webpack land. So for our ux-form, the custom attribute name would be shortened to a single letter e, and thus will be interpreted as custom element and thus, resulted in view not found for it.

Fix: we should decorate the UxSubmitCustomAttribute with @customAttribute('ux-submit'), or use static resource convention. https://aurelia.io/blog/2018/06/24/aurelia-release-notes-june-2018 (check new templating features part)

Would be great if @qraynaud or @ben-girardet could help with this PR 😬

ben-girardet commented 4 years ago

Will publish a PR later today 👍🏻

ben-girardet commented 4 years ago

@bigopon you can review the PR