search

embroider-build / ember-auto-import

Zero config import from npm packages
Other
360 stars 109 forks source link

Modifying SASS files triggers full reload since 2.6.2 #577

Open Timbuktu1982 opened 1 year ago

Timbuktu1982 commented 1 year ago

Hi there,

modifying a SASS file causes full page reload instead of CSS livereload in Ember since ember-auto-import 2.6.2. It wasn't the case when I was using 2.6.1 previously.

Thx

apellerano-pw commented 1 year ago

We are noticing this as well, on ember-cli-inject-live-reload@2.1.0 and ember-auto-import@2.6.3 which are the latest as of writing.

Editing an scss file causes both the SassCompiler and ember-auto-import-webpack broccoli task to run. The css hot reloads, but then a moment later the entire ember app unnecessarily reloads.

When I look at the websocket traffic to livereload I see reload commands for chunks generated by ember-auto-import, as well as the reload command for my app.css.

The question then, is why does ember-auto-import-webpack rebuild chunk js and issue livereload commands when only scss files have changed?

apellerano-pw commented 1 year ago

I tried downgrading to ember-auto-import@2.6.1 based on @Timbuktu1982's comment and the issue went away.

On 2.6.1 after editing an scss file I still see both SassCompiler and ember-auto-import-webpack broccoli tasks run, but ember-auto-import-webpack no longer appears in my "Slowest Nodes" list so it must be doing less work.

The websocket traffic now only shows a reload command for app.css. The reload commands for various chunk.js generated by ember-auto-import are now gone.

I think that confirms that this issue was introduced by 2.6.2 and not fixed by 2.6.3.

I looked at the diff between 2.6.2 and 2.6.1, but it was a bit over my head. Does anyone with more familiarity in this codebase have some ideas why that diff causes this regression?

KoKuToru commented 1 year ago

Since 2.6.2 the code writes new js-files for each build https://github.com/embroider-build/ember-auto-import/blob/v2.6.3/packages/ember-auto-import/ts/webpack.ts#L366

These files don't get cached like in https://github.com/embroider-build/ember-auto-import/blob/v2.6.3/packages/ember-auto-import/ts/inserter.ts#L228

From my testing .. caching these files should solve the reload problem..

erkie commented 1 year ago

Also ran into this after an upgrade. Downgrading to 2.6.1 seems to have fixed it.

erkie commented 1 year ago

However, it looks like even if I just make changes to .ts files now, it still sends a reload on the css file. I added some logging:

send reload: [ 'assets/frontend.css', 'assets/frontend.js' ]

This was when I only changed a typescript file. Still better than a page reload on simple CSS changes.

Timbuktu1982 commented 8 months ago

Hello everyone, Is there any new information on this topic?

sly7-7 commented 5 months ago

This is still happening with ember-auto-import 2.7.2, though a new app with embroider doesn't have this problem.

pikilipita commented 4 months ago

Having the same issue on my Ember projects

pikilipita commented 2 months ago

This is still happening with ember-auto-import 2.7.4 and I cannot downgrade to 2.6.1, while using ember 5.8.0, any workaround suggestions?