tochoromero / aurelia-table

Simple functional data table for Aurelia
https://tochoromero.github.com/aurelia-table
MIT License
67 stars 25 forks source link

Problem using Webpack and au-table #41

Closed elmt1 closed 6 years ago

elmt1 commented 6 years ago

Greetings,

I recently integrated this project into an application I am working on. Unfortunately, I haven't found a way to get it to work without a workaround. I am using Webpack 2.7 and what I believe are all fairly standard parts of Aurelia including aurelia-validation. All components are Typescript.

When I added au-table to the project it would just hang on the initial screen with no errors in the console or backend. I backed out the changes and put them back one at a time and found that if I added the au-plugin to my startup it failed. I read where someone mentioned adding a to their page it would work. I tried that and it stopped hanging while loading. However, if I opened the page with the require tag the app would hang up until I did a full refresh. However, pages that referenced your table code now work. I am not sure what is going on but here is my boot.ts:

`import 'whatwg-fetch'; // Add fetch polyfill so that IE11 works import { Aurelia } from 'aurelia-framework'; import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap'; declare const IS_DEV_BUILD: boolean; // The value is supplied by Webpack during the build

export function configure(aurelia: Aurelia) { aurelia.use .standardConfiguration() .plugin('aurelia-validation') .plugin('au-table');

if (IS_DEV_BUILD) {
    aurelia.use
        .plugin('aurelia-validation')
        .plugin('au-table')
        .developmentLogging();
}

aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));

}`

There are several features that you have implemented that I would really like to use. I appreciate any help you can offer and can supply further information if needed.

Thank you!

elmt1 commented 6 years ago

As a work around, I have a dummy.html file with the following:

<template>
    <require from="au-table"></require>
</template>

From what i can tell, that triggers WebPack to bring in everything needed into the project. If I include the <require> tag in a page that is actually used, it seems to cause the page and application to hang up until a refresh is performed.

tochoromero commented 6 years ago

That is pretty weird, a couple of days ago I switched to use PLATFORM.moduleName to improve the webpack support. Are you using a specific template project?

elmt1 commented 6 years ago

I started with the typescript/webpack skeleton that was available in April or so and merged that into an Asp.net core Web API project. This is my first project that uses WebPack so it seems likely that I broke something, but the other packages that I added seem to be working OK.

MarcScheib commented 6 years ago

Can you try to include the plugin using: aurelia.use.plugin(PLATFORM.moduleName('au-table'));?

elmt1 commented 6 years ago

Thank you for the suggestion. Unfortunately, changing the load script so that it imports PLATFORM and changing the aurelia.use.plugin statement to pass PLATFORM.moduleName('au-table') gives the same result. Unless I specifically add the require tag it will not load. Without the require tag, I do not see the au-table/dist/commonjs folder in the package that WebPack builds.

elmt1 commented 6 years ago

A while back -- November 2017?, I upgraded to WebPack2 and the problem went away.